Fundamentos
Tokens de cores, tipografia, radius e animações do design system
Cores
Variável CSS, utilitário Tailwind, valor oklch e HEX resolvido (muda com o tema).
background
--background
bg-background
…
…
foreground
--foreground
bg-foreground
…
…
primary
--primary
bg-primary
…
…
secondary
--secondary
bg-secondary
…
…
muted
--muted
bg-muted
…
…
accent
--accent
bg-accent
…
…
destructive
--destructive
bg-destructive
…
…
card
--card
bg-card
…
…
popover
--popover
bg-popover
…
…
sidebar
--sidebar
bg-sidebar
…
…
border
--border
bg-border
…
…
ring
--ring
bg-ring
…
…
Tipografia
Classes mapeadas às CSS variables do next/font.
Heading
font-heading → --font-heading (Inter Tight)
Corpo
font-sans → --font-sans (Inter)
Mono
font-mono → --font-geist-mono (Geist Mono)
Radius
Base --radius: 0.45rem. Escala via --radius-* e utilitários rounded-*.
rounded-sm
--radius-sm
calc(var(--radius) * 0.6)
…
rounded-md
--radius-md
calc(var(--radius) * 0.8)
…
rounded-lg
--radius-lg
var(--radius)
…
--radius: …
rounded-xl
--radius-xl
calc(var(--radius) * 1.4)
…
rounded-2xl
--radius-2xl
calc(var(--radius) * 1.8)
…
rounded-3xl
--radius-3xl
calc(var(--radius) * 2.2)
…
rounded-4xl
--radius-4xl
calc(var(--radius) * 2.6)
…
Animações
One-shots precisam de Replay (só rodam no mount). Floats são infinitas.
fade-up
--animate-fade-up
animate-fade-up
Entra de baixo com fade (one-shot). Ideal para seções ao montar.
fade-up-soft
--animate-fade-up-soft
animate-fade-up-soft
Como fade-up, mas opacity inicial > 0 — seguro para candidatos a LCP (hero).
fade-in
--animate-fade-in
animate-fade-in
Só opacidade, sem movimento (one-shot).
float
--animate-float
animate-float
Sobe/desce em loop (7s). Decorativo.
float-2
--animate-float-2
animate-float-2
Mesma float com duração/atraso diferentes (9s, -3s).
float-3
--animate-float-3
animate-float-3
Variante float (8s, -5s) para camadas desincronizadas.