02.01 — Cores
PRETO, DOURADO E SILÊNCIO.
Preto não é "uma cor". É um sistema de camadas. O dourado é cirúrgico — aparece apenas onde há intenção.
Regra de proporção: 90% preto — base, fundo, superfícies. 7% branco/cinza — texto e ícones. 3% dourado — acentos cirúrgicos únicos.
Camadas de Preto — 90% de toda composição
Absolute#000000--black-absolute
Rich#0a0a0a--black-rich · body bg
Surface#111111--black-surface · seções
Elevated#161616--black-elevated
Card#1c1c1c--black-card
Border#222222--border
Dourado — 3% de cada composição. Nunca mais.
Dimmerrgba(200,164,78,.06)--gold-dimmer
Dimrgba(200,164,78,.12)--gold-dim
Gold ★#c8a44e--gold · O acento
Gold Light#e0c06a--gold-light
Gold Bright#f0d878--gold-bright
Neutros — texto e hierarquia
White#f0ece4--white · texto principal
Gray 100#e0dcd4subtítulos
Gray 200#b0b0b0corpo de texto
Gray 300#8a8a8atexto muted
Gray 400#666666disabled
Gray 500#444444metadados
Status — apenas em UI. Nunca em posts visuais.
Success#4ec86a--status-success
Warning#e8a838--status-warning
Error#c83232--status-error
Info#4e8cc8--status-info
Tokens CSS
src/styles/tokens.css — variáveis de cor
/* CAMADAS DE PRETO */ --black-absolute: #000000; --black-rich: #0a0a0a; --black-surface: #111111; --black-elevated: #161616; --black-card: #1c1c1c; --border: #222222; --border-subtle: #1a1a1a; /* DOURADO */ --gold: #c8a44e; --gold-light: #e0c06a; --gold-dim: rgba(200, 164, 78, 0.12); --gold-dimmer: rgba(200, 164, 78, 0.06); /* NEUTROS */ --white: #f0ece4; --gray-200: #b0b0b0; --gray-300: #8a8a8a; --gray-400: #666666; --gray-500: #444444;