Cor

O Velon usa uma paleta pequena e deliberada, derivada do VELON Manual da Marca v1.0 (Junho 2026). Ela é organizada em três camadas: brand (as marcas), neutral (superfícies e texto) e functional (estados semânticos).

Os valores vivem em @velon-finance/tokens como TypeScript e são emitidos como variáveis CSS (tokens.css) mais utilitários Tailwind (via preset). Sempre puxe do sistema. Nunca fixe hexes direto no código da aplicação.

Isto é Verdade em pixels: contraste honesto e legibilidade real, para que um saldo ou um estado nunca seja ambíguo para quem está lendo.

Brand

As marcas Velon e os acentos primários. A âncora da marca é o Navy (brand.navy #1B3A6B), usado para a marca, títulos, símbolo e sidebar. A cor interativa/primária é o Azul Ação (brand.action #1E5BA8), com derivações para estados (action-hover #19497F, action-active #143C66, action-pale #E9F0F8 bg sutil). Superfícies escuras usam Azul Profundo (brand.deep #0C1A26). O Velon é monocromático por princípio; o único gradiente sancionado é a superfície de card (navy → azul profundo, §6.2). Nunca aplique efeitos de cor ou gradiente ao símbolo ou ao 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

Texto, superfícies e bordas. O contraste WCAG AA se mantém para ink (#15263A) sobre mist (#F4F6F9) e slate (#5B6B7A) sobre paper. muted (#7E93A8) é apenas para texto decorativo / grande.

neutral.ink

#15263A

neutral.slate

#5B6B7A

neutral.muted

#7E93A8

neutral.border

#E3E8EC

neutral.mist

#F4F6F9

neutral.paper

#FFFFFF

Functional

Estados semânticos. Cada par (success / success-foreground) reage ao tema via preset.

functional.success

#328564

functional.warning

#E0A92E

functional.danger

#C95E54

functional.info

#44648F

Tokens de tema (semânticos)

Os componentes consomem utilitários semânticos (bg-card, text-foreground, border-border) apoiados por variáveis CSS que se invertem quando a classe .dark está no <html>. Veja Philosophy para o racional.

Token	Claro	Escuro
`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%`

Lista completa: themeLight e themeDark em @velon-finance/tokens.

Não faça

Não use o blue-600 do Tailwind. É #2563EB, não o Azul Ação (#1E5BA8). São visivelmente diferentes.
Não introduza gradientes ou azuis fora das derivações de brand. O único gradiente sancionado é a superfície de card (navy → azul profundo, §6.2); fora isso, o Velon é monocromático.
Não use #000000 para texto. Use neutral.ink (#15263A), que carrega menos peso.
Não escolha cores fora desta paleta sem um PR aprovado pelo Brand que as adicione aos tokens.

Filosofia Tipografia