---
name: Designesy
version: 0.4.7
description: Organization-first design system contract. Deterministic verification, DTCG-aligned tokens, 45 checks (42 automated).
standards:
  - WCAG 2.1 AA
  - APCA
  - DTCG 2025.10
  - EU AI Act Article 50
colors:
  primary: "{colors.signal}"
  ink: "#f5f5f7"
  muted: "#a0a0a0"
  muted-dim: "#7d7d7d"
  paper: "#010102"
  surface: "#0a0a0c"
  surface-raised: "#121216"
  surface-lifted: "#16161b"
  signal: "#0A94FF"
  signal-light: "#36A7FF"
  activation: "#F56B00"
  activation-ink: "{colors.activation}"
  signal-access: "#0A94FF"
  signal-text: "{colors.signal-access}"
  paper-on-signal: "#010102"
  paper-white: "#FFFFFF"
  signal-deep: "#016ABB"
  signal-teal: "#2CEBCA"
  action: "{colors.signal}"
  on-action: "#010102"
  action-pressed: "#087ED9"
  ok: "#4ade80"
  ok-ink: "{colors.ok}"
  warn: "#facc15"
  warn-ink: "{colors.warn}"
  error: "#f87171"
  error-ink: "{colors.error}"
  grade-a: "#22c55e"
  grade-b: "#84cc16"
  grade-c: "#eab308"
  grade-d: "#FB7185"
  grade-f: "#ef4444"
  grade-a-ink: "{colors.grade-a}"
  grade-b-ink: "{colors.grade-b}"
  grade-c-ink: "{colors.grade-c}"
  grade-d-ink: "{colors.grade-d}"
  grade-f-ink: "{colors.grade-f}"
  grade-b-light: "#a3e635"
  grade-d-glow: "#FB7185"
  signal-pos: "#34d399"
  ok-chip: "#7AE4A1"
  warn-chip: "#F9D859"
  error-chip: "#F78989"
  ok-rim: "#75E69E5D"
  warn-rim: "#FBD84C5D"
  error-rim: "#FA92925D"
  signal-wash: "#0A151F"
  signal-wash-raised: "#111C29"
  signal-rim: "#29A2FF84"
  surface-selected: "#28282D"
  surface-raised-hover: "#18181CB7"
  error-text: "#fecaca"
  amber-notice: "#c9a227"
  shimmer-1: "#f1f7ff"
  shimmer-2: "#e1effe"
  shimmer-3: "#0286e9"
  shimmer-4: "#7cbafd"
  shimmer-5: "#d3e7fe"
typography:
  h1:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "2.441rem"
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: "-0.02em"
  h2:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: "-0.02em"
  h3:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "1.563rem"
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: "-0.02em"
  lead:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "1.25rem"
  body:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "1rem"
    lineHeight: 1.55
  label:
    fontFamily: "Atkinson Hyperlegible Mono, ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace"
    fontSize: "0.8rem"
  title-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: 1.02
  title-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "68px"
    fontWeight: 700
    lineHeight: 1.02
  lede-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "16.8px"
    fontWeight: 400
    lineHeight: 1.4
  lede-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "19.2px"
    fontWeight: 400
    lineHeight: 1.4
  thesis-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "16.96px"
    fontWeight: 400
    lineHeight: 1.5
  thesis-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "19.84px"
    fontWeight: 400
    lineHeight: 1.5
  sub-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.45
  sub-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "17.6px"
    fontWeight: 400
    lineHeight: 1.45
  card-title-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "20.8px"
    fontWeight: 700
    lineHeight: 1.08
  card-title-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "24.8px"
    fontWeight: 700
    lineHeight: 1.08
  run-title-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "20px"
    fontWeight: 650
    lineHeight: 1.25
  run-title-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "24px"
    fontWeight: 650
    lineHeight: 1.25
  section-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "30px"
    fontWeight: 400
    lineHeight: 1.08
  section-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "44px"
    fontWeight: 400
    lineHeight: 1.08
  home-section-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: 1.08
  home-section-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "49.6px"
    fontWeight: 700
    lineHeight: 1.08
  statement-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "40px"
    fontWeight: 700
    lineHeight: 1.08
  statement-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "72px"
    fontWeight: 700
    lineHeight: 1.08
  compact-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "25.6px"
    fontWeight: 700
    lineHeight: 1.08
  compact-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "33.6px"
    fontWeight: 700
    lineHeight: 1.08
  hero-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "37.6px"
    fontWeight: 340
    lineHeight: 1.02
  hero-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "78.4px"
    fontWeight: 340
    lineHeight: 1.02
  hero-phone-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "28px"
    fontWeight: 340
    lineHeight: 1.06
  hero-phone-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "51.2px"
    fontWeight: 340
    lineHeight: 1.06
  home-hero-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "41.6px"
    fontWeight: 700
    lineHeight: 1.08
  home-hero-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "78.4px"
    fontWeight: 700
    lineHeight: 1.08
  home-hero-phone-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "29.6px"
    fontWeight: 700
    lineHeight: 1.08
  home-hero-phone-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "41.6px"
    fontWeight: 700
    lineHeight: 1.08
  panel-title-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "24.8px"
    fontWeight: 700
    lineHeight: 1.1
  panel-title-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "33.6px"
    fontWeight: 700
    lineHeight: 1.1
  metric-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "32px"
    fontWeight: 700
    lineHeight: 1.55
  metric-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "44px"
    fontWeight: 700
    lineHeight: 1.55
  report-grade-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "56px"
    fontWeight: 800
    lineHeight: 1
  report-grade-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "80px"
    fontWeight: 800
    lineHeight: 1
  readout-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "39.06px"
    fontWeight: 700
    lineHeight: 1
  readout-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "52px"
    fontWeight: 700
    lineHeight: 1
  console-grade-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "39.06px"
    fontWeight: 700
    lineHeight: 0.9
  console-grade-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "54.4px"
    fontWeight: 700
    lineHeight: 0.9
  engine-grade-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "39.06px"
    fontWeight: 700
    lineHeight: 0.9
  engine-grade-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "57.6px"
    fontWeight: 700
    lineHeight: 0.9
  figure-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "40px"
    fontWeight: 600
    lineHeight: 1
  figure-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "48px"
    fontWeight: 600
    lineHeight: 1
  fidelity-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: 0.92
  fidelity-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "68px"
    fontWeight: 700
    lineHeight: 0.92
  fidelity-null-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "24px"
    fontWeight: 700
    lineHeight: 1.05
  fidelity-null-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "33.6px"
    fontWeight: 700
    lineHeight: 1.05
  stat-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "15px"
    fontWeight: 600
    lineHeight: 1.1
  stat-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "26px"
    fontWeight: 600
    lineHeight: 1.1
  stat-solo-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: 1.1
  stat-solo-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "26px"
    fontWeight: 600
    lineHeight: 1.1
  orb-title-narrow:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "36px"
    fontWeight: 500
    lineHeight: 1.08
  orb-title-wide:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    fontSize: "56px"
    fontWeight: 500
    lineHeight: 1.08
  wordmark-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "38.4px"
    fontWeight: 800
    lineHeight: 1.06
  wordmark-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "60.8px"
    fontWeight: 800
    lineHeight: 1.06
  wordmark-demo-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "28.8px"
    fontWeight: 800
    lineHeight: 1.06
  wordmark-demo-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "44.8px"
    fontWeight: 800
    lineHeight: 1.06
  wordmark-hero-narrow:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "51.2px"
    fontWeight: 800
    lineHeight: 1.06
  wordmark-hero-wide:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    fontSize: "88px"
    fontWeight: 800
    lineHeight: 1.06
  leading-step:
    fontFamily: "Fraunces, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif"
    lineHeight: 1.12
  leading-segment:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    lineHeight: 1.15
  leading-tight:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    lineHeight: 1.2
  leading-compact:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    lineHeight: 1.3
  leading-card:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    lineHeight: 1.35
  leading-cell-title:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    lineHeight: 1.38
  leading-cell-meta:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    lineHeight: 1.42
  leading-note:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    lineHeight: 1.6
  leading-reading:
    fontFamily: "Schibsted Grotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif"
    lineHeight: 1.65
rounded:
  xs: "2px"
  default: "6px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  full: "9999px"
spacing:
  space-0: 0
  space-1: "0.0625rem"
  space-2: "0.125rem"
  space-3: "0.1875rem"
  space-4: "0.25rem"
  space-5: "0.3125rem"
  space-6: "0.375rem"
  space-7: "0.4375rem"
  space-8: "0.5rem"
  space-9: "0.5625rem"
  space-10: "0.625rem"
  space-11: "0.6875rem"
  space-12: "0.75rem"
  space-13: "0.8125rem"
  space-14: "0.875rem"
  space-15: "0.9375rem"
  space-16: "1rem"
  space-17: "1.0625rem"
  space-18: "1.125rem"
  space-19: "1.1875rem"
  space-20: "1.25rem"
  space-21: "1.3125rem"
  space-22: "1.375rem"
  space-24: "1.5rem"
  space-28: "1.75rem"
  space-32: "2rem"
  space-35: "2.1875rem"
  space-36: "2.25rem"
  space-40: "2.5rem"
  space-44: "2.75rem"
  space-48: "3rem"
  space-56: "3.5rem"
  space-64: "4rem"
  space-72: "4.5rem"
  space-88: "5.5rem"
  space-104: "6.5rem"
  space-112: "7rem"
  space-fine-02: "0.02rem"
  space-fine-10: "0.1rem"
  space-fine-12: "0.12rem"
  space-fine-15: "0.15rem"
  space-fine-20: "0.2rem"
  space-fine-30: "0.3rem"
  space-fine-32: "0.32rem"
  space-fine-35: "0.35rem"
  space-fine-40: "0.4rem"
  space-fine-42: "0.42rem"
  space-fine-45: "0.45rem"
  space-fine-55: "0.55rem"
  space-fine-60: "0.6rem"
  space-fine-65: "0.65rem"
  space-fine-68: "0.68rem"
  space-fine-70: "0.7rem"
  space-fine-80: "0.8rem"
  space-fine-85: "0.85rem"
  space-fine-95: "0.95rem"
  space-fine-110: "1.1rem"
  space-fine-120: "1.2rem"
  space-fine-130: "1.3rem"
  space-fine-135: "1.35rem"
  space-fine-140: "1.4rem"
  space-fine-220: "2.2rem"
  space-fine-03: "0.03rem"
  space-fine-05: "0.05rem"
  space-fine-22: "0.22rem"
  space-fine-34: "0.34rem"
  space-fine-105: "1.05rem"
  space-fine-115: "1.15rem"
  space-fine-160: "1.6rem"
  space-fine-28: "0.28rem"
  space-fine-90: "0.9rem"
  space-96: "6rem"
  space-144: "9rem"
---

# Designesy Design System

## Overview

Organization-first design system with deterministic verification. The contract is the scoring basis: 42 automated checks extract live CSS, compare :root tokens, run WCAG/APCA contrast math, and score against 14 weighted categories; 3 more are left to a person. No LLM, no vibes.

## Tokens

### Colors

The front matter at the top of this file holds these colors, the type scale, the radii and the spacing scale as tokens, with the default (dark) theme's values. This table repeats the colors for people, with the light theme's values in the roles. A build check holds the two equal. The front matter's `primary` is the name the format requires for the brand accent: it points at `signal`.

| Token | Value | Role |
|---|---|---|
| `color.ink` | `#f5f5f7` | Primary text / foreground |
| `color.muted` | `#a0a0a0` | Secondary text |
| `color.muted.dim` | `#7d7d7d` | Tertiary / meta text: 5.07:1 on paper and 4.54:1 on raised in dark (on lifted planes the dim tier rides --muted); light #686872, 5.33:1 on paper and 4.68:1 on lifted |
| `color.paper` | `#010102` | Page background |
| `color.surface` | `#0a0a0c` | Card / panel base |
| `color.surface.raised` | `#121216` | Elevated surface |
| `color.surface.lifted` | `#16161b` | Lifted / hover panel |
| `color.signal` | `#0A94FF` | Brand accent (internal token name; public products avoid this vocabulary) |
| `color.signal.light` | `#36A7FF` | Accent hover / focus lift |
| `color.activation` | `#F56B00` | Activated Orange, the exact RGB inverse of --signal: live moments only (a scan running, the live monitor, the activated mark). Selection is blue |
| `color.activation.ink` | `var(--activation)` | Activation used as text: --activation on dark (6.94:1 on paper, 6.00:1 on lifted); on light #B04D00 (5.20:1 on paper, 4.56:1 on lifted). Light --activation itself (#F56B00, 3.01:1 on white) is for fills only |
| `color.signal.access` | `#0A94FF · light: #016ABB` | Accessible signal: text, links and focus. Dark is Azure itself (5.75:1 or more on every dark surface); light is Deep Azure #016ABB (4.71 to 5.55:1 on the four light surfaces) |
| `color.signal.text` | `var(--signal-access)` | Signal used as text: --signal-access in both themes. --signal itself is a fill; on light it is 3.14:1 on white and never text |
| `color.paper.on.signal` | `#010102` | Text on an Azure fill, and only that: ink, 6.65:1 on Azure. White on Azure is 3.14:1 and is not used |
| `color.paper.white` | `#FFFFFF` | The constant white, the same in both themes: the dark increase-contrast ink, text on red fills (5.56:1 on #ca2323), shimmer and shine highlights |
| `color.signal.deep` | `#016ABB` | Deep Azure: Azure's own 251° hue, darker. Links, focus and selected states on light surfaces (4.71 to 5.55:1 on all four). Never a button fill |
| `color.signal.teal` | `#2CEBCA` | Gradient end only (Azure to Teal, on black or white). Never a standalone colour, never behind body text, never paired with the activation colour |
| `color.action` | `var(--signal) · light: #0A94FF` | Primary action fill: Azure in both themes |
| `color.on.action` | `#010102` | Primary action label: ink on --action, 6.65:1 in both themes |
| `color.action.pressed` | `#087ED9` | Primary action pressed fill, and the light-theme hover: --on-action on it is 4.96:1 |
| `color.ok` | `#4ade80` | Verification status: pass |
| `color.ok.ink` | `var(--ok)` | Pass status used as text: --ok on dark (11.97:1 on paper, 10.35:1 on lifted); on light, --ok mixed 70% toward --ink in oklab (#215f35, 7.38:1 on paper, 6.47:1 on lifted). Light --ok itself (#15803d, 4.26:1 on lifted) is for icons, dots, bars and tints |
| `color.warn` | `#facc15` | Verification status: warn |
| `color.warn.ink` | `var(--warn)` | Warn used as text: --warn on dark (13.62:1 on paper); on light, --warn mixed 70% toward --ink in oklab (#7f5e21, 5.76:1 on paper as painted, 5.06:1 on lifted). Light --warn itself (#b07d04, 3.51:1 on paper) is for icons, dots and tints |
| `color.error` | `#f87171` | Verification status: fail |
| `color.error.ink` | `var(--error)` | Fail status used as text: --error on dark (7.54:1 on paper, 6.52:1 on lifted); on light, --error mixed 70% toward --ink in oklab (#9e2c29, 7.13:1 on paper, 6.26:1 on lifted). Light --error itself (#dc2626, 4.10:1 on lifted) is for icons, dots, bars and tints |
| `color.grade.a` | `#22c55e` | Grade scale A (≥90%): score emblem, constellation, badge. Distinct from --ok (#4ade80, verification status) |
| `color.grade.b` | `#84cc16` | Grade scale B (≥80%): lime, score emblem arc |
| `color.grade.c` | `#eab308` | Grade scale C (≥70%): yellow, score emblem arc |
| `color.grade.d` | `#FB7185` | Grade scale D (≥60%): rose, score emblem arc (light #C9216C). Off orange, which is the brand's activation colour |
| `color.grade.f` | `#ef4444` | Grade scale F (<60%): red, score emblem arc |
| `color.grade.a.ink` | `var(--grade-a)` | Grade A used as text: --grade-a on dark (9.16:1 on paper, 7.91:1 on lifted); light #147839 (5.38:1 on paper, 4.72:1 on lifted). Light --grade-a itself (#15803d, 4.26:1 on lifted) is for arcs, borders and tints |
| `color.grade.b.ink` | `var(--grade-b)` | Grade B used as text: --grade-b on dark (10.56:1 on paper, 9.13:1 on lifted); light #497509 (5.30:1 on paper, 4.65:1 on lifted). Light --grade-b itself (#5D960C, 3.06:1 on lifted) is for arcs, borders and tints |
| `color.grade.c.ink` | `var(--grade-c)` | Grade C used as text: --grade-c on dark (10.88:1 on paper, 9.40:1 on lifted); light #896203 (5.33:1 on paper, 4.68:1 on lifted). Light --grade-c itself (#b07d04, 3.08:1 on lifted) is for arcs, borders and tints |
| `color.grade.d.ink` | `var(--grade-d)` | Grade D used as text: --grade-d on dark (7.75:1 on paper, 6.70:1 on lifted); light #BE1F67 (5.67:1 on paper, 4.98:1 on lifted, 4.67:1 on its own 12% emblem tint). Light --grade-d itself (#C9216C, 4.55:1 on lifted) is for arcs, borders and tints |
| `color.grade.f.ink` | `var(--grade-f)` | Grade F used as text: --grade-f on dark (5.54:1 on paper, 4.79:1 on lifted); light #CD2323 (5.26:1 on paper, 4.62:1 on lifted). Light --grade-f itself (#dc2626, 4.10:1 on lifted) is for arcs, borders and tints |
| `color.grade.b.light` | `#a3e635` | Lighter lime for grade-B text on dark surfaces (13.84:1 on paper); light value is --grade-b-ink (#497509, 5.30:1 on paper), because light lime #5D960C is 3.48:1 |
| `color.grade.d.glow` | `#FB7185` | Glow variant for the D-grade emblem and hero proof: the same rose as --grade-d (light #C9216C) |
| `color.signal.pos` | `#34d399` | Emerald for positive signal points in score breakdown |
| `color.ok.chip` | `color-mix(in srgb, var(--ok) 72%, var(--ink))` | Pass and hold chip text, held to 4.5:1 on the chip |
| `color.warn.chip` | `color-mix(in srgb, var(--warn) 70%, var(--ink))` | Warn chip text |
| `color.error.chip` | `color-mix(in srgb, var(--error) 82%, var(--ink))` | Fail chip text |
| `color.ok.rim` | `color-mix(in srgb, var(--ok) 28%, var(--line))` | Pass chip edge |
| `color.warn.rim` | `color-mix(in srgb, var(--warn) 28%, var(--line))` | Warn chip edge |
| `color.error.rim` | `color-mix(in srgb, var(--error) 28%, var(--line))` | Fail chip edge |
| `color.signal.wash` | `color-mix(in srgb, var(--signal) 8%, var(--surface))` | Featured surface: an Azure wash on --surface |
| `color.signal.wash.raised` | `color-mix(in srgb, var(--signal) 8%, var(--surface-raised))` | The same wash on a raised surface (the copied state) |
| `color.signal.rim` | `color-mix(in srgb, var(--signal-access) 45%, var(--line))` | Featured and copied edge |
| `color.surface.selected` | `color-mix(in srgb, var(--ink) 8%, var(--surface-lifted))` | The selected tile in a segmented control (dark) |
| `color.surface.raised.hover` | `color-mix(in srgb, var(--surface-raised) 70%, var(--surface-hover))` | Hover on a raised cell |
| `color.error.text` | `#fecaca` | Light red-200 for error text on dark error surfaces (14.42:1 on paper); light value is --error-ink (#9e2c29, 7.13:1 on paper) |
| `color.amber.notice` | `#c9a227` | Amber for score-drawer remediation heading: contract-restrained (8.62:1 on paper); light value is --warn-ink (#7f5e21, 5.76:1 on paper), because light amber #b07d04 is 3.51:1 |
| `color.shimmer.1` | `#f1f7ff` | Wordmark shimmer gradient stop 1: decorative animation |
| `color.shimmer.2` | `#e1effe` | Wordmark shimmer gradient stop 2: decorative animation |
| `color.shimmer.3` | `#0286e9` | Wordmark shimmer gradient stop 3: decorative animation |
| `color.shimmer.4` | `#7cbafd` | Wordmark shimmer gradient stop 4: decorative animation |
| `color.shimmer.5` | `#d3e7fe` | Wordmark shimmer gradient stop 5: decorative animation |

## Typography

- **Root font size:** 16px (never lower: iOS Safari auto-zooms inputs below 16px)
- **Heading line-height:** 1.08 (tight, deliberate)
- **Body line-height:** 1.55 (relaxed, confident)
- **Font smoothing:** antialiased + grayscale (prevents subpixel artifacts on dark backgrounds)
- **Font synthesis:** none (prevents browser from synthesizing missing weights)
- **Text wrap:** balance (headings) + pretty (body)
- **Underline position:** from-font (uses font designer's position, not browser default)
- **Skip ink:** auto (underlines skip descenders: g, j, p, q, y)
- **Tabular nums:** required on numeric displays (scores, counts, prices, timestamps)

## Motion

- **Durations:** 150ms (quick), 250ms (fast), 350ms (medium), 400ms (slow), 600ms (default)
- **Easing:** cubic-bezier(0.22, 1, 0.36, 1) primary out; cubic-bezier(0.65, 0, 0.35, 1) in-out
- **Press scale (Takt):** 0.96 cells, 0.985 cards, 0.995 large surfaces: all above 0.95 floor
- **Reduced motion:** prefers-reduced-motion disables all animations and transitions
- **No transition:all:** use named properties to avoid layout-thrash

## Acoustic

- **Sound toggle:** aria-pressed + data-audio attribute on html/body
- **Reduced motion:** prefers-reduced-motion disables entrance loops, parallax, wordmark breath

## Takt

- **Press scale floor:** 0.95 (below reads as a glitch, not a press)
- **Cell press:** 0.96 (buttons, chips, toggles)
- **Card press:** 0.985 (cards, rows)
- **Large surface press:** 0.995 (panels, sheets)
- **Stagger enter:** animation-delay 60-120ms band
- **Soften exits:** transition on transform with ease-out

## Verification

- **Checks:** 45 (v01 to v29, v34 to v46, x01 to x03)
- **Categories:** 14 weighted (cadence 18, accessibility 15, semantic 12, motion 10, copywriting 8, tokens 9, takt 8, poise 7, identity 6, interaction 6, performance 6, responsive 3, security 5, spec 4)
- **A11y floor:** 60% (accessibility category below 60% caps overall score at C/70)
- **Standards:** WCAG 2.1 AA + APCA supplementary + DTCG 2025.10 + EU AI Act Art 50
- **v34 AI-Disclosure:** effective 2026-08-02 (EU AI Act Art 50)
- **v35 Forced-colors:** Windows HCM / Chrome forced-colors readiness

## Provenance

Contract v0.4.7. DTCG 2025.10 aligned. EU AI Act Art 50 check (v34) effective 2026-08-02. Forced-colors readiness (v35) per WCAG 2.2 HCM guidance.