Introdução
O sistema de interface do Rastreio X, da PrivateLab: tokens, materiais e componentes.
O PrivateLab Design System reúne o que o Admin e as páginas públicas compartilham: os tokens de cor e tipografia, os materiais (superfícies, raios, sombras) e os componentes da fachada @rastreio-x/ui.
Os valores vêm de tokens, nunca de cores copiadas à mão. Tudo muda junto com o tema, claro ou escuro, e respeita prefers-reduced-motion.
CoresPapéis de cor, escalas e contraste, nos temas claro e escuro.
TipografiaInstrument Serif nos títulos, Geist no corpo.
MateriaisSuperfícies, raio de 16 px e sombras suaves.
Grid e LayoutShell, espaçamento de 3,5 px, breakpoints e containers.
MovimentoDurações, curvas e movimento reduzido.
ÍconesO catálogo de ícones da fachada, com busca.
MarcaSímbolo, wordmark e regras de uso.
ComponentesBotões e controles da fachada, com anatomia e props.
Princípios
- Estado nunca depende só da cor.
- Sem caixa alta, nem no texto nem no CSS.
- Movimento curto (150 a 250 ms), só com
opacityetransform. - Campos sem borda: o limite vem do fundo tonalizado e do anel de foco azul.