Início

Comece aqui

Design System Rafastos.io

Grafite e Ponto: monocromo, preciso e silencioso. A cor só aparece como sinal.

Princípios

  1. 01Estrutura antes de corSepare por superfície, peso e espaço. Nunca pinte um card só para destacá-lo.
  2. 02Um ponto, um significadoA cor de marca marca ativo, foco ou destaque. No máximo três 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 @rafastos/ui 0.1.0-tech.2 (tarball) ou componente a componente pelo registry shadcn.

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

Novidades

  • Não publicadoPlanejado: se decidido, publicação em registry privado.
  • 0.1.0-tech.22026-09-29Stat: prop icon (opcional, ao lado do rótulo, neutro — nunca colorido). value numérico passa a ser formatado em pt-BR e a animar com animateValue (antes, com nú
  • 0.1.0-tech.12026-09-29Direção Grafite e Ponto (merge dbc7730 na main): neutros puros, o Ponto como única cor de marca, raio de 8 px nos controles, escada de quatro superfícies e cont