Loading
Fundamentos
Tokens. Escala. Sistema.
Oito cores, três famílias tipográficas, escala exponencial de espaçamento, curva única de motion. Cada token tem papel preciso — nada decorativo.
01 · PALETA
Oito cores. Papéis precisos.
Oled Black
#151A1A
--color-oled
Background dark, texto em light
Oled Deep
#0B0F0F
--color-oled-deep
Superfícies elevadas dark
Titanium
#C0C4C4
--color-titanium
Metálico, highlights técnicos
Cream
#F4EFE6
--color-cream
Background light, texto em dark
Paper
#FAF7F1
--color-brand-paper
Superfícies elevadas light
Champagne
#C9A961
--color-champagne
Acento primário — CTAs, labels
Aged Bronze
#A87248
--color-bronze
Acento secundário, gradientes
Deep Green
#0F3326
--color-deep-green
Verde garrafa, acento raro
TOKENS SEMÂNTICOS BI-MODAIS
--bg: cream ⇄ oled
--surface: paper ⇄ oled-deep
--text: ink ⇄ cream
--surface: paper ⇄ oled-deep
--text: ink ⇄ cream
--text-dim: 60% opacidade
--text-dimmer: 40% opacidade
--border: 8% / 12%
--text-dimmer: 40% opacidade
--border: 8% / 12%
accents fixos:
champagne · bronze · green
não mudam entre temas
champagne · bronze · green
não mudam entre temas
02 · TIPOGRAFIA
Três famílias. Papéis claros.
DISPLAY
Aa
Fraunces
Serif editorial variable. Títulos, frases-síntese, manifestos.
BODY
Aa
Inter
Sans neutra altamente legível. Corpo de texto, UI, navegação.
MONO
Aa
IBM Plex Mono
Monospace intelectual. Labels, tags, números, metadata.
TokenUsoSize
DisplayHero, frases-manifesto5rem
H1Títulos de página3rem
H2Títulos de seção2rem
H3Subtítulos1.5rem
Body LParágrafos editoriais1.0625rem
Body MCorpo padrão0.9375rem
Body SCaptions, descrições0.8125rem
MonoLabels, tags, metadata0.625rem
03 · ESPAÇAMENTO
Escala de 8.
xs4px
sm8px
md16px
lg24px
xl40px
2xl64px
3xl96px
04 · MOTION
Discreto. Deliberado. Denso.
DURAÇÃO
200-900ms
UI em 200-300ms. Reveals editoriais em 500-900ms.
EASING
cubic-bezier(0.16, 1, 0.3, 1)
Curva suave com encerramento firme.
PRINCÍPIO
Movimento que reforça hierarquia.
Nada ornamental. Cada animação clarifica relação.