Sistema de marca e interface · tokens v2.0.0
Design system
Uma só fonte (design-system/tokens.json) alimenta o site, as aulas, as ferramentas, os posts, as redes e o e-mail. Esta página é gerada dos tokens: se a cor mudou lá, mudou aqui. Tema claro e escuro automáticos.
Ideia
Latitude Club: ganhe em dólar, viva onde quiser. O objeto da marca é o passe de embarque: um ticket com recortes e picote, sempre com dados reais do produto (moeda, fuso, nível). Viagem e renda no mesmo símbolo, em coral, asfalto e céu, com uma tipografia grande e apertada.
Logo
Ticket coral com recortes laterais e seta ↗ asfalto, wordmark em minúsculas e chip CLUB. Mínimo de 32 px. Sobre coral, use a versão invertida; nunca coral sobre coral.
Cor
#12141A
texto, bordas, fundo escuro
#E6F3FB
fundo da página
#FF5A36
marca, ação, marcador (texto sempre asfalto)
#00B3A4
lado "viva onde quiser", etiquetas
#007368
lagoa quando for texto sobre claro
#FFC93C
destaque pontual, avisos, selo
#FFFFFF
superfície de cards
#3C4654
texto secundário
#5B6573
rótulos mono
#BBD3E4
linhas suaves, sombra do bilhete
#D3E8F6
seção alternada
#8A5A00
aviso em texto
Proporção: asfalto + céu ~70%, coral ~20%, lagoa e sol ~10%. Coral nunca é cor de texto sobre claro. Contraste (WCAG) calculado dos tokens:
| Par | Contraste | Uso |
|---|---|---|
| ink sobre paper | 16,3:1 | texto |
| ink-2 sobre paper | 8,5:1 | texto secundário |
| mute sobre paper | 5,2:1 | rótulos |
| on-accent sobre accent | 5,9:1 | texto sobre coral |
| lagoon-text sobre paper | 5,1:1 | lagoa como texto |
| warn sobre paper | 5,2:1 | aviso em texto |
| ok sobre paper | 4,7:1 | sucesso |
| bad sobre paper | 5,4:1 | erro |
| ink sobre paper (escuro) | 16,3:1 | texto (escuro) |
| accent sobre paper (escuro) | 5,9:1 | coral sobre fundo escuro |
| lagoon-text sobre paper (escuro) | 9,8:1 | lagoa como texto (escuro) |
Tipografia
Bricolage Grotesque 800 · títulos
Seu contrato em dólar, de qualquer lugar
Hanken Grotesk 400–700 · texto
As aulas são para ler, não para assistir. Linha de até 66 caracteres, corpo fluido, contraste alto.
Martian Mono 400–500 · dados e rótulos
US$ 5.000 × R$ 5,00 = R$ 25.000 · fonte: 05/10/2026
Assinaturas
O bilhete
Card com recortes e picote. Os campos são dados reais do produto, nunca enfeite. Aparece no hero, nas capas e em cartões de destaque.
O carimbo de passaporte (stamp()) vira selo em posts e adesivos:
Picote, marcador e linhagem
O picote (.perf) separa seções no lugar de réguas. O marcador (.hl) destaca uma frase por tela. A linhagem mostra a cadeia por onde o dólar passa:
- Cliente pagaUS$ 100taxa de mercado
- Elo 1US$ 80−20 (hipótese)
- Chega a vocêUS$ 66antes do imposto PJ
Componentes
Como replicar
node design-system/build.mjs --out ../outro-projeto/public/brand
<link rel='stylesheet' href='/brand/latitude.css'>Guia completo, regras de uso e canais: design-system/DESIGN-SYSTEM.md.
Acessibilidade
- Foco visível de 3px em todos os controles.
- Movimento reduzido respeitado (
prefers-reduced-motion). - Rótulos em todos os campos; navegação por teclado no Raio-X e no Treino.
- Sem informação só por cor: a nota do Raio-X também aparece em número.