Início

Comece aqui

Design System Finance Equity

Quase monocromático, preciso e silencioso: navy, azul de apoio e um único acento laranja. O espaço vazio é o material caro.

Princípios

  1. 01Estrutura antes de corSepare por superfície, peso e espaço. Nunca pinte um card só para destacá-lo.
  2. 02Um acento, um significadoO laranja marca ação, valor e etapa ativa. Regra dos 2%: no máximo um botão primário por tela.
  3. 03Números de primeiraTodo número é tabular e alinhado à direita nas colunas.
  4. 04Profundidade honestaQuatro degraus de superfície. Sombra só no que flutua.
  5. 05Movimento confirmaAnime a resposta a uma ação. Nada de animação decorativa.

Por onde entrar

FundamentosCor, tipo, medidas e ícones.Componentes66 componentes com demo, código e uso.Gráficos15 gráficos com série herói e tabela acessível.Produtos em previewTelas reais de produto feitas com o sistema.

Instalar

Pacote @financeequity/ui 0.1.0 (tarball) ou componente a componente pelo registry shadcn.

npm install ./financeequity-ui-0.1.0.tgz
npx shadcn@latest add https://finance.rafastos.com.br/r/button.json

Novidades

  • 0.1.02026-10-01Identidade Finance Equity: rampas --fe-neutral-* (matiz navy ~210°), --fe-azul-*