Obsidian
#0D0D0DRGB 13 · 13 · 13Base escurav0.1.0-tech.2
Design System · Rafastos.io
A linguagem visual de tudo que leva o nome Rafastos.io.
Tokens, componentes, gráficos e telas de produto num sistema só: grafite, números alinhados e um único ponto de cor.
Feito por Rafael — design e código na mesma mão.
Produtos em preview
O sistema em telas de produto de verdade.
Pipeline, marketing e login montados só com os componentes, blocos e tokens do pacote.
Tipografia & Cores
Duas famílias, uma escada de cinza e um ponto de cor.
Display / UI
Space Grotesk
Títulos, interface e dados.
Código / dados
IBM Plex Mono
Números, código e medidas.
Steel
#3A3A3CRGB 58 · 58 · 60Estrutura / superfíciesMist
#98989DRGB 152 · 152 · 157Texto secundárioWhite
#F2F2F2RGB 242 · 242 · 242Texto no escuro / fundo claroPonto
#C084ECRGB 192 · 132 · 236Assinatura: o pingo do i (violeta #7C3AED no claro)Escada neutra
--rf-neutral-0…950 — a base para produtos futuros.
Biblioteca
Tudo num só sistema, do token à tela.
- componentes
- 66
- gráficos
- 15
- animações
- 22
- padrões
- 5
- tokens
- 117
- histórias
- 137
- 01FundamentosNeutros puros, o Ponto como única cor, Space Grotesk + IBM Plex Mono, espaço, raio, superfícies e sombra.
- 02Componentes66 itens shadcn/Radix (radix-nova), cada um com demo, código e quando usar ou não.
- 03Gráficos15 gráficos em Recharts, com a série herói no Ponto, séries por token e tabela acessível.
- 04Movimento22 demos: os três movimentos de assinatura e as técnicas de produto, sempre com reduced-motion.
- 05PadrõesComposições de tela (ReUI Lab, Conta, Listing, Results, Fluxo) com dados fictícios.
- 06FerramentasLaboratório de tokens, Storybook com 137 histórias e o pacote @rafastos/ui.
Quem sustenta
“O sistema existe para eu parar de decidir a mesma coisa duas vezes.”
Rafael desenha e implementa o próprio sistema desde 2026 — a mesma mão que define o token escreve o componente. O catálogo nasce do uso real: cada peça entrou porque um projeto precisou dela.
Rafael
Design System · marca pessoal · Florianópolis
Explorar o Design System
O catálogo vivo, o laboratório de tokens e o Storybook, em designsystem.rafastos.com.br.