Colors
Mapeamento intenção → valor para os sete temas Gremorie, em light e dark mode.
Tokens semânticos são intenções: primary, foreground,
border. Cada tema preenche essas intenções com valores
diferentes, e cada modo (light / dark) traz seu próprio
mapeamento. Esta página é a tabela de verdade para os sete
temas embarcados: Default, Claude, ChatGPT, Gemini, Perplexity,
Mistral e Purple.
Como ler as tabelas
- As colunas Light e Dark renderizam o valor exato declarado como um chip sobre o próprio background light ou dark do tema, então as duas são fiéis independente do modo em que você está lendo.
- As colunas Valor mostram o que o tema declara: um nome de
primitivo (um alias na fonte DTCG, escrito no CSS como
var(--color-<token>)) ou, onde o tema espelha uma superfície de produto sem primitivo equivalente, um valor OKLCH literal. - O badge
baseindica que o tema não sobrescreve aquele token; ele herda o valor da camada base (semantic/light.jsonesemantic/dark.json). Essa herança é o comportamento que embarca, não uma omissão.
Se você está auditando um componente que parece "errado" em algum
tema, comece por aqui. Comparar a intenção (e.g. --primary) com
o valor resolvido em cada tema diz se a inconsistência é da chrome
do componente ou do mapeamento do tema.
Default
A propria camada semantica base, sobre a rampa gray neutralizada. Conservador e sem marca; todos os outros temas sao camadas de override por cima dele.
--radius-base: 0.625rem · selector :root
| Light | Dark | Token | Valor (light) | Valor (dark) |
|---|---|---|---|---|
| --background | gray-50base | gray-950base | ||
| --foreground | gray-950base | gray-50base | ||
| --card | gray-0base | gray-900base | ||
| --card-foreground | gray-950base | gray-50base | ||
| --popover | gray-0base | gray-900base | ||
| --popover-foreground | gray-950base | gray-50base | ||
| --primary | gray-900base | gray-100base | ||
| --primary-foreground | gray-50base | gray-900base | ||
| --secondary | gray-100base | gray-800base | ||
| --secondary-foreground | gray-900base | gray-50base | ||
| --muted | gray-100base | gray-800base | ||
| --muted-foreground | gray-500base | gray-400base | ||
| --accent | gray-100base | gray-800base | ||
| --accent-foreground | gray-900base | gray-50base | ||
| --destructive | red-600base | red-400base | ||
| --destructive-foreground | gray-50base | gray-50base | ||
| --warning | amber-500base | amber-400base | ||
| --warning-foreground | gray-950base | gray-950base | ||
| --success | green-700base | green-400base | ||
| --success-foreground | gray-50base | gray-950base | ||
| --border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --input | gray-200base | oklch(1 0 0 / 15%)base | ||
| --ring | gray-400base | gray-500base | ||
| --chart-1 | blue-500base | blue-600base | ||
| --chart-2 | amber-500base | amber-600base | ||
| --chart-3 | green-500base | green-600base | ||
| --chart-4 | cyan-500base | cyan-600base | ||
| --chart-5 | pink-500base | pink-600base | ||
| --sidebar | gray-50base | gray-900base | ||
| --sidebar-foreground | gray-950base | gray-50base | ||
| --sidebar-primary | gray-900base | gray-100base | ||
| --sidebar-primary-foreground | gray-50base | gray-900base | ||
| --sidebar-accent | gray-100base | gray-800base | ||
| --sidebar-accent-foreground | gray-900base | gray-50base | ||
| --sidebar-border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --sidebar-ring | gray-400base | gray-500base |
Claude
Clay quente (terracota coral) sobre superficies creme, apoio em taupe, display serifado. O dark mode usa o carvao quente do produto real.
--radius-base: 0.5rem · selector [data-theme='claude']
| Light | Dark | Token | Valor (light) | Valor (dark) |
|---|---|---|---|---|
| --background | oklch(0.965 0.011 92) | oklch(0.235 0.006 100) | ||
| --foreground | gray-950 | gray-50 | ||
| --card | oklch(0.985 0.008 92) | oklch(0.268 0.005 100) | ||
| --card-foreground | gray-950 | gray-50 | ||
| --popover | oklch(0.985 0.008 92) | oklch(0.268 0.005 100) | ||
| --popover-foreground | gray-950 | gray-50 | ||
| --primary | clay-500 | clay-400 | ||
| --primary-foreground | gray-50 | gray-950 | ||
| --secondary | oklch(0.95 0.012 80) | oklch(0.28 0.012 58) | ||
| --secondary-foreground | clay-900 | gray-50 | ||
| --muted | oklch(0.95 0.012 80) | oklch(0.28 0.012 58) | ||
| --muted-foreground | taupe-600 | taupe-300 | ||
| --accent | clay-100 | clay-900 | ||
| --accent-foreground | clay-900 | clay-50 | ||
| --destructive | red-600base | red-400base | ||
| --destructive-foreground | gray-50base | gray-50base | ||
| --warning | amber-500base | amber-400base | ||
| --warning-foreground | gray-950base | gray-950base | ||
| --success | green-700base | green-400base | ||
| --success-foreground | gray-50base | gray-950base | ||
| --border | oklch(0.9 0.014 78) | oklch(1 0 0 / 10%) | ||
| --input | oklch(0.9 0.014 78) | oklch(1 0 0 / 15%) | ||
| --ring | clay-500 | clay-400 | ||
| --chart-1 | blue-500base | blue-600base | ||
| --chart-2 | amber-500base | amber-600base | ||
| --chart-3 | green-500base | green-600base | ||
| --chart-4 | cyan-500base | cyan-600base | ||
| --chart-5 | pink-500base | pink-600base | ||
| --sidebar | oklch(0.97 0.01 84) | oklch(0.24 0.012 60) | ||
| --sidebar-foreground | gray-950 | gray-50 | ||
| --sidebar-primary | clay-600 | clay-400 | ||
| --sidebar-primary-foreground | gray-50 | gray-950 | ||
| --sidebar-accent | clay-100 | oklch(0.28 0.012 58) | ||
| --sidebar-accent-foreground | clay-900 | gray-50 | ||
| --sidebar-border | oklch(0.9 0.014 78) | oklch(1 0 0 / 10%) | ||
| --sidebar-ring | clay-500 | clay-400 |
ChatGPT
Acento emerald sobre superficie flat de sombras suaves. O dark mode usa o grafite flat do produto real; as demais superficies herdam a base neutra.
--radius-base: 0.75rem · selector [data-theme='chatgpt']
| Light | Dark | Token | Valor (light) | Valor (dark) |
|---|---|---|---|---|
| --background | gray-50base | oklch(0.248 0 0) | ||
| --foreground | gray-950base | gray-50base | ||
| --card | gray-0base | oklch(0.278 0 0) | ||
| --card-foreground | gray-950base | gray-50base | ||
| --popover | gray-0base | oklch(0.278 0 0) | ||
| --popover-foreground | gray-950base | gray-50base | ||
| --primary | emerald-700 | emerald-400 | ||
| --primary-foreground | gray-50 | gray-950 | ||
| --secondary | gray-100base | gray-800base | ||
| --secondary-foreground | gray-900base | gray-50base | ||
| --muted | gray-100base | gray-800base | ||
| --muted-foreground | gray-500base | gray-400base | ||
| --accent | emerald-100 | emerald-900 | ||
| --accent-foreground | emerald-900 | emerald-50 | ||
| --destructive | red-600base | red-400base | ||
| --destructive-foreground | gray-50base | gray-50base | ||
| --warning | amber-500base | amber-400base | ||
| --warning-foreground | gray-950base | gray-950base | ||
| --success | green-700base | green-400base | ||
| --success-foreground | gray-50base | gray-950base | ||
| --border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --input | gray-200base | oklch(1 0 0 / 15%)base | ||
| --ring | emerald-500 | emerald-400 | ||
| --chart-1 | blue-500base | blue-600base | ||
| --chart-2 | amber-500base | amber-600base | ||
| --chart-3 | green-500base | green-600base | ||
| --chart-4 | cyan-500base | cyan-600base | ||
| --chart-5 | pink-500base | pink-600base | ||
| --sidebar | gray-50base | gray-900base | ||
| --sidebar-foreground | gray-950base | gray-50base | ||
| --sidebar-primary | emerald-700 | emerald-400 | ||
| --sidebar-primary-foreground | gray-50 | gray-950 | ||
| --sidebar-accent | gray-100base | gray-800base | ||
| --sidebar-accent-foreground | gray-900base | gray-50base | ||
| --sidebar-border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --sidebar-ring | emerald-500 | emerald-400 |
Gemini
Azul Google com rampa de marca azul-para-roxo e o radius mais arredondado do conjunto. O dark mode usa o grafite frio do produto real.
--radius-base: 1rem · selector [data-theme='gemini']
| Light | Dark | Token | Valor (light) | Valor (dark) |
|---|---|---|---|---|
| --background | gray-50base | oklch(0.239 0.002 248) | ||
| --foreground | gray-950base | gray-50base | ||
| --card | gray-0base | oklch(0.274 0.002 248) | ||
| --card-foreground | gray-950base | gray-50base | ||
| --popover | gray-0base | oklch(0.274 0.002 248) | ||
| --popover-foreground | gray-950base | gray-50base | ||
| --primary | oklch(0.55 0.19 258) | oklch(0.75 0.11 258) | ||
| --primary-foreground | gray-50 | gray-950 | ||
| --secondary | gray-100base | gray-800base | ||
| --secondary-foreground | gray-900base | gray-50base | ||
| --muted | gray-100base | gray-800base | ||
| --muted-foreground | gray-500base | gray-400base | ||
| --accent | indigo-100 | indigo-900 | ||
| --accent-foreground | indigo-900 | indigo-50 | ||
| --destructive | red-600base | red-400base | ||
| --destructive-foreground | gray-50base | gray-50base | ||
| --warning | amber-500base | amber-400base | ||
| --warning-foreground | gray-950base | gray-950base | ||
| --success | green-700base | green-400base | ||
| --success-foreground | gray-50base | gray-950base | ||
| --border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --input | gray-200base | oklch(1 0 0 / 15%)base | ||
| --ring | oklch(0.63 0.18 260) | oklch(0.75 0.11 258) | ||
| --chart-1 | blue-500base | blue-600base | ||
| --chart-2 | amber-500base | amber-600base | ||
| --chart-3 | green-500base | green-600base | ||
| --chart-4 | cyan-500base | cyan-600base | ||
| --chart-5 | pink-500base | pink-600base | ||
| --sidebar | gray-50base | gray-900base | ||
| --sidebar-foreground | gray-950base | gray-50base | ||
| --sidebar-primary | oklch(0.55 0.19 258) | oklch(0.75 0.11 258) | ||
| --sidebar-primary-foreground | gray-50 | gray-950 | ||
| --sidebar-accent | gray-100base | gray-800base | ||
| --sidebar-accent-foreground | gray-900base | gray-50base | ||
| --sidebar-border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --sidebar-ring | oklch(0.63 0.18 260) | oklch(0.75 0.11 258) |
Perplexity
Turquesa verdadeiro sobre offblack, sobrio e compacto, com o menor radius do conjunto. O primary claro e o turquesa de marca #20808D.
--radius-base: 0.375rem · selector [data-theme='perplexity']
| Light | Dark | Token | Valor (light) | Valor (dark) |
|---|---|---|---|---|
| --background | gray-50base | oklch(0.192 0.02 195.6) | ||
| --foreground | gray-950base | gray-50base | ||
| --card | gray-0base | oklch(0.225 0.018 196) | ||
| --card-foreground | gray-950base | gray-50base | ||
| --popover | gray-0base | oklch(0.225 0.018 196) | ||
| --popover-foreground | gray-950base | gray-50base | ||
| --primary | oklch(0.553 0.086 208.5) | oklch(0.72 0.11 205) | ||
| --primary-foreground | gray-0 | gray-950 | ||
| --secondary | gray-100base | gray-800base | ||
| --secondary-foreground | gray-900base | gray-50base | ||
| --muted | gray-100base | gray-800base | ||
| --muted-foreground | gray-500base | gray-400base | ||
| --accent | teal-100 | teal-900 | ||
| --accent-foreground | teal-900 | teal-50 | ||
| --destructive | red-600base | red-400base | ||
| --destructive-foreground | gray-50base | gray-50base | ||
| --warning | amber-500base | amber-400base | ||
| --warning-foreground | gray-950base | gray-950base | ||
| --success | green-700base | green-400base | ||
| --success-foreground | gray-50base | gray-950base | ||
| --border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --input | gray-200base | oklch(1 0 0 / 15%)base | ||
| --ring | oklch(0.553 0.086 208.5) | oklch(0.72 0.11 205) | ||
| --chart-1 | blue-500base | blue-600base | ||
| --chart-2 | amber-500base | amber-600base | ||
| --chart-3 | green-500base | green-600base | ||
| --chart-4 | cyan-500base | cyan-600base | ||
| --chart-5 | pink-500base | pink-600base | ||
| --sidebar | gray-50base | gray-900base | ||
| --sidebar-foreground | gray-950base | gray-50base | ||
| --sidebar-primary | oklch(0.553 0.086 208.5) | oklch(0.72 0.11 205) | ||
| --sidebar-primary-foreground | gray-0 | gray-950 | ||
| --sidebar-accent | gray-100base | gray-800base | ||
| --sidebar-accent-foreground | gray-900base | gray-50base | ||
| --sidebar-border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --sidebar-ring | oklch(0.553 0.086 208.5) | oklch(0.72 0.11 205) |
Mistral
Laranja flame com primary preto-sobre-laranja, espelhando o uso de marca da Mistral. As superficies herdam a base neutra nos dois modos.
--radius-base: 0.5rem · selector [data-theme='mistral']
| Light | Dark | Token | Valor (light) | Valor (dark) |
|---|---|---|---|---|
| --background | gray-50base | gray-950base | ||
| --foreground | gray-950base | gray-50base | ||
| --card | gray-0base | gray-900base | ||
| --card-foreground | gray-950base | gray-50base | ||
| --popover | gray-0base | gray-900base | ||
| --popover-foreground | gray-950base | gray-50base | ||
| --primary | orange-600 | orange-400 | ||
| --primary-foreground | gray-950 | gray-950 | ||
| --secondary | gray-100base | gray-800base | ||
| --secondary-foreground | gray-900base | gray-50base | ||
| --muted | gray-100base | gray-800base | ||
| --muted-foreground | gray-500base | gray-400base | ||
| --accent | orange-100 | orange-900 | ||
| --accent-foreground | orange-900 | orange-50 | ||
| --destructive | red-600base | red-400base | ||
| --destructive-foreground | gray-50base | gray-50base | ||
| --warning | amber-500base | amber-400base | ||
| --warning-foreground | gray-950base | gray-950base | ||
| --success | green-700base | green-400base | ||
| --success-foreground | gray-50base | gray-950base | ||
| --border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --input | gray-200base | oklch(1 0 0 / 15%)base | ||
| --ring | orange-500 | orange-400 | ||
| --chart-1 | blue-500base | blue-600base | ||
| --chart-2 | amber-500base | amber-600base | ||
| --chart-3 | green-500base | green-600base | ||
| --chart-4 | cyan-500base | cyan-600base | ||
| --chart-5 | pink-500base | pink-600base | ||
| --sidebar | gray-50base | gray-900base | ||
| --sidebar-foreground | gray-950base | gray-50base | ||
| --sidebar-primary | orange-600 | orange-400 | ||
| --sidebar-primary-foreground | gray-950 | gray-950 | ||
| --sidebar-accent | gray-100base | gray-800base | ||
| --sidebar-accent-foreground | gray-900base | gray-50base | ||
| --sidebar-border | gray-200base | oklch(1 0 0 / 10%)base | ||
| --sidebar-ring | orange-500 | orange-400 |
Purple
Violeta sobre superfícies lavanda, adaptado do preset Purple do Fumadocs (MIT). Dois pares foram corrigidos para WCAG AA: primary-foreground quase branco no light e destructive-foreground quase preto no dark.
--radius-base: 0.625rem · selector [data-theme='purple']
| Light | Dark | Token | Valor (light) | Valor (dark) |
|---|---|---|---|---|
| --background | oklch(0.9491 0.0278 298.05) | oklch(0.1605 0.013 297.13) | ||
| --foreground | oklch(0.3035 0.1296 288.37) | oklch(0.8926 0.0424 297.73) | ||
| --card | oklch(0.9142 0.0337 297.92) | oklch(0.1992 0.0236 296.44) | ||
| --card-foreground | oklch(0.2481 0.1513 278.88) | oklch(0.8926 0.0424 297.73) | ||
| --popover | oklch(0.9572 0.0166 298.26) | oklch(0.1592 0.015 296.89) | ||
| --popover-foreground | oklch(0.2481 0.1513 278.88) | oklch(0.8926 0.0424 297.73) | ||
| --primary | oklch(0.5379 0.2912 295.26) | oklch(0.8366 0.1046 307.06) | ||
| --primary-foreground | oklch(0.9764 0.0145 308.3) | oklch(0.1434 0.0399 294.09) | ||
| --secondary | oklch(0.8983 0.0444 307.91) | oklch(0.2979 0.0443 306.78) | ||
| --secondary-foreground | oklch(0.1783 0.0597 291.44) | oklch(0.8926 0.0424 297.73) | ||
| --muted | oklch(0.9357 0.0251 298.1) | oklch(0.1992 0.0236 296.44) | ||
| --muted-foreground | oklch(0.4838 0.1888 289.71) | oklch(0.7413 0.0922 296.32) | ||
| --accent | oklch(0.8876 0.0356 308.02) | oklch(0.3093 0.0463 295.83) | ||
| --accent-foreground | oklch(0.2757 0.1499 296.78) | oklch(0.8687 0.0418 307.93) | ||
| --destructive | red-600base | red-400base | ||
| --destructive-foreground | gray-50base | gray-950 | ||
| --warning | amber-500base | amber-400base | ||
| --warning-foreground | gray-950base | gray-950base | ||
| --success | green-700base | green-400base | ||
| --success-foreground | gray-50base | gray-950base | ||
| --border | oklch(0.8116 0.0606 307.63 / 0.5) | oklch(0.4403 0.1603 303.37 / 0.3) | ||
| --input | oklch(0.8116 0.0606 307.63 / 0.5) | oklch(0.4403 0.1603 303.37 / 0.3) | ||
| --ring | oklch(0.5379 0.2912 295.26) | oklch(0.8366 0.1046 307.06) | ||
| --chart-1 | blue-500base | blue-600base | ||
| --chart-2 | amber-500base | amber-600base | ||
| --chart-3 | green-500base | green-600base | ||
| --chart-4 | cyan-500base | cyan-600base | ||
| --chart-5 | pink-500base | pink-600base | ||
| --sidebar | oklch(0.9491 0.0278 298.05) | oklch(0.1605 0.013 297.13) | ||
| --sidebar-foreground | oklch(0.3035 0.1296 288.37) | oklch(0.8926 0.0424 297.73) | ||
| --sidebar-primary | oklch(0.5379 0.2912 295.26) | oklch(0.8366 0.1046 307.06) | ||
| --sidebar-primary-foreground | oklch(0.9764 0.0145 308.3) | oklch(0.1434 0.0399 294.09) | ||
| --sidebar-accent | oklch(0.8876 0.0356 308.02) | oklch(0.3093 0.0463 295.83) | ||
| --sidebar-accent-foreground | oklch(0.2757 0.1499 296.78) | oklch(0.8687 0.0418 307.93) | ||
| --sidebar-border | oklch(0.8116 0.0606 307.63 / 0.5) | oklch(0.4403 0.1603 303.37 / 0.3) | ||
| --sidebar-ring | oklch(0.5379 0.2912 295.26) | oklch(0.8366 0.1046 307.06) |
Sobre os tokens de sidebar
Os --sidebar-* são uma família paralela que cobre a chrome
de navegação lateral. Eles existem porque sidebars são surfaces
muitas vezes pintadas distintas do background (mais escuras,
mais claras, contrastantes). Manter intenções dedicadas evita o
truque de "background com tint" que se quebra ao mudar de tema.
Sobre os tokens de chart
--chart-1 a --chart-5 são aliases da escala categórica
(--chart-cat-1..5), que não é tematizável: todo tema mostra as
mesmas cores de série. Veja Tokens de chart.
Editando ou adicionando temas
Temas são camadas de override sobre a camada semântica base. A fonte é
JSON DTCG em packages/tokens/tokens/themes/<id>.json; o CSS em
packages/tokens/styles/ é gerado a partir dele. A receita curta:
- Crie
packages/tokens/tokens/themes/<id>.jsoncom os gruposlightedark, e acrescente<id>aTHEMESempackages/tokens/pipeline/model.ts. - Sobrescreva apenas o que difere da base, como tokens DTCG: um alias usa o
caminho do token (
{color.emerald.700}); um literal é um objeto de cor OKLCH. O que o grupo light declarar como cor literal, o grupo dark precisa declarar de novo, porque:root[data-theme]vence.dark. - Gere com
nx build tokens. O tema ganha o arquivo CSS, o@importnotheme.csse as saídas JSON, TypeScript, Kotlin e Swift. - Audite com
nx test tokens: o teste de contraste falha em qualquer par de texto abaixo de 4,5:1 e em qualquer anel de foco abaixo de 3:1, a menos que o par esteja emcontrast-deviations.jsoncom o motivo.
Prefira primitivos. Referencie as rampas por alias ({color.<rampa>.<passo>})
para que um ajuste de primitivo cascateie em todos os temas. Os temas embarcados
só hardcodam OKLCH onde espelham uma superfície de produto sem primitivo
equivalente (e.g. o creme do Claude ou o grafite do Gemini). Se o seu valor
é reutilizável, adicione-o como primitivo.
Visão geral
Tokens semânticos traduzem primitivos em intenção. É aqui que o Gremorie suporta múltiplos temas e modo escuro sem que componentes saibam disso.
Visão geral
Cinco esquemas canônicos para visualização de dados — cada um para uma forma específica de dado, validados em fundamentação acadêmica e prática de DS de produto.