Preview# The explorer groups every public colour token by its system role. The shared anchor index moves between groups, and the shared filter row narrows the visible collection without reloading the page. Each swatch opens a native dialog with generated implementation and contrast evidence. Wrap the shortcode in theme-preview when readers need to compare the scoped light and dark collections.
Use dark theme Colour
Role
Inspect
Interface roles 8
Primary text
color.ink
× Token details
Primary text Primary text colour for high-contrast interface and brand copy.
Layer Semantic
Token color.ink
CSS variable --color-ink
Copy
Source declaration {color.palette.near-black}
Light value #101010
Copy
Dark value #f8f8f5
Copy
Approved foreground color.paperWCAG 2.2 contrast evidence Light
17.88:1
WCAG AA normal text
Dark
17.88:1
WCAG AA normal text
Reading surface
color.paper
× Token details
Reading surface Default page background colour.
Layer Semantic
Token color.paper
CSS variable --color-paper
Copy
Source declaration {color.palette.warm-paper}
Light value #f8f8f5
Copy
Dark value #101010
Copy
Approved foreground color.inkWCAG 2.2 contrast evidence Light
17.88:1
WCAG AA normal text
Dark
17.88:1
WCAG AA normal text
Quiet divider
color.line
× Token details
Quiet divider Quiet divider and border colour.
Layer Semantic
Token color.line
CSS variable --color-line
Copy
Source declaration {color.palette.quiet-line}
Light value #d7d7d2
Copy
Dark value oklch(37.1% 0 none)
Copy
Approved foreground color.inkWCAG 2.2 contrast evidence Light
13.17:1
WCAG AA normal text
Dark
9.76:1
WCAG AA normal text
Accent
color.accent
× Primary accent colour for emphasis, active states, and brand signals.
Layer Semantic
Token color.accent
CSS variable --color-accent
Copy
Source declaration {color.palette.signal-orange}
Light value #e6461a
Copy
Dark value #e6461a
Copy
Approved foreground color.palette.near-blackWCAG 2.2 contrast evidence Light
4.76:1
WCAG AA normal text
Dark
4.76:1
WCAG AA normal text
Accent text
color.accent-text
× Theme-aware accent colour for normal-sized text on the page surface.
Layer Semantic
Token color.accent-text
CSS variable --color-accent-text
Copy
Source declaration {color.palette.deep-signal-orange}
Light value #c43810
Copy
Dark value #e6461a
Copy
Approved foreground color.paperWCAG 2.2 contrast evidence Light
5.03:1
WCAG AA normal text
Dark
4.76:1
WCAG AA normal text
On accent
color.on-accent
× Accessible foreground colour for text and icons on the accent background.
Layer Semantic
Token color.on-accent
CSS variable --color-on-accent
Copy
Source declaration {color.palette.near-black}
Light value #101010
Copy
Dark value #101010
Copy
Approved foreground color.accentWCAG 2.2 contrast evidence Light
4.76:1
WCAG AA normal text
Dark
4.76:1
WCAG AA normal text
White
color.white
× White used for inverse text and elevated surfaces.
Layer Semantic
Token color.white
CSS variable --color-white
Copy
Source declaration {color.palette.white}
Light value #ffffff
Copy
Dark value #ffffff
Copy
Approved foreground color.palette.near-blackWCAG 2.2 contrast evidence Light
19.03:1
WCAG AA normal text
Dark
19.03:1
WCAG AA normal text
Black
color.black
× Black used for overlays and high-contrast code controls.
Layer Semantic
Token color.black
CSS variable --color-black
Copy
Source declaration {color.palette.black}
Light value #000000
Copy
Dark value #000000
Copy
Approved foreground color.palette.warm-paperWCAG 2.2 contrast evidence Light
19.74:1
WCAG AA normal text
Dark
19.74:1
WCAG AA normal text
Neutral scale 8
color.neutral.50
color.neutral.50
× Token details
color.neutral.50 Lightest neutral surface.
Layer Semantic
Token color.neutral.50
CSS variable --color-neutral-50
Copy
Source declaration {color.palette.neutral.50}
Light value oklch(98.5% 0 none)
Copy
Dark value oklch(26.9% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.neutral.100
color.neutral.100
× Token details
color.neutral.100 Light neutral surface.
Layer Semantic
Token color.neutral.100
CSS variable --color-neutral-100
Copy
Source declaration {color.palette.neutral.100}
Light value oklch(97% 0 none)
Copy
Dark value oklch(37.1% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.neutral.300
color.neutral.300
× Token details
color.neutral.300 Quiet neutral marker and divider tone.
Layer Semantic
Token color.neutral.300
CSS variable --color-neutral-300
Copy
Source declaration {color.palette.neutral.300}
Light value oklch(87% 0 none)
Copy
Dark value oklch(43.9% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.neutral.400
color.neutral.400
× Token details
color.neutral.400 Secondary neutral text tone.
Layer Semantic
Token color.neutral.400
CSS variable --color-neutral-400
Copy
Source declaration {color.palette.neutral.400}
Light value oklch(70.8% 0 none)
Copy
Dark value oklch(55.6% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.neutral.500
color.neutral.500
× Token details
color.neutral.500 Muted neutral text tone.
Layer Semantic
Token color.neutral.500
CSS variable --color-neutral-500
Copy
Source declaration {color.palette.neutral.500}
Light value oklch(55.6% 0 none)
Copy
Dark value oklch(70.8% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.neutral.600
color.neutral.600
× Token details
color.neutral.600 Supporting neutral text tone.
Layer Semantic
Token color.neutral.600
CSS variable --color-neutral-600
Copy
Source declaration {color.palette.neutral.600}
Light value oklch(43.9% 0 none)
Copy
Dark value oklch(87% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.neutral.700
color.neutral.700
× Token details
color.neutral.700 Strong neutral text and border tone.
Layer Semantic
Token color.neutral.700
CSS variable --color-neutral-700
Copy
Source declaration {color.palette.neutral.700}
Light value oklch(37.1% 0 none)
Copy
Dark value oklch(97% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.neutral.800
color.neutral.800
× Token details
color.neutral.800 Dark neutral surface.
Layer Semantic
Token color.neutral.800
CSS variable --color-neutral-800
Copy
Source declaration {color.palette.neutral.800}
Light value oklch(26.9% 0 none)
Copy
Dark value oklch(98.5% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
Status colours 6
status.note
status.note
× Informational status accent for notes and neutral change notices.
Layer Semantic
Token status.note
CSS variable --status-note
Copy
Source declaration oklch(62.3% 0.214 259.815)
Light value oklch(62.3% 0.214 259.815)
Copy
Dark value oklch(62.3% 0.214 259.815)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
status.success
status.success
× Token details
status.success Positive status accent for confirmed or newly available items.
Layer Semantic
Token status.success
CSS variable --status-success
Copy
Source declaration oklch(72.3% 0.219 149.579)
Light value oklch(72.3% 0.219 149.579)
Copy
Dark value oklch(72.3% 0.219 149.579)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
status.important
status.important
× Token details
status.important Important status accent for decisions requiring attention.
Layer Semantic
Token status.important
CSS variable --status-important
Copy
Source declaration oklch(62.7% 0.265 303.9)
Light value oklch(62.7% 0.265 303.9)
Copy
Dark value oklch(62.7% 0.265 303.9)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
status.warning
status.warning
× Token details
status.warning Warning status accent for cautionary changes or constraints.
Layer Semantic
Token status.warning
CSS variable --status-warning
Copy
Source declaration oklch(76.9% 0.188 70.08)
Light value oklch(76.9% 0.188 70.08)
Copy
Dark value oklch(76.9% 0.188 70.08)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
status.danger
status.danger
× Token details
status.danger Critical status accent for cautions, errors, and deprecations.
Layer Semantic
Token status.danger
CSS variable --status-danger
Copy
Source declaration oklch(63.7% 0.237 25.331)
Light value oklch(63.7% 0.237 25.331)
Copy
Dark value oklch(63.7% 0.237 25.331)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
status.archived
status.archived
× Token details
status.archived Muted status accent for archived material.
Layer Semantic
Token status.archived
CSS variable --status-archived
Copy
Source declaration {color.neutral.500}
Light value oklch(55.6% 0 none)
Copy
Dark value oklch(55.6% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
Code colours 6
color.code.background
color.code.background
× Token details
color.code.background Background colour for technical code surfaces.
Layer Semantic
Token color.code.background
CSS variable --color-code-background
Copy
Source declaration #272822
Light value #272822
Copy
Dark value #272822
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.code.foreground
color.code.foreground
× Token details
color.code.foreground Foreground colour for technical code surfaces.
Layer Semantic
Token color.code.foreground
CSS variable --color-code-foreground
Copy
Source declaration #f8f8f2
Light value #f8f8f2
Copy
Dark value #f8f8f2
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.code.copy.success.foreground
color.code.copy.success.foreground
× Token details
color.code.copy.success.foreground Copy-control confirmation text colour.
Layer Semantic
Token color.code.copy.success.foreground
CSS variable --color-code-copy-success-foreground
Copy
Source declaration oklch(87.1% 0.15 154.449)
Light value oklch(87.1% 0.15 154.449)
Copy
Dark value oklch(87.1% 0.15 154.449)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.code.copy.success.border
color.code.copy.success.border
× Token details
color.code.copy.success.border Copy-control confirmation border colour.
Layer Semantic
Token color.code.copy.success.border
CSS variable --color-code-copy-success-border
Copy
Source declaration oklch(79.2% 0.209 151.711)
Light value oklch(79.2% 0.209 151.711)
Copy
Dark value oklch(79.2% 0.209 151.711)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.code.copy.error.foreground
color.code.copy.error.foreground
× Token details
color.code.copy.error.foreground Copy-control error text colour.
Layer Semantic
Token color.code.copy.error.foreground
CSS variable --color-code-copy-error-foreground
Copy
Source declaration oklch(80.8% 0.114 19.571)
Light value oklch(80.8% 0.114 19.571)
Copy
Dark value oklch(80.8% 0.114 19.571)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
color.code.copy.error.border
color.code.copy.error.border
× Token details
color.code.copy.error.border Copy-control error border colour.
Layer Semantic
Token color.code.copy.error.border
CSS variable --color-code-copy-error-border
Copy
Source declaration oklch(70.4% 0.191 22.216)
Light value oklch(70.4% 0.191 22.216)
Copy
Dark value oklch(70.4% 0.191 22.216)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
Component aliases 11
component.announcement.background
component.announcement.background
× Token details
component.announcement.background Background surface for the site-wide announcement banner.
Layer Component
Token component.announcement.background
CSS variable --component-announcement-background
Copy
Source declaration {color.paper}
Light value #f8f8f5
Copy
Dark value #f8f8f5
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.announcement.foreground
component.announcement.foreground
× Token details
component.announcement.foreground Text colour for the site-wide announcement banner.
Layer Component
Token component.announcement.foreground
CSS variable --component-announcement-foreground
Copy
Source declaration {color.ink}
Light value #101010
Copy
Dark value #101010
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.announcement.border
component.announcement.border
× Token details
component.announcement.border Signal border colour for the site-wide announcement banner.
Layer Component
Token component.announcement.border
CSS variable --component-announcement-border
Copy
Source declaration {color.accent}
Light value #e6461a
Copy
Dark value #e6461a
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.announcement.link
component.announcement.link
× Token details
component.announcement.link Accessible link colour for the site-wide announcement banner.
Layer Component
Token component.announcement.link
CSS variable --component-announcement-link
Copy
Source declaration {color.accent-text}
Light value #c43810
Copy
Dark value #c43810
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.avatar.background
component.avatar.background
× Token details
component.avatar.background Fallback avatar surface for a recommendation attribution.
Layer Component
Token component.avatar.background
CSS variable --component-avatar-background
Copy
Source declaration {color.neutral.100}
Light value oklch(97% 0 none)
Copy
Dark value oklch(97% 0 none)
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.avatar.foreground
component.avatar.foreground
× Token details
component.avatar.foreground Fallback avatar initials colour for a recommendation attribution.
Layer Component
Token component.avatar.foreground
CSS variable --component-avatar-foreground
Copy
Source declaration {color.ink}
Light value #101010
Copy
Dark value #101010
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.avatar.border
component.avatar.border
× Token details
component.avatar.border Avatar boundary colour for a recommendation attribution.
Layer Component
Token component.avatar.border
CSS variable --component-avatar-border
Copy
Source declaration {color.line}
Light value #d7d7d2
Copy
Dark value #d7d7d2
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.back-to-top.background
component.back-to-top.background
× Token details
component.back-to-top.background Surface behind the back-to-top link.
Layer Component
Token component.back-to-top.background
CSS variable --component-back-to-top-background
Copy
Source declaration {color.paper}
Light value #f8f8f5
Copy
Dark value #f8f8f5
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.back-to-top.foreground
component.back-to-top.foreground
× Token details
component.back-to-top.foreground Text and arrow colour for the back-to-top link.
Layer Component
Token component.back-to-top.foreground
CSS variable --component-back-to-top-foreground
Copy
Source declaration {color.ink}
Light value #101010
Copy
Dark value #101010
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.back-to-top.border
component.back-to-top.border
× Token details
component.back-to-top.border Resting border of the back-to-top link.
Layer Component
Token component.back-to-top.border
CSS variable --component-back-to-top-border
Copy
Source declaration {color.line}
Light value #d7d7d2
Copy
Dark value #d7d7d2
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
component.back-to-top.hover-border
component.back-to-top.hover-border
× Token details
component.back-to-top.hover-border Hover and focus border of the back-to-top link.
Layer Component
Token component.back-to-top.hover-border
CSS variable --component-back-to-top-hover-border
Copy
Source declaration {color.accent}
Light value #e6461a
Copy
Dark value #e6461a
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
Diagram outputs 5
diagram.canvas
diagram.canvas
× Token details
diagram.canvas Canvas background for diagrams across supported authoring tools.
Layer Component
Token diagram.canvas
CSS variable --diagram-canvas
Copy
Source declaration {color.paper}
Light value #f8f8f5
Copy
Dark value #f8f8f5
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
diagram.node
diagram.node
× Token details
diagram.node Default diagram node surface.
Layer Component
Token diagram.node
CSS variable --diagram-node
Copy
Source declaration {color.paper}
Light value #f8f8f5
Copy
Dark value #f8f8f5
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
diagram.node-ink
diagram.node-ink
× Token details
diagram.node-ink Default diagram node label colour.
Layer Component
Token diagram.node-ink
CSS variable --diagram-node-ink
Copy
Source declaration {color.ink}
Light value #101010
Copy
Dark value #101010
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
diagram.node-line
diagram.node-line
× Token details
diagram.node-line Default diagram node border and connector colour.
Layer Component
Token diagram.node-line
CSS variable --diagram-node-line
Copy
Source declaration {color.line}
Light value #d7d7d2
Copy
Dark value #d7d7d2
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
diagram.accent
diagram.accent
× Token details
diagram.accent Diagram emphasis and active-flow colour.
Layer Component
Token diagram.accent
CSS variable --diagram-accent
Copy
Source declaration {color.accent}
Light value #e6461a
Copy
Dark value #e6461a
Copy
Approved foreground Not declared This token has no declared foreground pairing, so the explorer does not claim a text-contrast result.
Boundary# The shortcode reads generated token data and does not accept arbitrary colour values. Add or change a governed token in tokens/core.tokens.json or a theme collection, regenerate the outputs, and let the explorer follow the source.
Example {{< colour-system >}}When to use A filterable explorer for public colour tokens, theme values, aliases, and declared WCAG evidence.
Implementation layouts/shortcodes/colour-system.htmlOptions Option Read by the shortcode template colourSystemInstanceRead by the shortcode template
Interface manifest
Kind Shortcode
Category Data
Status Implemented
Implementation Partial: layouts/partials/data-page/anchor-index.htmllayouts/partials/data-page/filter-row.htmlShortcode: layouts/shortcodes/colour-system.htmlData: data/brand/tokens.ymlCSS: assets/css/generated/themes.cssassets/css/site.cssJavaScript: assets/js/site.js