Color

Velon uses a small, deliberate palette derived from the VELON Manual da Marca v1.0 (Junho 2026). It’s organized in three layers: brand (the marks), neutral (surfaces and text), and functional (semantic states).

The values live in @velon-finance/tokens as TypeScript and are emitted as CSS variables (tokens.css) plus Tailwind utilities (via the preset). Always pull from the system. Never hardcode hexes in app code.

This is Verdade in pixels: honest contrast and real legibility, so a balance or a state is never ambiguous to the person reading it.

Brand

The Velon marks and primary accents. The brand anchor is Navy (brand.navy #1B3A6B), used for the marca, títulos, símbolo and sidebar. The interactive/primary color is Azul Ação (brand.action #1E5BA8), with derivations for states (action-hover #19497F, action-active #143C66, action-pale #E9F0F8 subtle bg). Dark surfaces use Azul Profundo (brand.deep #0C1A26). Velon is monochromatic by principle; the only sanctioned gradient is the card surface (navy → azul profundo, §6.2). Never apply color effects or a gradient to the symbol or wordmark.

brand.navy

#1B3A6B

brand.action

#44648F

brand.deep

#0C1A26

brand.white

#FFFFFF

gradient.card

navy → azul profundo · the only sanctioned gradient (§6.2, card surface)

Neutral

Text, surfaces and borders. WCAG AA contrast holds for ink (#15263A) on mist (#F4F6F9) and slate (#5B6B7A) on paper. muted (#7E93A8) is for decorative / large text only.

neutral.ink

#15263A

neutral.slate

#5B6B7A

neutral.muted

#7E93A8

neutral.border

#E3E8EC

neutral.mist

#F4F6F9

neutral.paper

#FFFFFF

Functional

Semantic states. Each pair (success / success-foreground) is theme-aware via the preset.

functional.success

#328564

functional.warning

#E0A92E

functional.danger

#C95E54

functional.info

#44648F

Theme tokens (semantic)

Components consume semantic utilities (bg-card, text-foreground, border-border) backed by CSS variables that flip when the .dark class is on <html>. See Philosophy for the rationale.

Token	Light	Dark
`background`	`0 0% 100%` (paper)	`208 52% 10%` (Azul Profundo #0C1A26)
`foreground`	`212 47% 15%` (ink)	`0 0% 98%`
`card`	`0 0% 100%`	`208 40% 14%`
`primary`	`213 70% 39%` (Azul Ação)	`213 75% 62%`
`border`	`210 16% 91%`	`208 25% 22%`

Full list: themeLight and themeDark in @velon-finance/tokens.

Don’t

Don’t use Tailwind’s blue-600. it’s #2563EB, not Azul Ação (#1E5BA8). They’re visibly different.
Don’t introduce gradients or blues outside the brand derivations. The single sanctioned gradient is the card surface (navy → azul profundo, §6.2); Velon is otherwise monochromatic.
Don’t use #000000 for text. use neutral.ink (#15263A) which carries less weight.
Don’t pick colors outside this palette without a Brand-approved PR adding them to tokens.

Philosophy Typography