Colour
Set all text in color-charcoal, never pure black. Links are color-link; color-cyan-electric is an accent and never text. Each usage note names the grounds a colour may sit on and its contrast ratio.
note
color-lavender with white text and color-turquoise with white text pass only at 24px and above. For the current nav item at any size, use color-lavender-deep.
Interface
| Swatch | Token | Value | Usage |
|---|---|---|---|
--color-paper | #f6f2f1 | Warm off-white page and article ground (docs main column, desktop canvas). Long-form ground for color-charcoal text (9.9:1). | |
--color-paper-pink | #f5cdcf | Docs left rail, corporate wallpaper field. Grounds color-charcoal (7.6:1) and color-ink-muted (4.9:1). | |
--color-paper-cream | #fffde6 | System identity cards, right-rail TOC panel, utility panels. Grounds color-charcoal (10.7:1) and color-link (6.1:1). | |
--color-mint | #e4f7e3 | Nav tile and top-tab faces, gentle affirmative surfaces. Text on it: color-charcoal (9.8:1). Never white text. | |
--color-mint-deep | #96dacb | Monitor/headset accent, stronger mint graphic fills. Decorative; no text on it smaller than 24px. | |
--color-mint-edge | #448844 | 1px outline on mint tiles and tabs (Keywork --nirrius-green-dark). 3.9:1 on color-mint: meets the 3:1 control-border floor; not for body text. | |
--color-lavender | #8a8bc6 | Decorative selection, large (24px+) active nav label with white underlined text (3.2:1, large-text only). | |
--color-lavender-deep | #6667a8 | Active/current nav tile fill at any size; white text on it 5.2:1. Intentional addition: color-lavender fails 4.5:1 with white below 24px. | |
--color-cyan-electric | #00a5f5 | Energized accents: search, selection glints, hard offset shadow on primary buttons. NOT a text colour (2.5:1 on paper); for link text use color-link. | |
--color-link | #006699 | Inline link and code-reference text on paper, cream and mint (5.6–6.1:1); fill of primary/search buttons under white text (6.3:1). From Keywork --nirrius-blue-darker. | |
--color-turquoise | #008c99 | Saturated cool brand field: editorial page surround. White text only at 24px+ (4.0:1). | |
--color-cyan-mist | #aad7dc | Translucent editorial hero panel and image wash. Grounds color-charcoal (7.1:1). | |
--color-charcoal | #373d40 | All ink: headlines, body, structural rules. Never pure black. On every paper/mint/cream/pink surface (7.6–10.7:1). | |
--color-ink-muted | #55595f | Secondary text, captions, metadata on paper, cream and paper-pink (4.9–6.4:1). Intentional addition: color-frame-gray is 3.9:1 and fails as text. | |
--color-desktop-chrome | #b9cfcd | Retro window frame and titlebar material. color-charcoal titles on it (6.8:1). | |
--color-chrome-bar | #f4ffff | Window titlebar and control faces, unfocused (Nirrius desktop). | |
--color-chrome-bar-active | #eaffff | Focused window titlebar; scrollbar thumb. Charcoal titles on it 10.4:1. | |
--color-chrome-edge | #bdc8c8 | 3px window frame and window-control outlines (Nirrius desktop). Decorative edge; the glyph carries the meaning. | |
--color-chrome-ink | #4c5d66 | Window-control glyphs on color-chrome-bar (6.7:1). | |
--color-frame-gray | #777a80 | Utility panel edges, secondary borders, TOC frame (3.9:1 on paper: border use only, not text). | |
--color-pink-shadow | #f6a6ac | Hard offset shadow behind nav tiles and docs-rail controls. Decorative only; never a text or border colour. | |
--color-pink-rule | #ffaaaa | Docs rail right-edge rule (5px) — Keywork --nirrius-red-base. Decorative. | |
--color-code-bg | #272823 | Code block backdrop. Grounds syntax-plain (13.9:1) and the syntax accents. | |
--color-code-frame | #005580 | 3px frame around code blocks (Keywork --nirrius-blue-darkest). | |
--color-focus | #194db5 | Focus ring: 2px solid outline, 2px offset, so it lands on the page ground (6.8:1 on paper, 5.2:1 on paper-pink), never on a lavender fill. | |
--color-white | #ffffff | Text on color-lavender-deep, color-link and figure-cobalt fills; window body ground. |
Status
Callouts pair a tinted ground with a printed label word.
| Swatch | Token | Value | Usage |
|---|---|---|---|
--color-note-bg | → color-mint | Note callout ground. Text color-charcoal. Label word NOTE carries the meaning, not the tint. | |
--color-note-edge | → color-mint-edge | Note callout 1px border. | |
--color-warning-bg | #fbefc9 | Warning callout ground (intentional addition, tinted from figure-yellow). Text color-charcoal 9.6:1, label color-warning-ink. | |
--color-warning-ink | #6b5212 | Warning label word and 1px border on color-warning-bg (6.4:1). | |
--color-danger-bg | #fde3e6 | Danger callout ground (intentional addition, tinted from figure-coral). Text color-charcoal. | |
--color-danger-ink | #9b1c31 | Danger label word and 1px border on color-danger-bg (6.7:1). |
Code
| Swatch | Token | Value | Usage |
|---|---|---|---|
--syntax-plain | #f8f8f2 | Default code text on color-code-bg (okaidia foreground). | |
--syntax-cyan | #66d9ef | Keywords, interfaces (okaidia / Keywork --color-interface). 9.0:1 on code-bg. | |
--syntax-yellow | #e6db74 | Strings, types, enums (okaidia / Keywork --color-type). 10.4:1. | |
--syntax-green | #a6e22e | Functions, attribute names (okaidia). 9.6:1. | |
--syntax-pink | #f92672 | HTML tags, operators (okaidia). 3.9:1 on code-bg: misses 4.5:1 — kept exact from the source theme; use only for single-token accents, never for whole lines. | |
--syntax-comment | #9ea7b0 | Comments on code-bg (6.1:1). Chosen for contrast; okaidia's slate grey is too dim. |
Figures
The 3D illustrations' palette. Use for illustration and decorative blocks only, not UI text — except figure-cobalt, which can fill a focal element under white text.
| Swatch | Token | Value | Usage |
|---|---|---|---|
--figure-cobalt | #194db5 | Hero mannequin plastic; the one saturated blue for focal moments in illustration-adjacent UI. White text on it 7.6:1. | |
--figure-sky | #589bd0 | Powder-blue doll faces, cool highlights. Illustration only. | |
--figure-coral | #f06472 | Coral molded plastic and hair. Illustration and decorative blocks only. | |
--figure-pink | #df48a0 | Candy-pink molded components. Illustration and decorative blocks only. | |
--figure-yellow | #e8bd52 | Workstations, warm figures. Illustration and decorative blocks only. | |
--figure-mint | → color-mint-deep | Monitors and headset inserts (same as color-mint-deep). | |
--figure-lilac | #d5a1ca | Headset rims, supporting accents. | |
--figure-gray | #87858d | Metallic-gray headset arches. | |
--figure-green | #168b70 | Occasional emerald figure. | |
--figure-violet | #7546c6 | Occasional purple figure. |
Editorial
| Swatch | Token | Value | Usage |
|---|---|---|---|
--editorial-teal | → color-turquoise | Editorial outside field (full-bleed). | |
--editorial-aqua | → color-cyan-mist | Giant rounded cyan overlay panel; charcoal type on it 7.1:1. | |
--editorial-pale | #d7e9e7 | Hazy atmospheric base under the photo wash; charcoal 8.8:1. | |
--editorial-ink | → color-charcoal | Monumental titles and metadata in editorial mode. | |
--editorial-balloon-pink | #e8a1a9 | Photo accent; decorative only. | |
--editorial-balloon-gold | #e7c47d | Photo accent; decorative only. | |
--editorial-balloon-green | #8abdb1 | Photo accent; decorative only. |