Sistema de design para um produto de reconciliação financeira. Claro por padrão, alto contraste, tipografia grande. A marca (íris) é a cara; verde/âmbar/vermelho carregam o significado de status.
O que guia cada decisão visual.
Legibilidade primeiro
Fonte grande, contraste alto. Nada abaixo de 14px.
Simples por fora
A complexidade fica atrás de "ver detalhes".
Status com significado
Verde/âmbar/vermelho só para estado financeiro.
Termina em ação
Toda tela aponta o próximo passo, não só números.
Tokens são a fonte da verdade — componentes nunca usam hex cru.
Superfícies & tinta
background
surface
surface-2
muted
foreground
muted-foreground
Marca (íris)
primary
primary-hover
primary-soft
ring (foco)
Status financeiro
success
success-soft
warning
warning-soft
danger
danger-soft
Bricolage Grotesque (display) · Figtree (corpo) · JetBrains Mono (números).
Reconciliação clara
O dinheiro bate?
Corpo em Figtree, 16px, leitura confortável mesmo com zoom alto — pensado para quem passa o dia conferindo repasses.
Secundário, 14px, em muted-foreground.
Variantes e tamanhos.
Significado financeiro consistente em todo o produto.
KPIs com variação (▲/▼) e contexto.
Composição base de página.
Superfície branca sobre o papel marfim, sombra suave, raio generoso.
Conteúdo da aba Resumo.
O padrão único de lista paginada (§0.8): resumo à esquerda, números com salto rápido centrados, tamanho à direita. URL-driven, server-first.