Styleguide
Kit portado do design (Figma Make). Comparação lado a lado + teste de acessibilidade.
Cores semânticas
income
#10b981
expense
#ef4444
investment
#8b5cf6
pending
#f59e0b
info
#3b82f6
sidebar
#0f172a
Button
Badge / StatusBadge
NeutroInfoInvestimentoPagoRecebidoPendenteVencido
Card
Card estático
Sem onClick — sem hover.
Card clicável
Hover eleva; clique dispara toast.
Input / Select
Valor inválido
Switch / Tabs
ProgressBar
35%
70%
92%
MoneyDisplay (centavos)
R$ 5.234,56-R$ 189,90R$ 1.000,00R$ 49,99
Skeleton
Overlays (teste de acessibilidade)
No Modal/Dialog: Tab circula dentro, Esc fecha, o foco volta ao botão que abriu.
EmptyState
Nada por aqui ainda
Quando houver lançamentos neste mês, eles aparecem aqui.