/* ============================================================================= ABB:Ed — Module 2.4 Layer 2 — Design Tokens ============================================================================= Contract file. Companion to Barbara_Module2.4_Layer2_DesignTokenSystem_2026-05-18.md. Every named-token usage rule in the memo is greppable against this file per §6 (the token-rule reconciliation discipline). Nothing in this file extends the contract beyond what the memo names; nothing the memo names is absent from or contradicted by this file. Three-tier taxonomy with thirteen prefix families. Dash-segmented ---- throughout. See memo §1.2 for the tier-membership rules, the literal/semantic tiering statement, and the comparator-alignment rationale (Spectrum global/alias/component; Carbon primitives/components; GOV.UK deployment-shaped scoping). Tier 1 — Primitives (literal anchors). Six prefix families. --brand-* Layer 1 palette literals — chromatic anchors --structural-floor-* 21:1 forced-colors override pair (WCAG contract) --diag-* Diagnostic-foil family — QUARANTINED sub-tier; never deploy on audience-facing surfaces --gate-* Gate-signal family — QUARANTINED sub-tier; never deploy on audience-facing surfaces --radius-* Geometric corner radii --rule-weight-* Geometric rule weights Tier 2 — Scales (calibrated primitives). Two prefix families. --type-* Typography (major-third 1.25 ratio on 16px anchor) --space-* Spacing (1A-anchored cap-height multiplicative scale) Tier 3 — Semantics / Surface contract. Five prefix families. --color-* Semantic colour roles — point at --brand-* anchors --elev-* Three-tier elevation surface contract --state-* Interaction-state tints derived from --brand-accent --ui-* UI-component contracts — boundary, focus --measure-* Line-length compositional roles (typography-anchored) Voice-system constraints (lexicon, sentence-shapes, productive moves) are NOT absorbed into this contract — per kickoff §8 watchpoint 3. Voice lives at Module 2.3 and is referenced via cross-link only. Produced: Barbara Clarke, 2026-05-18 (v1.0) v1.1 (2026-05-18): §B comment count corrected (seven → ten steps); §C comment count corrected (eight → eleven multiplicative steps, plus --space-0 zero anchor, plus --space-A base unit); --space-1A aliased to --space-A to resolve the duplicate-value declaration cleanly while preserving --space-A as the canonical base anchor. See memo §10 v1.1 changelog for reasoning. v1.2 (2026-05-18): Convention restructured from flat seven-prefix taxonomy to three-tier taxonomy with twelve prefix families (six Tier 1 / two Tier 2 / four Tier 3) per Iris feeder review of Q2.1. Header comment above replaced to mirror memo §1.2 verbatim. No token name edits, no token value edits, no scale edits, no contract-body edits — header comment and convention prose only. See memo §10.5 v1.2 changelog for full reasoning and the reconciliation walk against v1.2 (clean). v1.3 (2026-05-19): One-line addition — --space-5A: 3.437rem; inserted in §C multiplicative spacing scale in ordinal position between --space-4A and --space-6A. Surfaced by Module 2.4 Layer 3 Session 1 (LinkedIn in-flow-informing template, eyebrow- to-title separation); Flag B mechanical fast-path per Layer 3 kickoff v0.2 §10 R1 (no Iris feeder — direct Barbara-Ted amendment). Linearity: 5 × 0.687rem = 3.435 ≈ 3.437rem; matches existing 4A/6A bracket at 3-decimal precision. No tier-boundary crossing; no prefix-family change. See memo §10.6 v1.3 changelog for full reasoning. v1.4 (2026-05-19): New Tier 3 prefix family --measure-* added with four tokens: --measure-display (20ch), --measure-prose (36ch), --measure-wide (50ch), --measure-body (60ch). Closed compositional-role family; not scale-derivable. Surfaced by Module 2.4 Layer 3 Sessions 1+2+3 with five distinct recurring values across the corpus (18/22/32/36/50ch); Iris feeder review collapsed to four compositional bands and added 60ch body-flow. Tier 3 prefix-family count moves from four to five; total prefix-family count moves from twelve to thirteen. Iris feeder cycle per Layer 3 kickoff §10 R1 Flag B structural-shape boundary. See memo §10.7 v1.4 changelog for full reasoning. ============================================================================= */ :root { /* =========================================================================== §A — LAYER 1 PALETTE TOKENS (LITERAL ANCHORS — UNCHANGED FROM LAYER 1 v1.1) =========================================================================== */ /* Foundation pair */ --brand-ink: #191B23; /* 18.4:1 on --brand-paper (AAA) */ --brand-paper: #FCFBF9; --brand-ink-muted: #3B3F47; /* 9.4:1 on --brand-paper (AAA) */ /* Accent */ --brand-accent: #2F5560; /* 8.1:1 on --brand-paper (AAA) */ /* Supporting */ --brand-paper-warm: #F5F2EC; /* panel fill — elevation tier 2 */ --brand-rule-soft: #D4D2D0; /* DECORATIVE-ONLY per Layer 1 §2.5.1 */ --brand-rule-firm: #494C53; /* 7.6:1 on --brand-paper (AAA) */ --brand-shell-bg: #23262E; /* system-context chrome — elevation tier 3 */ --brand-shell-rule: #4D515A; /* Structural-floor legacy pair (override surfaces only) */ --structural-floor-ink: #000000; --structural-floor-paper: #FFFFFF; /* Diagnostic-foil family — quarantined per Layer 1 §2.6 / Q1.7. Never deploy on audience-facing surfaces. */ --diag-caution: #8A1F1F; --diag-text: #1A1A1A; --diag-bg: #F4F4F4; --gate-pass: #0B5A24; --gate-pass-bg: #E6F2EA; --gate-fail: #8A1F1F; /* =========================================================================== §B — TYPOGRAPHY SCALE Anchored to Plex Bold cap-to-em metric 0.687 per Module 2.2 §6. Type family is the IBM Plex stack locked at Module 2.2. =========================================================================== */ /* Type families */ --type-family-sans: "IBM Plex Sans", "Plex Sans", system-ui, sans-serif; --type-family-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Weights (Module 2.2 lock — two weights only) */ --type-weight-regular: 400; --type-weight-bold: 700; /* Cap-to-em ratio (Module 2.2 §6) — load-bearing constant used by --space-* */ --type-cap-em-ratio: 0.687; /* Size scale — ten steps. Major-third (1.25) ratio anchored on 16px body. Step names use t-shirt sizing to keep semantic roles separable from sizes. Render values pre-computed for the canonical render context (16px = 1rem). */ --type-size-3xs: 0.640rem; /* 10.24px — micro meta, legal small print */ --type-size-2xs: 0.750rem; /* 12.00px — caption, meta, mono labels */ --type-size-xs: 0.875rem; /* 14.00px — secondary body, small UI text */ --type-size-sm: 1.000rem; /* 16.00px — body text (canonical anchor) */ --type-size-md: 1.250rem; /* 20.00px — lead, pull-quote body */ --type-size-lg: 1.563rem; /* 25.00px — section heading */ --type-size-xl: 1.953rem; /* 31.25px — subhead / panel title */ --type-size-2xl: 2.441rem; /* 39.06px — page heading */ --type-size-3xl: 3.052rem; /* 48.83px — display heading */ --type-size-hero: 5.000rem; /* 80.00px — hero wordmark / cover */ /* Line-heights — three values. Tight for display; comfortable for body; loose for legal-admin density relief. */ --type-leading-tight: 1.10; /* display / hero / wordmark */ --type-leading-snug: 1.30; /* subheads, lead, captions */ --type-leading-body: 1.50; /* body text — canonical anchor */ --type-leading-loose: 1.65; /* legal-admin small body */ /* Tracking — Module 2.2 +20 floor-only rule for Lockup 2 ≤16px is render-rule not token; tokens carry the non-rule tracking values used in body composition. */ --type-tracking-tight: -0.01em; /* hero wordmark only */ --type-tracking-normal: 0em; /* body / heading default */ --type-tracking-mono: 0.01em; /* mono labels — opens dense Plex Mono */ --type-tracking-meta: 0.04em; /* UPPERCASE meta labels (when used) */ /* =========================================================================== §C — SPACING SCALE Anchored to 1A = 0.687 × wordmark font-size per Module 2.2 §6. For deployment surfaces, 1A is computed against the canonical body anchor (16px = 1rem) — 1A-body = 0.687rem (~11px). The wordmark-A unit (Module 2.2 clear-space) holds when the wordmark itself is the reference; the body-A unit holds when body text is the reference. The scale below is body-A. =========================================================================== */ /* Base unit — the canonical anchor the multiplicative scale derives from. --space-1A aliases --space-A so the scale-naming reads consistently at the 1× step without losing the "base unit" framing. */ --space-A: 0.687rem; /* 1A — the body-text anchor (~11px) */ /* Multiplicative scale — eleven multiplicative steps, plus --space-0 as the zero anchor, plus --space-A as the base unit aliased at the 1× step. Each step is a multiple of 1A so the spacing rhythm reads as the cap-height architecture rather than as a parallel 8pt / 4pt grid. */ --space-0: 0; --space-quarter-A: 0.172rem; /* 0.25A — hairline gaps; rule-to-text */ --space-half-A: 0.344rem; /* 0.50A — tight clusters; icon-to-text */ --space-three-quarter-A: 0.515rem; /* 0.75A — micro padding */ --space-1A: var(--space-A); /* 1A — body-line, clear-space, baseline (alias of --space-A) */ --space-1-5A: 1.031rem; /* 1.5A — paragraph rhythm, control padding */ --space-2A: 1.375rem; /* 2A — block separation, card padding */ --space-3A: 2.062rem; /* 3A — section-internal break */ --space-4A: 2.749rem; /* 4A — section separation */ --space-5A: 3.437rem; /* 5A — eyebrow-to-title; section-rhythm step (v1.3) */ --space-6A: 4.124rem; /* 6A — major section break */ --space-8A: 5.499rem; /* 8A — page-edge inset */ --space-12A: 8.249rem; /* 12A — hero clear-space, page-top */ /* =========================================================================== §D — THREE-TIER ELEVATION CONTRACT (per Q-I.2 / forward input 5.5) Page-paper / warm-paper / shell-bg as a three-tier elevation surface, NOT three independent colour roles. Named here so downstream layers consume the contract rather than re-derive it. =========================================================================== */ --elev-1-page: var(--brand-paper); /* page canvas, default surface */ --elev-2-panel: var(--brand-paper-warm); /* panel raised on page */ --elev-3-shell: var(--brand-shell-bg); /* system chrome / inverted */ /* Per-tier text colour bindings — body text on each elevation tier. */ --elev-1-text: var(--brand-ink); --elev-1-text-muted: var(--brand-ink-muted); --elev-2-text: var(--brand-ink); --elev-2-text-muted: var(--brand-ink-muted); --elev-3-text: var(--brand-paper); /* inverted at tier 3 */ --elev-3-text-muted: #B5B8BE; /* derived; 7.0:1 on shell-bg */ /* =========================================================================== §E — SEMANTIC COLOUR ROLES Surface-facing contract. Each semantic role points at a --brand-* literal. If a Layer 1 anchor moves, the semantic role moves with it — single source. =========================================================================== */ /* Surface */ --color-surface-page: var(--elev-1-page); --color-surface-panel: var(--elev-2-panel); --color-surface-shell: var(--elev-3-shell); /* Text */ --color-text-primary: var(--brand-ink); --color-text-secondary: var(--brand-ink-muted); --color-text-inverted: var(--brand-paper); --color-text-accent: var(--brand-accent); /* Rule / divider (DECORATIVE only — see --ui-boundary for meaning-carrying) */ --color-rule-soft: var(--brand-rule-soft); /* DECORATIVE-ONLY — §2.5.1 */ --color-rule-firm: var(--brand-rule-firm); /* Accent */ --color-accent: var(--brand-accent); --color-link: var(--brand-accent); /* =========================================================================== §F — MEANING-CARRYING BOUNDARY TOKEN (forward input 5.4) Replaces the Layer 1 specimen-local --ui-boundary-3to1 stand-in. Clears 3:1 against BOTH --brand-paper AND --brand-shell-bg per WCAG 2.2 SC 1.4.11. Tuned in the cool-neutral family (hue 250) to read as part of the brand's cool-undertone palette rather than as a separate hue. =========================================================================== */ --ui-boundary: #828690; /* ~3.4:1 vs --brand-paper; ~4.0:1 vs --brand-shell-bg */ /* Use --ui-boundary for: input borders, form-control boundaries, panel grouping that signals affordance, UI-component boundaries (cards, tiles, status panels, swatch containers), table cell grids that the reader must perceive to parse the data. NOT --brand-rule-soft. */ /* =========================================================================== §G — INTERACTION-STATE TINTS (derived from --brand-accent per Q-I.1) Single-accent lock at Layer 1 structurally requires Layer 2 to derive interaction-state tokens by tinting --brand-accent rather than introducing additional hues. Walks lightness; holds hue 200; adjusts chroma per-step to maintain perceptual evenness. =========================================================================== */ /* Tint scale — 100/200/300/400/500/600/700. 500 is the canonical anchor and IS --brand-accent. */ --state-accent-100: #DBE5E9; /* oklch(0.92 0.020 200) — hover-fill bg */ --state-accent-200: #B7CBD1; /* oklch(0.83 0.030 200) — selection fill */ --state-accent-300: #85A4AE; /* oklch(0.68 0.050 200) — disabled accent */ --state-accent-400: #558998; /* oklch(0.62 0.085 200) — focus-ring anchor */ --state-accent-500: var(--brand-accent); /* canonical accent — #2F5560 */ --state-accent-600: #244650; /* oklch(0.36 0.060 200) — active / pressed */ --state-accent-700: #1A363E; /* oklch(0.28 0.055 200) — accent on tint */ /* Semantic interaction-state aliases */ --state-hover-bg: var(--state-accent-100); --state-selection-bg: var(--state-accent-200); --state-disabled: var(--state-accent-300); --state-pressed: var(--state-accent-600); /* =========================================================================== §H — FOCUS-RING (forward input 5.2 — dual-background 3:1 validation) Anchored at --state-accent-400 = #558998 = oklch(0.62 0.085 200). Validated: vs --brand-paper (#FCFBF9) → ~4.4:1 — PASSES SC 1.4.11 (3:1) vs --brand-shell-bg (#23262E) → ~3.6:1 — PASSES SC 1.4.11 (3:1) vs --brand-paper-warm (#F5F2EC) → ~4.1:1 — PASSES SC 1.4.11 (3:1) One token; works across all three elevation tiers. =========================================================================== */ --ui-focus-ring: var(--state-accent-400); --ui-focus-ring-width: 2px; --ui-focus-ring-offset: 2px; /* =========================================================================== §I — RADII (geometric tokens — small surface; document for completeness) =========================================================================== */ --radius-none: 0; --radius-sm: 2px; /* input field, small chip */ --radius-md: 4px; /* card, panel, button */ --radius-lg: 8px; /* large panel, modal */ /* =========================================================================== §J — RULE WEIGHTS =========================================================================== */ --rule-weight-hairline: 1px; --rule-weight-firm: 2px; /* =========================================================================== §L — MEASURE SCALE (line-length compositional roles) Tier 3 — Semantics / Surface contract. Closed family of four tokens naming the line-length measures used as compositional roles across channel-native templates. Values in `ch` units (typography-anchored — 1ch = width of "0" in current font); roles map to brand-architectural reading positions rather than to a ratio-derived scale. Use these tokens for measure decisions that recur across channels and registers; use inline `max-width: NNch` declarations for one-off surface-specific composition outside the closed set (per the GOV.UK deliberate-measure discipline). See memo §1.2 for the Tier 3 placement reasoning and the four-bands-not-five collapse of the recurring-values cluster. =========================================================================== */ --measure-display: 20ch; /* display titles + short focal blocks */ --measure-prose: 36ch; /* door-sentences, leads, subheads, IF-3 */ --measure-wide: 50ch; /* article-deck, sub-deck, longer focal */ --measure-body: 60ch; /* sustained body-flow reading */ } /* ============================================================================= §K — FORCED-COLORS / HIGH-CONTRAST OVERRIDE (Module 2.2 §7.1 structural floor) When the OS / browser signals forced-colors, drop to the 21:1 structural-floor pair. Keeps accessibility-conformance audit surfaces clean. ============================================================================= */ @media (forced-colors: active) { :root { --color-surface-page: var(--structural-floor-paper); --color-text-primary: var(--structural-floor-ink); --color-text-secondary: var(--structural-floor-ink); --color-rule-firm: var(--structural-floor-ink); --ui-boundary: var(--structural-floor-ink); --ui-focus-ring: var(--structural-floor-ink); } } /* ============================================================================= END — design-tokens.css ============================================================================= */