Colour tokens

The 7 accents × 2 modes produced by the DTCG → Style Dictionary pipeline (ADR-0169).

Generated from build artefacts (pnpm docs:design-system). Do not edit by hand — run the generator.

The default accent is azure. Every accent exposes the same roles; the table below shows the default accent, the remaining accents follow in ACCENTS order.

azure

Role	Light	Dark
`background`	`#f0f5fc`	`#06070a`
`foreground`	`#171b20`	`#eaeff6`
`card`	`#fcfdff`	`#13161b`
`card-foreground`	`#171b20`	`#eaeff6`
`popover`	`#fcfdff`	`#13161b`
`popover-foreground`	`#171b20`	`#eaeff6`
`muted`	`#e8edf4`	`#1b1e23`
`muted-foreground`	`#52565b`	`#b3b8be`
`secondary`	`#e8edf4`	`#1b1e23`
`secondary-foreground`	`#171b20`	`#eaeff6`
`accent`	`#e0e5ec`	`#23272c`
`accent-foreground`	`#171b20`	`#eaeff6`
`border`	`#cdd1d8`	`#3c4046`
`input`	`#cdd1d8`	`#3c4046`
`ring`	`#036ce9`	`#6da6ed`
`primary`	`#036ce9`	`#6da6ed`
`primary-foreground`	`#fcfcfc`	`#090b0f`
`sidebar-background`	`#f0f5fc`	`#06070a`
`sidebar-foreground`	`#171b20`	`#eaeff6`
`sidebar-border`	`#cdd1d8`	`#3c4046`
`sidebar-accent`	`#e0e5ec`	`#23272c`
`sidebar-accent-foreground`	`#171b20`	`#eaeff6`
`sidebar-primary`	`#036ce9`	`#6da6ed`
`sidebar-primary-foreground`	`#fcfcfc`	`#090b0f`
`sidebar-ring`	`#036ce9`	`#6da6ed`

daylight

Role	Light	Dark
`background`	`#f7f4ef`	`#080706`
`foreground`	`#1c1a17`	`#f1eeea`
`card`	`#fffdfa`	`#181613`
`card-foreground`	`#1c1a17`	`#f1eeea`
`popover`	`#fffdfa`	`#181613`
`popover-foreground`	`#1c1a17`	`#f1eeea`
`muted`	`#efece8`	`#201e1b`
`muted-foreground`	`#575551`	`#b9b7b3`
`secondary`	`#efece8`	`#201e1b`
`secondary-foreground`	`#1c1a17`	`#f1eeea`
`accent`	`#e7e4e0`	`#282623`
`accent-foreground`	`#1c1a17`	`#f1eeea`
`border`	`#d3d1cc`	`#413f3c`
`input`	`#d3d1cc`	`#413f3c`
`ring`	`#c15000`	`#f09a4d`
`primary`	`#c15000`	`#f09a4d`
`primary-foreground`	`#fcfcfc`	`#0f0a08`
`sidebar-background`	`#f7f4ef`	`#080706`
`sidebar-foreground`	`#1c1a17`	`#f1eeea`
`sidebar-border`	`#d3d1cc`	`#413f3c`
`sidebar-accent`	`#e7e4e0`	`#282623`
`sidebar-accent-foreground`	`#1c1a17`	`#f1eeea`
`sidebar-primary`	`#c15000`	`#f09a4d`
`sidebar-primary-foreground`	`#fcfcfc`	`#0f0a08`
`sidebar-ring`	`#c15000`	`#f09a4d`

emerald

Role	Light	Dark
`background`	`#f1f6f3`	`#060807`
`foreground`	`#181b1a`	`#ebf0ed`
`card`	`#fbfffc`	`#141715`
`card-foreground`	`#181b1a`	`#ebf0ed`
`popover`	`#fbfffc`	`#141715`
`popover-foreground`	`#181b1a`	`#ebf0ed`
`muted`	`#e9eeeb`	`#1c1f1d`
`muted-foreground`	`#535654`	`#b4b8b6`
`secondary`	`#e9eeeb`	`#1c1f1d`
`secondary-foreground`	`#181b1a`	`#ebf0ed`
`accent`	`#e1e6e3`	`#242725`
`accent-foreground`	`#181b1a`	`#ebf0ed`
`border`	`#ced2d0`	`#3d413f`
`input`	`#ced2d0`	`#3d413f`
`ring`	`#138350`	`#4cb17d`
`primary`	`#138350`	`#4cb17d`
`primary-foreground`	`#fcfcfc`	`#080c09`
`sidebar-background`	`#f1f6f3`	`#060807`
`sidebar-foreground`	`#181b1a`	`#ebf0ed`
`sidebar-border`	`#ced2d0`	`#3d413f`
`sidebar-accent`	`#e1e6e3`	`#242725`
`sidebar-accent-foreground`	`#181b1a`	`#ebf0ed`
`sidebar-primary`	`#138350`	`#4cb17d`
`sidebar-primary-foreground`	`#fcfcfc`	`#080c09`
`sidebar-ring`	`#138350`	`#4cb17d`

violet

Role	Light	Dark
`background`	`#f4f3fd`	`#07070a`
`foreground`	`#1b1a20`	`#eeedf7`
`card`	`#fdfdff`	`#16151b`
`card-foreground`	`#1b1a20`	`#eeedf7`
`popover`	`#fdfdff`	`#16151b`
`popover-foreground`	`#1b1a20`	`#eeedf7`
`muted`	`#edebf5`	`#1e1d24`
`muted-foreground`	`#55545c`	`#b7b6bf`
`secondary`	`#edebf5`	`#1e1d24`
`secondary-foreground`	`#1b1a20`	`#eeedf7`
`accent`	`#e5e3ed`	`#27252c`
`accent-foreground`	`#1b1a20`	`#eeedf7`
`border`	`#d1d0d9`	`#403f46`
`input`	`#d1d0d9`	`#403f46`
`ring`	`#6b26d9`	`#7f53cf`
`primary`	`#6b26d9`	`#7f53cf`
`primary-foreground`	`#fcfcfc`	`#fcfcfc`
`sidebar-background`	`#f4f3fd`	`#07070a`
`sidebar-foreground`	`#1b1a20`	`#eeedf7`
`sidebar-border`	`#d1d0d9`	`#403f46`
`sidebar-accent`	`#e5e3ed`	`#27252c`
`sidebar-accent-foreground`	`#1b1a20`	`#eeedf7`
`sidebar-primary`	`#6b26d9`	`#7f53cf`
`sidebar-primary-foreground`	`#fcfcfc`	`#fcfcfc`
`sidebar-ring`	`#6b26d9`	`#7f53cf`

rose

Role	Light	Dark
`background`	`#faf2f4`	`#0a0607`
`foreground`	`#1f191a`	`#f4ecee`
`card`	`#fffdfd`	`#1a1416`
`card-foreground`	`#1f191a`	`#f4ecee`
`popover`	`#fffdfd`	`#1a1416`
`popover-foreground`	`#1f191a`	`#f4ecee`
`muted`	`#f3eaec`	`#221c1e`
`muted-foreground`	`#5a5355`	`#bdb5b7`
`secondary`	`#f3eaec`	`#221c1e`
`secondary-foreground`	`#1f191a`	`#f4ecee`
`accent`	`#eae2e4`	`#2b2526`
`accent-foreground`	`#1f191a`	`#f4ecee`
`border`	`#d7ced0`	`#443e3f`
`input`	`#d7ced0`	`#443e3f`
`ring`	`#e21d48`	`#da526a`
`primary`	`#e21d48`	`#da526a`
`primary-foreground`	`#fcfcfc`	`#0f090a`
`sidebar-background`	`#faf2f4`	`#0a0607`
`sidebar-foreground`	`#1f191a`	`#f4ecee`
`sidebar-border`	`#d7ced0`	`#443e3f`
`sidebar-accent`	`#eae2e4`	`#2b2526`
`sidebar-accent-foreground`	`#1f191a`	`#f4ecee`
`sidebar-primary`	`#e21d48`	`#da526a`
`sidebar-primary-foreground`	`#fcfcfc`	`#0f090a`
`sidebar-ring`	`#e21d48`	`#da526a`

gray

Role	Light	Dark
`background`	`#f4f4f4`	`#070707`
`foreground`	`#1b1b1b`	`#eeeeee`
`card`	`#fdfdfd`	`#161616`
`card-foreground`	`#1b1b1b`	`#eeeeee`
`popover`	`#fdfdfd`	`#161616`
`popover-foreground`	`#1b1b1b`	`#eeeeee`
`muted`	`#ededed`	`#1e1e1e`
`muted-foreground`	`#555555`	`#b7b7b7`
`secondary`	`#ededed`	`#1e1e1e`
`secondary-foreground`	`#1b1b1b`	`#eeeeee`
`accent`	`#e4e4e4`	`#262626`
`accent-foreground`	`#1b1b1b`	`#eeeeee`
`border`	`#d1d1d1`	`#404040`
`input`	`#d1d1d1`	`#404040`
`ring`	`#4d4d4d`	`#cccccc`
`primary`	`#4d4d4d`	`#cccccc`
`primary-foreground`	`#fcfcfc`	`#0f090b`
`sidebar-background`	`#f4f4f4`	`#070707`
`sidebar-foreground`	`#1b1b1b`	`#eeeeee`
`sidebar-border`	`#d1d1d1`	`#404040`
`sidebar-accent`	`#e4e4e4`	`#262626`
`sidebar-accent-foreground`	`#1b1b1b`	`#eeeeee`
`sidebar-primary`	`#4d4d4d`	`#cccccc`
`sidebar-primary-foreground`	`#fcfcfc`	`#0f090b`
`sidebar-ring`	`#4d4d4d`	`#cccccc`

black

Role	Light	Dark
`background`	`#ffffff`	`#000000`
`foreground`	`#1b1b1b`	`#eeeeee`
`card`	`#ffffff`	`#161616`
`card-foreground`	`#1b1b1b`	`#eeeeee`
`popover`	`#ffffff`	`#161616`
`popover-foreground`	`#1b1b1b`	`#eeeeee`
`muted`	`#ededed`	`#1e1e1e`
`muted-foreground`	`#555555`	`#b7b7b7`
`secondary`	`#ededed`	`#1e1e1e`
`secondary-foreground`	`#1b1b1b`	`#eeeeee`
`accent`	`#e4e4e4`	`#262626`
`accent-foreground`	`#1b1b1b`	`#eeeeee`
`border`	`#d1d1d1`	`#404040`
`input`	`#d1d1d1`	`#404040`
`ring`	`#000000`	`#ffffff`
`primary`	`#000000`	`#ffffff`
`primary-foreground`	`#fcfcfc`	`#0f090b`
`sidebar-background`	`#ffffff`	`#000000`
`sidebar-foreground`	`#1b1b1b`	`#eeeeee`
`sidebar-border`	`#d1d1d1`	`#404040`
`sidebar-accent`	`#e4e4e4`	`#262626`
`sidebar-accent-foreground`	`#1b1b1b`	`#eeeeee`
`sidebar-primary`	`#000000`	`#ffffff`
`sidebar-primary-foreground`	`#fcfcfc`	`#0f090b`
`sidebar-ring`	`#000000`	`#ffffff`

Accents

Accent	Light	Dark
`azure`	`#036ce9`	`#6da6ed`
`daylight`	`#c15000`	`#f09a4d`
`emerald`	`#138350`	`#4cb17d`
`violet`	`#6b26d9`	`#7f53cf`
`rose`	`#e21d48`	`#da526a`
`gray`	`#4d4d4d`	`#cccccc`
`black`	`#000000`	`#ffffff`

azureCopy Anchor Link

daylightCopy Anchor Link

emeraldCopy Anchor Link

violetCopy Anchor Link

roseCopy Anchor Link

grayCopy Anchor Link

blackCopy Anchor Link

AccentsCopy Anchor Link

On this page