Portal App — Etapa 1.3
Design tokens: tema claro/escuro com contraste WCAG AA, tipografia Inter self-hosted, escala consistente de espaçamentos, raios e sombras. Clique no botão ao lado para alternar o tema — a preferência é salva em localStorage.
Tipografia
Família Inter (self-hosted via @fontsource/inter), pesos 300–700.
Aplicada globalmente em <h1>…<h6>.
Heading 1 · 36px · Bold
Heading 2 · 30px · Bold
Heading 3 · 24px · Semibold
Heading 4 · 20px · Semibold
Heading 5 · 18px · Semibold
Heading 6 · 16px · Semibold
Parágrafos, pequeno, mono e destaque.
Parágrafo base — 16px / 1.5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Texto pequeno — 14px. Usado em legendas, hints, metadados, timestamps.$ npm run build (mono · SF Mono / Menlo / Consolas)
Texto grande — 18px. Para destaques, introduções ou CTAs.
Cores semânticas e status
Paleta light + dark consistente. Mude o tema para verificar contraste.
Variantes muted / superfícies
Raio de borda
De 4px (badges) a 24px (hero cards).
Elevação / sombras
Sete níveis de xs (subtil) a 2xl (folhearão modal).
Espaçamentos
Escala base 4px com tokens semânticos (section, card, gutter).
Sanity check — shadcn Button (tema aplicado)
Mesmo componente da Etapa 1.2, agora com tokens desta etapa.