Guardião de Design
Design System — Designados
Paleta terrosa minimalista, fonte Inter. Estes são os tokens do painel — as páginas dos usuários usam o Design System de cada tenant (--ds-*).
Cores
Creme, argila, espresso. Acento terracota usado com parcimônia.
primary
primary-light
primary-dark
ink
accent
bg
bg-subtle
surface
text
text-muted
border
success
warning
error
Tipografia
Inter (sans) + Geist Mono. Mobile-first.
label · eyebrow
display-xl · Título de página
display-lg · H2 de seção
display-md · H3 de card
body-lg · corpo destacado
body-md · corpo padrão da UI, o tamanho de leitura mais comum no painel.
body-sm · captions, meta, inputs
mono · --ds-primary · tokens e refs
Espaçamento
Grid de 4px.
Bordas (Radii)
Sombras
Botões
Cards
default
Borda + sombra sutil.
elevated
Sem borda, sombra maior.
flat
Fundo areia, sem sombra.
Inputs
Links
Badges / Tags
Iconografia
lucide-react · stroke 1.75 · 18px default · currentColor.
Motion
fast 150ms · base 250ms · slow 500ms. Respeitar prefers-reduced-motion.
Layout
App shell: sidebar 256px + topbar 56px. Marketing: container 1200px.
sidebar
topbar
Área de conteúdo do painel.