P2 · Padrões

Color Palettes

Sistema de herança de cor via data-palette. Adicionar o atributo a um elemento pai faz todos os descendentes que consomem --bg, --fg, --border, --accent se adaptarem.

Paletas disponíveis

Paleta	Fundo	Texto	Uso
paper (padrão)	`#FFFFFF`	Tinta	Superfícies primárias.
snow	`--n-snow`	Tinta	Fundo do app.
bone	`--n-bone`	Tinta	Painéis sutis.
ink	`--n-ink`	Branco	Hero escuro, footer, cards de impacto.
void	`--n-void`	Branco	Hover sobre ink.
accent	`--accent-base`	Branco	CTAs editoriais, capas de drop.

Composição aninhada

Paletas se aninham. Uma seção data-palette='ink' pode conter um card data-palette='paper' sem afetar o pai.

<section data-palette="ink">
  <h2>Sobre branco em fundo escuro</h2>
  <div class="card" data-palette="paper">
    <p>Conteúdo claro dentro de hero escuro.</p>
  </div>
</section>

Tokens sobrescritos

Cada paleta sobrescreve seis tokens-base. Componentes que consomem esses tokens adaptam-se sem código adicional.

Token	Função
`--bg`	Fundo da superfície.
`--fg`	Texto primário.
`--fg-2`	Texto secundário.
`--fg-3`	Texto terciário.
`--border`	Borda hairline.
`--accent`	Cor de assinatura local.

Diretrizes

Faça

Componentes consomem tokens, nunca cores literais.
Toda cor de texto deve respeitar contraste AA (4.5:1).
Aninhe paletas para criar acentos visuais sem CSS extra.

Não faça

Não fixe color: white ou #1A1A1D direto em componente reutilizável.
Não invente paletas locais — fique nas seis canônicas.
Não anime transição entre paletas — quebra de leitura.