Build the ramps, neutrals, semantic colours and roles on one lightness grid

Context and Problem Statement

The signatures are decided (ADR-0013) and the parent’s deep tone with them (ADR-0014). A site needs more than one colour per brand: tints for panels and lines, shades for hover and active states, greys for text and structure, four semantic colours, and a dark mode. The 0.2 draft generated ramps with the hue held constant down the whole ramp (warm hues went muddy), chroma scaled off each signature (teal dull, red clipped) and an accent step that differed by brand, contradicting its own “same step, same contrast” claim. How are the ramps built so that every brand behaves the same?

Decision Drivers

Criteria 2 (coherent, expandable), 4 (accessibility), 9 (generated and tested).

Decision Outcome

Everything below is data in brand/colour.yaml and code in brand/src/palette.ts, brand/src/ramps.ts and brand/src/tokens.ts. Ratified by Demian on 2026-10-04 after the signatures moved to step 500.

• One lightness grid for every ramp, eleven steps: 50 0.975 · 100 0.945 · 200 0.89 · 300 0.81 · 400 0.72 · 500 0.635 · 600 0.55 · 700 0.495 · 800 0.44 · 900 0.36 · 950 0.28. Step 500 is the signature, 600 the text colour (ADR-0013) and 800 the parent’s deep tone (ADR-0014), so every decided tone is a step and AKRIBIS 800 is exactly the parent colour.

• Chroma along a ramp is the signature’s chroma times a tint curve (0.14 at step 50 up to 1.0 at 500 and 600, down to 0.60 at 950), held inside sRGB by reducing chroma.

• Hue drift only in the tints: as lightness rises above the signature, the hue moves toward the nearer perceptual attractor (yellow at 100° or blue at 260°), 20° per unit of lightness, at most 8.5° at step 50. Shades keep the signature’s hue.

• Neutrals are the same grid at chroma 0.008 on the AKRIBIS hue (0.6 of that at the ends), plus 0 (white, the page) and 1000 (the ink, #0c0d0f). Cool greys that never look dirty next to a saturated accent; the page is white because product photography is shot on white.

• Semantic ramps from the same machine: success 145°, warning 72°, danger 20°, info 250°. Semantic text uses step 700; fills with white text use step 700. Never without an icon and a label.

• Roles, the names a site styles with, in light and dark:

  Role	Light	Dark
  page / surface / band	neutral 0 / 0 / 50	neutral 1000 / 950 / 950
  line / line-strong	neutral 200 / 300	neutral 800 / 700
  text / text-body / text-muted	neutral 1000 / 800 / 700	neutral 50 / 200 / 400
  signature	brand 500	brand 400
  accent / accent-text	brand 600 / 700	brand 400 / 300
  accent-hover / accent-active	brand 700 / 800	brand 300 / 200
  accent-soft / accent-subtle / accent-line	brand 50 / 100 / 300	brand 950 / 900 / 700
  secondary	brand 200	brand 800
  on-accent	neutral 0	neutral 1000

  signature is the mark and large graphics (≥ 3:1 on the page); accent is the same hue as text and controls (≥ 4.5:1); accent-text is for text on a tinted surface, one step further down. AKRIBIS One has no ramp: its brand roles resolve to neutrals (accent = ink). The parent brand (akribis-group) uses the AKRIBIS ramp with the deep tone as signature and accent (800; hover 900, active 950; in dark 300, 200, 100), per ADR-0014.

  Note, 2026-10-04. ADR-0016 proposes that AKRIBIS One use the AKRIBIS ramp too, with the teal ink (950) as signature and the deep tone (800) as accent; its roles then stop resolving to neutrals.

• Proof in the build. Fifteen pairings per brand and mode (nine units, AKRIBIS One and the parent) plus three per semantic ramp, 342 in all, each with a WCAG 2 minimum; one failure fails the build. APCA is reported alongside. The report is published at /tokens/contrast.json and shown on the Colour page.

• Files. /tokens/base.css (neutrals, semantic, signatures), /tokens/<brand>.css (the nine units, akribis-group, akribis-one) (ramp and roles, light and dark via prefers-color-scheme and data-theme), /tokens/all.css (every brand under [data-brand]), /tokens.json (DTCG).

Consequences

• Good, because a component written once against the roles renders correctly on all ten sites and in both modes, and the build proves it.
• Good, because a new unit’s ramp, roles and contrast proof follow from its hue slot.
• Open: the data-visualisation palette; print (CMYK, Pantone) and Office values; whether the tint curve and the drift rate need tuning once seen on real pages.