Brand Guidelines
The colors, type, logo and UI components that make up the Vulo Labs design system — pulled directly from the tokens the live site runs on.
Color
One interactive color — navy blue — carries buttons, links and emphasis. Orange is reserved for accents inside dark sections. Everything else is neutral.
Foreground#0F172AHeadings, body text
Accent#002991Buttons, links, emphasis
Muted#454F5ESecondary text
Line#DFDFE3Borders, dividers
Accent Soft#EAF2FFTints, hover fills
Background#FFFFFFPage canvas
Highlight#F76A0CDark-section accent, CTAs
Dark section tokens
Dark Surface#0F172ADark section background
Dark Muted#94A3B8Secondary text on dark
Dark Line#1E293BBorders on dark
Dark Panel#172033Cards on dark
Icon accent palette
Blue#2563EB
Teal#009688
Amber#E89A00
Pink#E83E8C
Indigo#4F2EE8
Violet#7C3AED
Typography
Nunito, end to end — headings, body, buttons and labels. No second typeface.
H1 · Nunito 700 · clamp(26px, 4vw, 40px)
Build the right product
H2 · Nunito 700 · clamp(28px, 3.8vw, 44px)
From idea to production
H4 · Nunito 700 · 16–17px
Product thinking first
Body · Nunito 400 · 14–17px
We understand what the product needs to do — then design the simplest system that does it properly.
Eyebrow / mono label · Nunito 700 · 12px · uppercaseSection Label
Logo
A "V" monogram with an arrow-flag on the ascending stroke — tying the initial to the site's product-velocity motif.
Vulo Labs
Vulo Labs
Do
- Use on the accent navy badge, or a white badge on dark backgrounds.
- Keep clear space around the mark equal to its own height.
- Pair the wordmark with Nunito 600–700.
Don't
- Recolor the mark outside navy / white.
- Stretch, skew or rotate it.
- Place it on busy photography or low-contrast backgrounds.
Components
Buttons, tags and radius scale — live, not screenshots.
8px
12px
16px
20px
pill