Colors
The intent-to-value mapping for the six Gremorie themes, in light and dark mode.
Semantic tokens are intents: primary, foreground,
border. Each theme fills those intents with different values,
and each mode (light / dark) brings its own mapping. This page is
the truth table for the six bundled themes: Default, Claude,
ChatGPT, Gemini, Perplexity and Mistral.
How to read the tables
- The Light and Dark columns render the exact declared value as a chip over that theme's own light or dark background, so both are faithful no matter which mode you are reading in.
- The Value columns show what the theme declares: a primitive
name (consumed via
var(--color-<token>)) or, where the theme matches a product surface that has no primitive equivalent, a literal OKLCH value. - A
basebadge means the theme does not override that token; it inherits the value from the base layer intheme.css. That inheritance is the shipped behavior, not an omission.
If you are auditing a component that looks "wrong" in some theme,
start here. Comparing the intent (e.g. --primary) with the value
it resolves to in each theme tells you whether the inconsistency
comes from the component chrome or from the theme mapping.
Default
The base semantic layer itself, on the neutralized gray ramp. Conservative and brand-free; every other theme is an override layer on top of it.
--radius-base: 0.625rem · selector :root
| Light | Dark | Token | Value (light) | Value (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 | ||
| --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 | oklch(0.646 0.222 41.116)base | oklch(0.488 0.243 264.376)base | ||
| --chart-2 | oklch(0.6 0.118 184.704)base | oklch(0.696 0.17 162.48)base | ||
| --chart-3 | oklch(0.398 0.07 227.392)base | oklch(0.769 0.188 70.08)base | ||
| --chart-4 | oklch(0.828 0.189 84.429)base | oklch(0.627 0.265 303.9)base | ||
| --chart-5 | oklch(0.769 0.188 70.08)base | oklch(0.645 0.246 16.439)base | ||
| --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
Warm clay (coral terracotta) on cream surfaces, taupe support, serif display. Dark mode sits on the warm charcoal of the real product.
--radius-base: 0.5rem · selector [data-theme='claude']
| Light | Dark | Token | Value (light) | Value (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 | ||
| --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 | clay-500 | clay-400 | ||
| --chart-2 | clay-300 | clay-200 | ||
| --chart-3 | clay-700 | clay-600 | ||
| --chart-4 | taupe-400 | taupe-400 | ||
| --chart-5 | amber-400 | amber-400 | ||
| --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
Emerald accent on a flat, low-shadow surface. Dark mode uses the flat graphite of the real product; surfaces otherwise inherit the neutral base.
--radius-base: 0.75rem · selector [data-theme='chatgpt']
| Light | Dark | Token | Value (light) | Value (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 | ||
| --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 | emerald-500 | emerald-400 | ||
| --chart-2 | emerald-300 | emerald-200 | ||
| --chart-3 | teal-600 | teal-400 | ||
| --chart-4 | green-400 | green-400 | ||
| --chart-5 | cyan-400 | cyan-400 | ||
| --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
Google blue with a blue-to-purple chart ramp and the roundest radius of the set. Dark mode sits on the cool graphite of the real product.
--radius-base: 1rem · selector [data-theme='gemini']
| Light | Dark | Token | Value (light) | Value (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 | ||
| --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 | oklch(0.63 0.18 260) | oklch(0.75 0.11 258) | ||
| --chart-2 | oklch(0.78 0.11 258) | oklch(0.85 0.07 255) | ||
| --chart-3 | oklch(0.629 0.136 304) | oklch(0.72 0.12 304) | ||
| --chart-4 | oklch(0.78 0.09 304) | oklch(0.84 0.06 300) | ||
| --chart-5 | oklch(0.53 0.2 276) | oklch(0.68 0.14 276) | ||
| --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
True turquoise on offblack, sober and tight, with the smallest radius of the set. The light primary is the brand turquoise #20808D.
--radius-base: 0.375rem · selector [data-theme='perplexity']
| Light | Dark | Token | Value (light) | Value (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 | ||
| --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 | teal-600 | teal-400 | ||
| --chart-2 | teal-300 | teal-200 | ||
| --chart-3 | cyan-600 | cyan-400 | ||
| --chart-4 | sky-400 | sky-400 | ||
| --chart-5 | emerald-400 | emerald-400 | ||
| --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
Flame orange with a black-on-orange primary, matching Mistral brand usage. Surfaces inherit the neutral base in both modes.
--radius-base: 0.5rem · selector [data-theme='mistral']
| Light | Dark | Token | Value (light) | Value (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 | ||
| --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 | orange-500 | orange-400 | ||
| --chart-2 | orange-300 | orange-200 | ||
| --chart-3 | orange-700 | orange-600 | ||
| --chart-4 | amber-400 | amber-400 | ||
| --chart-5 | red-400 | red-400 | ||
| --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 |
About the sidebar tokens
The --sidebar-* tokens are a parallel family covering the
side navigation chrome. They exist because sidebars are surfaces
often painted differently from background (darker, lighter,
contrasting). Keeping dedicated intents avoids the "tinted
background" trick that breaks when the theme changes.
About the chart tokens
--chart-1 through --chart-5 are the categorical series colors
consumed by the chart components. Every theme redefines the full
set in both modes: the dark block must re-declare every series
because the themed light block outranks the base .dark selector,
so a missing dark override would leak the light value into dark
mode.
Editing or adding themes
Themes are override layers on top of the base semantic layer
in packages/tokens/styles/theme.css. The short recipe:
-
Create a new file at
packages/tokens/styles/themes/<id>.css. -
Define the two selectors:
:root[data-theme='<id>'] { /* light overrides */ } :root[data-theme='<id>'].dark { /* dark overrides */ } -
Override only what differs from the base. An accent theme like Mistral touches a dozen tokens; a full-surface theme like Claude remaps almost everything. Whatever the light block declares, the dark block must re-declare (see the chart note above), because
:root[data-theme]outranks.dark. -
Import the file at the top of
packages/tokens/styles/theme.css. -
Audit by running the theme in the workbench and checking contrast: primary/primary-foreground pairs must clear WCAG AA for text (4.5:1) and chart series must clear 3:1 on the theme background.
Reach for primitives first. Reference the ramps via
var(--color-<token>) so a primitive edit cascades into every theme. The
shipped themes hardcode OKLCH only where they match a product surface that
has no primitive equivalent (e.g. the Claude cream background or the Gemini
graphite). If your value is reusable, add it as a primitive instead.