Finassist — Design System
Style Guide
Preview ao vivo dos tokens, componentes e padrões. Fonte canónica: docs/05_DESIGN.md. Direção estética anti-AI-slop: sobriedade, mobile-first, acessibilidade AAA em valores monetários.
1. Cores
Paleta neutra (off-white + charcoal) com um único acento (verde-musgo). Income em verde-azulado, expense em terracota. Vermelho-puro banido.
Base
Background
--color-bg
Surface
--color-surface
Surface muted
--color-surface-muted
Border
--color-border
Border strong
--color-border-strong
Foreground
--color-fg
Foreground muted
--color-fg-muted
Foreground subtle
--color-fg-subtle
Acento
Accent (verde-musgo)
--color-accent
Accent hover
--color-accent-hover
Accent soft
--color-accent-soft
Sinais semânticos
Income (verde-azulado)
--color-income
Income soft
--color-income-soft
Expense (terracota)
--color-expense
Expense soft
--color-expense-soft
Warning (âmbar)
--color-warning
Warning soft
--color-warning-soft
Danger
--color-danger
Danger soft
--color-danger-soft
Info
--color-info
Info soft
--color-info-soft
2. Tipografia
Geist (sans + mono). Numerais tabulares em todo valor monetário. Sem Inter+Space Grotesk genérico.
Display — A vida financeira em conversa
40px / 700 / 1.1 / Geist Sans
H1 — Quanto você gastou este mês?
30px / 700 / 1.15
H2 — Seções de card
24px / 600 / 1.2
H3 — Listas e sub
20px / 600 / 1.3
Body — Em maio, sua maior categoria foi alimentação, com R$ 1.245,30 distribuídos em 47 compras. Quer ver as 5 maiores?
16px / 400 / 1.5
Body small — texto secundário e legendas
14px / 400 / 1.5
CAPTION — labels e metadata
12px / 500
R$ 1.234,56
Geist Mono — valores com tabular numerals (alinhamento vertical em listas)
R$ 1,99
R$ 234,50
R$ 12.345,67
Note o alinhamento perfeito da vírgula decimal — efeito de font-variant-numeric: tabular-nums
3. Espaçamento
Escala 4px (sistema 8-point). Espaço negativo generoso é parte da identidade — sobriedade financeira.
4. Border Radius & Sombras
Sombras subtis — finanças = confiança = sem drama visual.
Border radius
sm · 6px
md · 8px
lg · 12px
xl · 16px
full · 9999px
Sombras
shadow-xs
shadow-sm
shadow-md
shadow-lg
6. Inputs
Labels obrigatórias. aria-invalid + aria-describedby em erro.
Mínimo 12 caracteres
O CPF deve ter o formato 000.000.000-00
Vinculada via Open Finance — não editável
7. Cards
Padding generoso. Sem fronteiras pesadas. Espaço negativo > separadores.
Card default
Borda fina + shadow-sm. Para conteúdo em repouso.
Card elevated
Shadow-md. Para destacar acção ou resultado importante.
8. Badges
Cor + ícone — nunca só cor (A11y).
9. Money — Valor monetário acessível
Componente obrigatório para todo valor. Tabular-nums + aria-label falado. Contraste AAA (≥ 7:1).
Tamanhos
Ênfase semântica
Alinhamento em lista (tabular-nums)
- iFood−R$ 38,90
- Salário+R$ 8.500,00
- Supermercado Atacadão−R$ 423,55
- PIX recebido — Maria+R$ 150,00
10. StatusBadge
Estado de connection / account. Cor + ícone + texto — nunca só cor.
11. Mensagens de Chat
Cada resposta da IA é uma carta compacta. User à direita, assistant à esquerda com avatar Lucide sparkles.
Conversa iniciada · há 2 minutos
Finassist
Em maio você gastou R$ 1.245,30 em alimentação — 47 compras. As maiores foram iFood (R$ 380) e Atacadão (R$ 423,55).
Finassist
Delivery foi 28% da sua categoria alimentação (R$ 348,90 em 18 pedidos). É um pouco acima da média dos últimos 6 meses (22%). Algo a notar?
12. Estados de UI
Loading, empty, error, success — obrigatórios em todo fluxo de fetch/submit.
Loading
Empty
Você ainda não tem orçamento.
Crie um para acompanhar seus gastos por categoria.
Error
Não conseguimos sincronizar sua conta.
Tente novamente em alguns segundos ou contacte suporte.
Success
✓ Conta conectada com sucesso.
18 meses de histórico importados.
Insight proactivo · cash_flow_risk
Pelas suas próximas contas, vai faltar −R$ 320,00 em 8 dias.
Considere antecipar uma receita ou adiar uma despesa flexível.