Inglês
PortuguêsDesign system
Datum
O design system deste site: tokens, temporadas e componentes que dão a mesma personalidade a tudo o que eu construo, do portfólio às ferramentas.
Em números
- Componentes
- 14
- Primitivos e padrões gerais, com uma história por estado.
- Histórias no Storybook
- 69
- Cada uma passa pelo axe, a checagem automática de acessibilidade.
- Temporadas
- 8
- A cor de destaque muda com a data, do Carnaval ao Natal.
- Contraste
- WCAG AA
- Em todo par de texto e fundo: os testes reprovam a build abaixo de 4,5:1.
- Bloqueio da página (TBT)
- < 100 mscaiu de 1.424 ms
- Home no Lighthouse, perfil de celular.
- Performance no Lighthouse
- 90+subiu de 54
- Home, perfil de celular.
Antes e depois
A mesma home, na mesma tela. Antes, componentes do shadcn sem nenhuma personalidade e um fundo de estrelas animado em JavaScript que travava o celular. Depois, a prancheta Blueprint, com a cor da temporada.
Uma peça, três temporadas
O mesmo card na temporada base, no Halloween e no Natal. Só a cor de destaque muda; o layout e o contraste ficam iguais, e o site troca sozinho pela data.
O que tem dentro
Tokens
Paleta, tema escuro, tipografia, espaço de 4 px e raio de 2 px no formato do W3C DTCG. Uma fonte só gera as variáveis CSS, o tema do Tailwind 4 e um módulo TypeScript.
Componentes
Button, Badge, Card, Field, Select, RadioGroup, Sheet e outros, sobre Radix e shadcn/ui, com a camada de personalidade Blueprint por cima.
Temporadas
O tema troca pela data antes da primeira pintura da página, mesmo com as páginas em cache por um ano.
Storybook
Fundamentos, componentes e novidades, com quando usar cada variante e checagem de acessibilidade em cada história.
Tecnologias
- W3C DTCG
- Tailwind CSS 4
- Radix UI
- shadcn/ui
- React 19
- TypeScript
- Storybook 10
- Vitest
Por dentro do Datum
Todos os componentes estão no Storybook, e o código é aberto no GitHub.