Colors

O Gremorie herda as paletas do Tailwind v4 e estende com cinco rampas sintetizadas: quatro neutros extras (mauve, mist, olive, taupe) e uma rampa de marca (clay, ancorada no #D97757 do Claude). Juntas formam 27 rampas e 298 stops, todos declarados em OKLCH em packages/tokens/styles/theme.css.

Cada stop é espaçado intencionalmente em claridade (perceptualmente uniforme no espaço OKLCH), então slate-200 e blue-200 se comportam da mesma forma quando usados como surface, mesmo sendo hues completamente diferentes.

Todas as rampas de uma vez

Cada rampa, do mais claro ao mais escuro. Clique numa linha para pular para a tabela completa.

Como ler a escala

Os stops vão de 50 (mais claro) a 950 (mais escuro); a rampa gray adiciona um stop 0 (branco puro) para superfícies elevadas no modo claro. Não existe regra rígida de uso, mas os padrões são fortes:

Esses valores são estáveis: só mudam quando o primitivo é editado em theme.css, e quando isso acontece a mudança cascateia para todos os temas que o referenciam.

Como consumir

Três formas equivalentes:

// 1. Utilitário Tailwind (gerado automaticamente do bloco @theme)
<div className="bg-blue-600" />

// 2. CSS variable, para APIs que recebem cor como string (SVG, Recharts)
<div style={{ background: 'var(--color-blue-600)' }} />

/* 3. Referenciando a rampa num arquivo de tema (o único lugar onde isso é normal) */
[data-theme='claude'] {
  --primary: var(--color-clay-500);
}

Dentro de um componente que respeita o tema, a quase totalidade dos casos deve consumir um token semântico (bg-primary, text-foreground) em vez de um primitivo. Primitivos são para superfícies de marketing, ilustração e para alimentar a camada semântica. Veja quando você toca primitivos.

Neutros

Nove rampas neutras cobrem o espectro do cinza puro até variações com viés de temperatura: slate frio, stone quente, mauve violeta-rosado. Use-as para chrome, surfaces, texto e backgrounds. Cinco são padrão Tailwind; quatro são sintetizadas pelo Gremorie (mauve, mist, olive, taupe), criadas para que os temas mapeiem para primitivos consistentes em vez de OKLCH literal.

Marca

A única rampa que existe por causa de uma marca, não de uma família de hue. clay-500 é a cor de marca do Claude, exatamente, e os outros dez stops derivam dela com claridade suave e chroma que atinge o pico no meio da rampa.

Espectro quente

Vermelhos, laranjas, âmbares, amarelos, limas e verdes. A amplitude vai do crítico (red, para destrutivo) ao orgânico (green, lime). amber é uma das melhores cores para warning sem cair no clichê do amarelo puro.

Espectro frio

Verdes-azulados (emerald, teal), ciano, os azuis e a transição para o violeta. É a faixa mais "produto digital" da paleta, onde moram os defaults para links, primary actions e charts categóricos. emerald é o tom usual de sucesso; sky é o tom usual de info.

Acentos

Magentas, rosas e rosa-vermelhos para produtos que pedem mais personalidade. rose combina particularmente bem com stone e taupe.

Boas práticas

• Não use stops 50 a 200 para texto sobre branco: contraste insuficiente. Use-os como surfaces.
• O stop 400 é traiçoeiro: bom como divisor visual entre primário e secundário, perigoso para texto crítico (o ratio varia muito entre rampas).
• Dark mode espelha, não inverte: 950 vira o background e 50 o foreground. Não troque os tons do meio na lógica; escolha primitivos diferentes no tema.
• Cinco rampas são específicas do Gremorie (mauve, mist, olive, taupe, clay). Se você exportar o sistema para fora, documente que elas não são padrão Tailwind.