Primary dark surface. Body text on light. A blue-shifted black, never #000.
- Hex
- #0B1020
- RGB
- 11 16 32
- Token
- --ink
Veliro is network tokenization infrastructure for payments architects. The brand reads like the product: two surfaces, one accent, no decoration. This is the system that keeps every surface legible and unmistakably Veliro.
The mark is a pair of offset parallelograms, tapered so the thickness shifts across each rail, set parallel to suggest dual routes. The wordmark is Manrope at 700. Color it teal or keep it monochrome; never rebuild it.
Hold clearspace equal to the height of the mark on every side. No copy, image, divider, or container edge enters that zone. Below 14px, the favicon mark replaces the lockup entirely.
Measured from the cap height of the V. Nothing crosses into the zone.
Lockup 120px wide on screen, 22mm in print. Mark 24px on screen, 6mm in print.
Color it teal or stay monochrome. Don't rotate, distort, reset, shadow, lowercase, or hollow it. These are the failure modes that come up most often.
04.1Rotate the lockup off baseline.
04.2Stretch or distort proportions.
04.3Reset the wordmark in another typeface.
04.4Apply drop shadows or glow effects.
04.5Set the wordmark in lowercase.
04.6Outline or hollow the mark.
Midnight Ink and Mist are the two surfaces; White is a card on light. Signal Teal is the one accent, used once per view, never decoratively. Everything else is an opacity ramp of the foreground.
Primary dark surface. Body text on light. A blue-shifted black, never #000.
Primary light surface. Body text on dark. A cool off-white with a hint of blue.
The single accent. One per view: a CTA, the status dot, or one positive metric.
Card surface on Mist only. Never the page background.
One teal per view: the primary CTA, the status dot, or one positive metric. Never borders, dividers, or hovers.
Secondary text, hairlines, and dividers all derive from opacity ramps of Ink or Mist, never a named gray.
Every page and section is one of the two surfaces. No gradients, no mesh. White is a card fill only.
One sans for everything, one mono for code, token IDs, and tabular numbers. Letter-spacing goes negative for display and positive for caps labels; the contrast does the work of a second typeface.
32px and up gets negative tracking (−0.02em to −0.035em) and a tight line-height. Bigger sets tighter.
Meta labels, eyebrows, and compliance rows use uppercase with positive tracking. Pacing devices, never decoration.
Body sets at 15px, lh 1.65, weight 400. Never below 12px on screen, never in mono.
Copy is technical, declarative, and terse. It assumes an engineer is reading and states what the product does in the fewest words. Prose follows the Google developer documentation style guide, in US English.
Lucide is the official library: 1.5px stroke, geometric, no fills. Icons inherit currentColor. The Veliro mark is not an icon; never drop it inline as a bullet.
Always 1.5px, never filled, never 2px. Geometric joins, never rounded friendly terminals.
14px inline with body, 18px in UI controls, 22–24px in feature tiles. No 32px+ outside a feature tile.
In product UI that is fg-2; in CTAs and active states it is teal. Never a fixed gray.
Two durations, two easings, fades and 4–8px translates only. The status dot is the only living motion in the system; everything else moves once and stops. Hover a control below to feel it.
Backgrounds hold. Buttons may brighten the teal fill. 200ms.
Hover me--dur-2 · --easing-standard1px translateY down. No scale, no spring, no overshoot.
Press me--dur-1 · translateY(1px)2px teal outline at 2px offset. Never the browser blue, never a glow.
outline · 2px tealOpacity 1 → 0.6 → 1, 2s, infinite. The status dot only.
All systems operational2s · infiniteFour canonical applications: business card, marketing hero, product UI, and app icon. Every surface uses the same restraint: Ink or Mist, one teal, no decoration.
| Token | Network | Issued |
|---|---|---|
| tok_8f1a · 4242 ···· 4242 | Visa | 14:08 |
| tok_3c92 · 5555 ···· 4444 | Mastercard | 14:07 |
| tok_b1e7 · 3782 ···· 0005 | Amex | 14:05 |
A short list of moves that violate the system. Each one looks tempting in isolation. Together they erode the precision the brand sells.
Pink, purple, orange, lime. There is one accent. It is teal.
No background gradients, no gradient text, no mesh, no aurora.
Not in product, not in marketing, not in error states. Ever.
"Powerful", "seamless", "next-gen", "revolutionize". Cut every one.
No credit cards floating in 3D. Show the product UI instead.
No backdrop-filter on content, no blur, no glassmorphism. Surfaces are solid.
Don't invent a #888. Use the opacity ramp of Ink or Mist.
Type sits flat. Shadows belong on cards and floating panels only.
No chat bubbles, no scroll-progress bars, no banner CTAs. Only the nav floats.
Everything in this guide lives in the brand vault. All fonts load locally, so the system is fully offline-safe.
Loaded locally from /fonts.
Tapered Rails: a pair of offset tapered parallelograms evoking dual payment routes.