Colours
Components use only the semantic tokens. Each one aliases a primitive per theme; the arrow shows the alias. Swatches are drawn with the CSS variables dta build writes, so what you see is the built output.
Rules from the system: every text pair reaches 7:1 in both themes (fg-* on bg-*, action-fg on action-bg, action-text and signal-text on the canvas and their tints, the terminal’s four colours on terminal-bg); a test in the repository checks them. Text on signal-bg is always signal-fg (dark), never white, and that pair is the one exception at 4.5:1: the redline label. signal is never used for errors. ink-600, graphite-400 and paper-500 are decorative and not for text.
The status-* group holds the status colours: status-{success,warning,error}-text for words (7:1 on bg-canvas, bg-surface, bg-subtle and its own subtle), -marker for marker shapes and banner outlines (3:1 on the same, not for text: sage-600, ochre-600 and crimson-600 in Light), -subtle for tints. Their primitives are sage, ochre and crimson. terminal-success stays the terminal’s own token: the terminal is dark in both themes.
The well-* group draws the landing page’s gravity well: well-line is the mesh at the surface, well-throat what it darkens to toward the mouth, well-mouth the ground at the bottom (the other theme’s paper) with a well-glow rim; the well-object-* triples are the lit, top and shaded faces of the cubes and spheres in orbit, well-highlight their specular point, well-dust the motes.
Semantic
Section titled “Semantic”| Token | Light | Graphite | Use |
|---|---|---|---|
bg-canvas--bg-canvas | #f5f1e8→ paper.100 | #161513→ graphite.900 | Page background. |
bg-surface--bg-surface | #ffffff→ paper.0 | #1f1e1b→ graphite.850 | Cards, panels, inputs. |
bg-subtle--bg-subtle | #eae4d6→ paper.200 | #272522→ graphite.800 | Wells, segmented controls, grid-paper areas. |
bg-grid--bg-grid | #f1ece0→ paper.150 | #22201d→ graphite.825 | Grid paper lines (16px pitch) on bg-subtle or bg-surface. Decoration only. |
border-default--border-default | #e2dccd→ paper.300 | #34312c→ graphite.700 | 1px hairlines around surfaces. |
border-strong--border-strong | #13213f→ ink.900 | #eae4d6→ paper.200 | 2px ink outlines on interactive elements and rules. |
fg-default--fg-default | #13213f→ ink.900 | #f2ede2→ graphite.100 | Body text and headings on bg-canvas and bg-surface. |
fg-muted--fg-muted | #3a465e→ ink.700 | #c2baa8→ graphite.300 | Secondary text on bg-canvas and bg-surface. |
fg-subtle--fg-subtle | #44506c→ ink.650 | #b0a898→ graphite.350 | Captions, meta, mono labels on bg-canvas and bg-surface (7:1). |
action-bg--action-bg | #2443ac→ blueprint.700 | #a9b8e6→ blueprint.300 | Primary buttons, links, active workflow station (its text and itself on the canvas at 7:1 or more). |
action-fg--action-fg | #ffffff→ paper.0 | #161513→ graphite.900 | Text on action-bg. |
action-subtle--action-subtle | #e3eafb→ blueprint.100 | #1e2a4d→ blueprint.950 | Info chips, selection, focus ring fill. |
action-text--action-text | #1e3a9e→ blueprint.800 | #c6d3f7→ blueprint.200 | Text on action-subtle. |
signal-bg--signal-bg | #e8632a→ redline.500 | #f58b58→ redline.400 | Redlines, redline labels, diffs, the moving packet. Never for errors. |
signal-fg--signal-fg | #0f0e0d→ graphite.950 | #0f0e0d→ graphite.950 | Text on signal-bg (redline labels). |
signal-subtle--signal-subtle | #ffe4d2→ redline.100 | #3f2414→ redline.950 | Changed-state chips, diff highlight fills. |
signal-text--signal-text | #7a3210→ redline.900 | #ffcfb2→ redline.200 | Text on signal-subtle and on bg-canvas (7:1). |
status-success-text--status-success-text | #27512f→ sage.700 | #9ad3a2→ sage.300 | Success words and counts ("passed", "0 findings"): 7:1 on bg-canvas, bg-surface, bg-subtle and status-success-subtle. |
status-success-marker--status-success-marker | #3c7646→ sage.600 | #7fb887→ sage.400 | The success marker (a dot) and the outline of a success banner: 3:1 on the four grounds. Not for text. |
status-success-subtle--status-success-subtle | #e1eee2→ sage.100 | #1c2a1e→ sage.950 | Ground of success chips and banners; text on it is status-success-text. |
status-warning-text--status-warning-text | #5e3f00→ ochre.700 | #f2d08a→ ochre.300 | Warning words and counts ("2 warnings", "passed with warnings"): 7:1 on bg-canvas, bg-surface, bg-subtle and status-warning-subtle. |
status-warning-marker--status-warning-marker | #7d5a00→ ochre.600 | #f0c64a→ ochre.400 | The warning marker (an open ring) and the outline of a warning banner: 3:1 on the four grounds. Not for text. |
status-warning-subtle--status-warning-subtle | #faecc8→ ochre.100 | #3a2d10→ ochre.950 | Ground of warning chips and banners; text on it is status-warning-text. |
status-error-text--status-error-text | #8c151c→ crimson.700 | #ffb3ad→ crimson.300 | Error words and counts ("failed", "3 errors"): 7:1 on bg-canvas, bg-surface, bg-subtle and status-error-subtle. Never signal for errors. |
status-error-marker--status-error-marker | #c42b30→ crimson.600 | #f0736b→ crimson.400 | The error marker (a filled square) and the outline of an error banner: 3:1 on the four grounds. Not for text. |
status-error-subtle--status-error-subtle | #fde4e1→ crimson.100 | #3d1b19→ crimson.950 | Ground of error chips and banners; text on it is status-error-text. |
rail--rail | #a9b8e6→ blueprint.300 | #4a4740→ graphite.600 | Dashed workflow rail lines. Decoration only. |
terminal-bg--terminal-bg | #13213f→ ink.900 | #0f0e0d→ graphite.950 | Terminal and command button background. |
terminal-fg--terminal-fg | #f5f1e8→ paper.100 | #f2ede2→ graphite.100 | Text on terminal-bg. |
terminal-prompt--terminal-prompt | #ffb38a→ redline.300 | #f58b58→ redline.400 | The $ prompt glyph on terminal-bg. |
terminal-success--terminal-success | #9ad3a2→ sage.300 | #9ad3a2→ sage.300 | Passed lines and found values on terminal-bg. |
terminal-muted--terminal-muted | #c9c1ae→ paper.400 | #c2baa8→ graphite.300 | Secondary lines on terminal-bg (dim output). |
well-line--well-line | #13213f→ ink.900 | #f2ede2→ graphite.100 | The mesh of the gravity well, at the surface. |
well-throat--well-throat | #070b16→ ink.950 | #0f0e0d→ graphite.950 | What the mesh darkens to toward the mouth of the well. |
well-mouth--well-mouth | #161513→ graphite.900 | #f5f1e8→ paper.100 | The ground at the bottom of the well: the other theme's paper. |
well-glow--well-glow | #7590e6→ blueprint.400 | #2f55d4→ blueprint.600 | The rim of the mouth. |
well-object-orange--well-object-orange | #e8632a→ redline.500 | #e8632a→ redline.500 | Orange objects in the well: the lit face. |
well-object-orange-light--well-object-orange-light | #f58b58→ redline.400 | #f58b58→ redline.400 | Orange objects: the top face and sphere highlight base. |
well-object-orange-dark--well-object-orange-dark | #b84d08→ redline.600 | #b84d08→ redline.600 | Orange objects: the shaded face. |
well-object-blue--well-object-blue | #2f55d4→ blueprint.600 | #2f55d4→ blueprint.600 | Blue objects: the lit face. |
well-object-blue-light--well-object-blue-light | #7590e6→ blueprint.400 | #7590e6→ blueprint.400 | Blue objects: the top face. |
well-object-blue-dark--well-object-blue-dark | #1e3a9e→ blueprint.800 | #1e3a9e→ blueprint.800 | Blue objects: the shaded face. |
well-object-ink--well-object-ink | #13213f→ ink.900 | #f2ede2→ graphite.100 | Ink objects: the lit face. |
well-object-ink-light--well-object-ink-light | #3a465e→ ink.700 | #ffffff→ paper.0 | Ink objects: the top face. |
well-object-ink-dark--well-object-ink-dark | #13213f→ ink.900 | #c2baa8→ graphite.300 | Ink objects: the shaded face. |
well-highlight--well-highlight | #ffffff→ paper.0 | #ffffff→ paper.0 | Specular highlight on the spheres. |
well-dust--well-dust | #5a6480→ ink.600 | #8f8878→ graphite.400 | Dust motes between the orbit rings. |
Primitives
Section titled “Primitives”paper
paper-0#ffffffpaper-50#fbf9f4paper-100#f5f1e8paper-150#f1ece0paper-200#eae4d6paper-300#e2dccdpaper-400#c9c1aepaper-500#9a9381
ink
ink-600#5a6480ink-650#44506cink-700#3a465eink-800#22304fink-900#13213fink-950#070b16
graphite
graphite-100#f2ede2graphite-300#c2baa8graphite-350#b0a898graphite-400#8f8878graphite-600#4a4740graphite-700#34312cgraphite-800#272522graphite-825#22201dgraphite-850#1f1e1bgraphite-900#161513graphite-950#0f0e0d
blueprint
blueprint-50#f1f4feblueprint-100#e3eafbblueprint-200#c6d3f7blueprint-300#a9b8e6blueprint-400#7590e6blueprint-500#4c6fddblueprint-600#2f55d4blueprint-700#2443acblueprint-800#1e3a9eblueprint-950#1e2a4d
redline
redline-100#ffe4d2redline-200#ffcfb2redline-300#ffb38aredline-400#f58b58redline-500#e8632aredline-600#b84d08redline-800#8e3b12redline-900#7a3210redline-950#3f2414
sage
sage-100#e1eee2sage-300#9ad3a2sage-400#7fb887sage-600#3c7646sage-700#27512fsage-950#1c2a1e
crimson
crimson-100#fde4e1crimson-300#ffb3adcrimson-400#f0736bcrimson-600#c42b30crimson-700#8c151ccrimson-950#3d1b19
ochre
ochre-100#faecc8ochre-300#f2d08aochre-400#f0c64aochre-600#7d5a00ochre-700#5e3f00ochre-950#3a2d10