@openwarelabs/ui 0.1.0 → 0.1.1

package/dist/tokens.json

@@ -1,130 +1,655 @@
 {
   "name": "Openware UI",
   "version": 1,
-  "meta": {
-    "source": "github",
-    "repo": "commandr-dev/commandr-app",
-    "ref": "main@aa29edb",
-    "also": "commandr-dev/commandr-landing via the Commandr Brand design system (synced 2026-10-04): brass, the site's display type, pills, the header and the dot grid",
-    "paths": {
-      "tokens": ["frontend/src/ui/styles.css"],
-      "components": ["frontend/src/ui/components/", "frontend/src/ui/hooks/useModalDialog.ts", "frontend/src/ui/hooks/useMenuKeyboard.ts"]
-    },
-    "synced": "2026-10-13"
-  },
   "color": {
     "themes": [
-      { "id": "light", "name": "Light" },
-      { "id": "dark", "name": "Dark" }
+      {
+        "id": "light",
+        "name": "Light"
+      },
+      {
+        "id": "dark",
+        "name": "Dark"
+      }
     ],
     "tokens": [
-      { "name": "ow-brand-50", "value": "#f2f3fc", "usage": "Brand scale (Commandr's midnight). Selected rows and the recommended choice's tint, through ow-primary-subtle. Swap the eleven brand steps to rebrand." },
-      { "name": "ow-brand-100", "value": "#e7e9f9", "usage": "Brand scale. Soft primary fills, through ow-primary-soft." },
-      { "name": "ow-brand-200", "value": "#d4d7f4", "usage": "Brand scale. Borders of primary-tinted things, through ow-primary-border." },
-      { "name": "ow-brand-300", "value": "#b7bbea", "usage": "Brand scale. An open select's border in light; the focus ring and primary text in dark." },
-      { "name": "ow-brand-400", "value": "#898cd0", "usage": "Brand scale. Focused field borders in dark." },
-      { "name": "ow-brand-500", "value": "#5856ad", "usage": "Brand scale. The focus ring and focused field border in light (6.3:1 on white); the primary fill in dark." },
-      { "name": "ow-brand-600", "value": "#312c7e", "usage": "Brand scale. The primary fill in light: top of the primary button's gradient, checked boxes, switches." },
-      { "name": "ow-brand-700", "value": "#1e1b4b", "usage": "Brand scale. Commandr's midnight: bottom of the primary button's gradient." },
-      { "name": "ow-brand-800", "value": "#18163d", "usage": "Brand scale. The primary button's border, one step darker than its fill." },
-      { "name": "ow-brand-900", "value": "#13112f", "usage": "Brand scale. Deepest gradient stop for large brand plates." },
-      { "name": "ow-brand-950", "value": "#0b0a20", "usage": "Brand scale. Darkest step." },
-
-      { "name": "ow-gray-50", "value": "#f8fafc", "usage": "Neutral scale (cool slate, from the app). Never mix with warm greys on one screen." },
-      { "name": "ow-gray-100", "value": "#f1f5f9", "usage": "Neutral scale. The light canvas." },
-      { "name": "ow-gray-200", "value": "#e2e8f0", "usage": "Neutral scale. Hairlines in light." },
-      { "name": "ow-gray-300", "value": "#cbd5e1", "usage": "Neutral scale. Control borders in light." },
-      { "name": "ow-gray-400", "value": "#94a3b8", "usage": "Neutral scale. Hovered control borders and disabled labels in light." },
-      { "name": "ow-gray-500", "value": "#64748b", "usage": "Neutral scale." },
-      { "name": "ow-gray-600", "value": "#475569", "usage": "Neutral scale. Unselected navigation labels in light." },
-      { "name": "ow-gray-700", "value": "#334155", "usage": "Neutral scale. Secondary button labels in light." },
-      { "name": "ow-gray-800", "value": "#1e293b", "usage": "Neutral scale." },
-      { "name": "ow-gray-900", "value": "#0f172a", "usage": "Neutral scale. Text in light." },
-      { "name": "ow-gray-950", "value": "#020617", "usage": "Neutral scale." },
-
-      { "name": "ow-canvas", "value": { "light": "{ow-gray-100}", "dark": "#15171c" }, "usage": "The app's background behind surfaces. Dark is Commandr's night." },
-      { "name": "ow-paper", "value": { "light": "#f8f8f7", "dark": "#15171c" }, "usage": "Marketing pages' ground, under the dot grid. Warm in light: don't put slate controls on it beside slate surfaces." },
-      { "name": "ow-surface", "value": { "light": "#ffffff", "dark": "#1c1f26" }, "usage": "Cards, panels, fields, dialogs and menus." },
-      { "name": "ow-surface-muted", "value": { "light": "{ow-gray-50}", "dark": "#262a33" }, "usage": "Hover rows, ghost-button hover, keys and quiet fills inside a surface." },
-      { "name": "ow-control", "value": { "light": "#ffffff", "dark": "#2a2f38" }, "usage": "Top of the secondary button's and ChoiceCard's gradient." },
-      { "name": "ow-control-shade", "value": { "light": "{ow-gray-50}", "dark": "#23272f" }, "usage": "Bottom of the secondary button's and ChoiceCard's gradient." },
-      { "name": "ow-control-shade-hover", "value": { "light": "{ow-gray-100}", "dark": "#1f232a" }, "usage": "Bottom of the secondary button's gradient on hover." },
-
-      { "name": "ow-hover", "value": { "light": "{ow-gray-100}", "dark": "#2a2f38" }, "usage": "The keyboard-active or hovered option in a select's listbox." },
-      { "name": "ow-disabled", "value": { "light": "{ow-gray-100}", "dark": "#23272f" }, "usage": "The flat grey fill of a disabled primary or danger button." },
-      { "name": "ow-icon", "value": { "light": "{ow-gray-400}", "dark": "#7d8593" }, "usage": "Decorative icons beside text: a select's chevron, inactive nav icons. 2.6:1 on white in light, kept from the source; never the only sign of anything." },
-
-      { "name": "ow-border", "value": { "light": "{ow-gray-200}", "dark": "#2c313a" }, "usage": "Hairlines: card and dialog edges, dividers, menu borders." },
-      { "name": "ow-border-strong", "value": { "light": "{ow-gray-300}", "dark": "#434a56" }, "usage": "Control borders: fields, secondary buttons, checkboxes. 1.5:1 on white in light, kept from the source; fields also carry a label." },
-      { "name": "ow-border-hover", "value": { "light": "{ow-gray-400}", "dark": "#5b6472" }, "usage": "A hovered control's border." },
-
-      { "name": "ow-text", "value": { "light": "{ow-gray-900}", "dark": "#f3f4f6" }, "usage": "Headings, labels and values on ow-surface, ow-surface-muted and ow-canvas (17.8:1 light, 15.0:1 dark on surface)." },
-      { "name": "ow-text-soft", "value": { "light": "{ow-gray-700}", "dark": "#cfd3da" }, "usage": "Secondary button labels and badge text on ow-control and ow-surface-muted." },
-      { "name": "ow-text-muted", "value": { "light": "#5f6b7d", "dark": "#959ba6" }, "usage": "Descriptions, hints, placeholders and captions on every surface and the canvas (5.4:1 on white, 4.9:1 on canvas; 5.9:1 on dark surface, 5.1:1 on dark muted)." },
-      { "name": "ow-text-disabled", "value": { "light": "{ow-gray-400}", "dark": "#626a77" }, "usage": "Labels of disabled controls only; exempt from contrast minimums, so never use it for anything people must read." },
-
-      { "name": "ow-primary", "value": { "light": "{ow-brand-600}", "dark": "{ow-brand-500}" }, "usage": "Primary fill: top of the primary button's gradient, checked boxes, switches on, avatar initials ground. ow-on-primary on it: 11.7:1 light, 6.3:1 dark." },
-      { "name": "ow-primary-hover", "value": { "light": "{ow-brand-700}", "dark": "{ow-brand-600}" }, "usage": "Bottom of the primary button's gradient; checked boxes on hover." },
-      { "name": "ow-primary-active", "value": { "light": "{ow-brand-800}", "dark": "{ow-brand-700}" }, "usage": "The primary button's and a checked box's border." },
-      { "name": "ow-on-primary", "value": "#ffffff", "usage": "Text and icons on ow-primary and ow-primary-hover." },
-      { "name": "ow-primary-text", "value": { "light": "{ow-brand-600}", "dark": "{ow-brand-300}" }, "usage": "Primary-coloured text and icons on surfaces: the selected option's check, a ChoiceCard's icon, active nav icons (11.7:1 light, 8.9:1 dark on surface)." },
-      { "name": "ow-primary-subtle", "value": { "light": "{ow-brand-50}", "dark": "color-mix(in srgb, var(--ow-brand-400) 14%, transparent)" }, "usage": "The active command in the palette, the recommended choice's icon tile, the active badge." },
-      { "name": "ow-primary-soft", "value": { "light": "{ow-brand-100}", "dark": "color-mix(in srgb, var(--ow-brand-400) 22%, transparent)" }, "usage": "Stronger primary tint for selected states." },
-      { "name": "ow-primary-border", "value": { "light": "{ow-brand-200}", "dark": "color-mix(in srgb, var(--ow-brand-400) 40%, transparent)" }, "usage": "Borders of primary-tinted things: the recommended ChoiceCard, the active badge, icon tiles." },
-      { "name": "ow-primary-focus", "value": { "light": "{ow-brand-300}", "dark": "{ow-brand-400}" }, "usage": "An open select's border." },
-      { "name": "ow-focus-border", "value": { "light": "{ow-brand-500}", "dark": "{ow-brand-400}" }, "usage": "A focused field's border (6.3:1 on white; 5.3:1 on dark surface)." },
-      { "name": "ow-focus-ring", "value": { "light": "{ow-brand-500}", "dark": "{ow-brand-300}" }, "usage": "The 2 px keyboard focus outline on every control, offset 2 px. At least 3:1 on every surface and the canvas in both themes." },
-
-      { "name": "ow-brass", "value": "#d4a72c", "usage": "The accent, kept small: chip dots, list bullets, the dot grid under the pointer, a star. A graphic colour on light grounds (2.1:1); text only on dark (7.3:1 on dark surface)." },
-      { "name": "ow-brass-deep", "value": { "light": "#8a6a12", "dark": "{ow-brass}" }, "usage": "Brass you can read: link hover and brass text on ow-surface and ow-paper (5.1:1 and 4.8:1 in light; 7.3:1 in dark)." },
-      { "name": "ow-brass-soft", "value": { "light": "#faf3df", "dark": "rgba(212,167,44,0.14)" }, "usage": "Brass tint behind ow-brass-deep: notes, placeholders, half marks." },
-
-      { "name": "ow-danger-surface", "value": { "light": "#fff7f7", "dark": "rgba(251,44,54,0.12)" }, "usage": "Danger badge and notice background." },
-      { "name": "ow-danger-wash", "value": { "light": "#ffe2e2", "dark": "rgba(251,44,54,0.18)" }, "usage": "The round icon tile of a destructive confirm (red-100)." },
-      { "name": "ow-danger-border", "value": { "light": "#ffc9c9", "dark": "rgba(255,100,103,0.38)" }, "usage": "Danger badge and notice border (red-200)." },
-      { "name": "ow-danger-line", "value": { "light": "#ffa2a2", "dark": "#ff6467" }, "usage": "An invalid field's border (red-300; red-400 in dark)." },
-      { "name": "ow-danger-solid", "value": "#fb2c36", "usage": "An invalid field's focused border, danger icons and dots (red-500); top of the danger button's gradient, where white reads 3.8:1, kept from the source (the label sits lower, over ow-danger-fill)." },
-      { "name": "ow-danger-fill", "value": "#e7000b", "usage": "Bottom of the danger button's gradient, checked danger boxes (red-600). White on it: 4.8:1." },
-      { "name": "ow-danger-fill-border", "value": "#c10007", "usage": "The danger button's border (red-700)." },
-      { "name": "ow-danger-text", "value": { "light": "#c10007", "dark": "#ffa2a2" }, "usage": "Error messages and danger badge text on ow-surface and ow-danger-surface (6.4:1 light, 8.6:1 dark)." },
-
-      { "name": "ow-success-surface", "value": { "light": "#eef8f2", "dark": "rgba(0,188,125,0.12)" }, "usage": "Success badge and notice background." },
-      { "name": "ow-success-border", "value": { "light": "#b9d8c2", "dark": "rgba(0,212,146,0.32)" }, "usage": "Success badge and notice border." },
-      { "name": "ow-success-solid", "value": "#00bc7d", "usage": "Success icons and dots (emerald-500)." },
-      { "name": "ow-success-text", "value": { "light": "#006045", "dark": "#5ee9b5" }, "usage": "Success text on ow-surface and ow-success-surface (7.6:1 light, 10.8:1 dark)." },
-
-      { "name": "ow-warning-surface", "value": { "light": "#fffbeb", "dark": "rgba(254,154,0,0.12)" }, "usage": "Warning badge and notice background (amber-50)." },
-      { "name": "ow-warning-border", "value": { "light": "#d7ca9f", "dark": "rgba(255,185,0,0.32)" }, "usage": "Warning badge and notice border." },
-      { "name": "ow-warning-solid", "value": "#fe9a00", "usage": "Warning icons and dots (amber-500)." },
-      { "name": "ow-warning-text", "value": { "light": "#973c00", "dark": "#ffd230" }, "usage": "Warning text on ow-surface and ow-warning-surface (7.1:1 light, 11.4:1 dark)." },
-
-      { "name": "ow-tooltip", "value": { "light": "{ow-gray-900}", "dark": "#f3f4f6" }, "usage": "Tooltip ground, inverted from the theme." },
-      { "name": "ow-on-tooltip", "value": { "light": "#ffffff", "dark": "#15171c" }, "usage": "Tooltip text on ow-tooltip (17.8:1 light, 16.3:1 dark)." },
-      { "name": "ow-switch-off", "value": { "light": "{ow-gray-400}", "dark": "#5b6472" }, "usage": "A switch's track when off; 2.6:1 on white and 2.8:1 on dark surface, so the knob's shadow and the label carry the state too." },
-      { "name": "ow-skeleton", "value": { "light": "{ow-gray-200}", "dark": "#2c313a" }, "usage": "Skeleton bars' first line." },
-      { "name": "ow-skeleton-soft", "value": { "light": "{ow-gray-100}", "dark": "#252932" }, "usage": "Skeleton bars' second line and control placeholders." },
-      { "name": "ow-avatar-empty", "value": { "light": "{ow-gray-200}", "dark": "#2c313a" }, "usage": "An avatar with no name or image." },
-      { "name": "ow-on-avatar-empty", "value": { "light": "{ow-gray-600}", "dark": "#cfd3da" }, "usage": "The person icon on ow-avatar-empty." },
-      { "name": "ow-code-ground", "value": { "light": "{ow-gray-100}", "dark": "#262a33" }, "usage": "Behind inline code; ow-text on it." },
-      { "name": "ow-key-ground", "value": { "light": "{ow-gray-50}", "dark": "#22262e" }, "usage": "Keyboard keys (Kbd); ow-text-soft on it." },
-      { "name": "ow-track", "value": { "light": "{ow-gray-100}", "dark": "#14161b" }, "usage": "The well behind segmented controls and segmented tabs." },
-      { "name": "ow-thumb", "value": { "light": "#ffffff", "dark": "#2f3541" }, "usage": "The selected segment in a segmented control or segmented tabs; ow-text on it." },
-      { "name": "ow-meter-track", "value": { "light": "{ow-gray-200}", "dark": "#2c313a" }, "usage": "The empty part of progress bars, progress circles and sliders." },
-      { "name": "ow-progress", "value": { "light": "{ow-brand-600}", "dark": "{ow-brand-400}" }, "usage": "The filled part of progress bars, progress circles, sliders and spinners; at least 3:1 against ow-meter-track and every surface." },
-      { "name": "ow-code-block", "value": "#15171c", "usage": "Code blocks, dark in both themes, like Commandr's night ground." },
-      { "name": "ow-code-block-header", "value": "#1c1f26", "usage": "The title bar of a code block." },
-      { "name": "ow-code-block-border", "value": { "light": "#15171c", "dark": "#2c313a" }, "usage": "A code block's edge; in dark it separates the block from the page." },
-      { "name": "ow-on-code-block", "value": "#e6edf3", "usage": "Code text on ow-code-block (15.9:1)." },
-      { "name": "ow-on-code-block-muted", "value": "#8b919c", "usage": "Line numbers, file names and the language label on ow-code-block and its header (5.7:1)." },
-      { "name": "ow-backdrop", "value": { "light": "rgba(15,23,42,0.4)", "dark": "rgba(0,0,0,0.6)" }, "usage": "The dimmed page behind a modal dialog." },
-      { "name": "ow-dot", "value": { "light": "rgba(15,23,42,0.11)", "dark": "rgba(255,255,255,0.09)" }, "usage": "The dot grid's dots." },
-      { "name": "ow-header-glass", "value": { "light": "rgba(255,255,255,0.85)", "dark": "rgba(28,31,38,0.85)" }, "usage": "The floating header pill, over a blur." }
+      {
+        "name": "ow-brand-50",
+        "value": "#f2f3fc",
+        "usage": "Brand scale (midnight). Selected rows and the recommended choice's tint, through ow-primary-subtle. Swap the eleven brand steps to rebrand."
+      },
+      {
+        "name": "ow-brand-100",
+        "value": "#e7e9f9",
+        "usage": "Brand scale. Soft primary fills, through ow-primary-soft."
+      },
+      {
+        "name": "ow-brand-200",
+        "value": "#d4d7f4",
+        "usage": "Brand scale. Borders of primary-tinted things, through ow-primary-border."
+      },
+      {
+        "name": "ow-brand-300",
+        "value": "#b7bbea",
+        "usage": "Brand scale. An open select's border in light; the focus ring and primary text in dark."
+      },
+      {
+        "name": "ow-brand-400",
+        "value": "#898cd0",
+        "usage": "Brand scale. Focused field borders in dark."
+      },
+      {
+        "name": "ow-brand-500",
+        "value": "#5856ad",
+        "usage": "Brand scale. The focus ring and focused field border in light (6.3:1 on white); the primary fill in dark."
+      },
+      {
+        "name": "ow-brand-600",
+        "value": "#312c7e",
+        "usage": "Brand scale. The primary fill in light: top of the primary button's gradient, checked boxes, switches."
+      },
+      {
+        "name": "ow-brand-700",
+        "value": "#1e1b4b",
+        "usage": "Brand scale. Midnight: bottom of the primary button's gradient."
+      },
+      {
+        "name": "ow-brand-800",
+        "value": "#18163d",
+        "usage": "Brand scale. The primary button's border, one step darker than its fill."
+      },
+      {
+        "name": "ow-brand-900",
+        "value": "#13112f",
+        "usage": "Brand scale. Deepest gradient stop for large brand plates."
+      },
+      {
+        "name": "ow-brand-950",
+        "value": "#0b0a20",
+        "usage": "Brand scale. Darkest step."
+      },
+      {
+        "name": "ow-gray-50",
+        "value": "#f8fafc",
+        "usage": "Neutral scale (cool slate, from the app). Never mix with warm greys on one screen."
+      },
+      {
+        "name": "ow-gray-100",
+        "value": "#f1f5f9",
+        "usage": "Neutral scale. The light canvas."
+      },
+      {
+        "name": "ow-gray-200",
+        "value": "#e2e8f0",
+        "usage": "Neutral scale. Hairlines in light."
+      },
+      {
+        "name": "ow-gray-300",
+        "value": "#cbd5e1",
+        "usage": "Neutral scale. Control borders in light."
+      },
+      {
+        "name": "ow-gray-400",
+        "value": "#94a3b8",
+        "usage": "Neutral scale. Hovered control borders and disabled labels in light."
+      },
+      {
+        "name": "ow-gray-500",
+        "value": "#64748b",
+        "usage": "Neutral scale."
+      },
+      {
+        "name": "ow-gray-600",
+        "value": "#475569",
+        "usage": "Neutral scale. Unselected navigation labels in light."
+      },
+      {
+        "name": "ow-gray-700",
+        "value": "#334155",
+        "usage": "Neutral scale. Secondary button labels in light."
+      },
+      {
+        "name": "ow-gray-800",
+        "value": "#1e293b",
+        "usage": "Neutral scale."
+      },
+      {
+        "name": "ow-gray-900",
+        "value": "#0f172a",
+        "usage": "Neutral scale. Text in light."
+      },
+      {
+        "name": "ow-gray-950",
+        "value": "#020617",
+        "usage": "Neutral scale."
+      },
+      {
+        "name": "ow-canvas",
+        "value": {
+          "light": "{ow-gray-100}",
+          "dark": "#15171c"
+        },
+        "usage": "The app's background behind surfaces. Dark is the night ground."
+      },
+      {
+        "name": "ow-paper",
+        "value": {
+          "light": "#f8f8f7",
+          "dark": "#15171c"
+        },
+        "usage": "Marketing pages' ground, under the dot grid. Warm in light: don't put slate controls on it beside slate surfaces."
+      },
+      {
+        "name": "ow-surface",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#1c1f26"
+        },
+        "usage": "Cards, panels, fields, dialogs and menus."
+      },
+      {
+        "name": "ow-surface-muted",
+        "value": {
+          "light": "{ow-gray-50}",
+          "dark": "#262a33"
+        },
+        "usage": "Hover rows, ghost-button hover, keys and quiet fills inside a surface."
+      },
+      {
+        "name": "ow-control",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#2a2f38"
+        },
+        "usage": "Top of the secondary button's and ChoiceCard's gradient."
+      },
+      {
+        "name": "ow-control-shade",
+        "value": {
+          "light": "{ow-gray-50}",
+          "dark": "#23272f"
+        },
+        "usage": "Bottom of the secondary button's and ChoiceCard's gradient."
+      },
+      {
+        "name": "ow-control-shade-hover",
+        "value": {
+          "light": "{ow-gray-100}",
+          "dark": "#1f232a"
+        },
+        "usage": "Bottom of the secondary button's gradient on hover."
+      },
+      {
+        "name": "ow-hover",
+        "value": {
+          "light": "{ow-gray-100}",
+          "dark": "#2a2f38"
+        },
+        "usage": "The keyboard-active or hovered option in a select's listbox."
+      },
+      {
+        "name": "ow-disabled",
+        "value": {
+          "light": "{ow-gray-100}",
+          "dark": "#23272f"
+        },
+        "usage": "The flat grey fill of a disabled primary or danger button."
+      },
+      {
+        "name": "ow-icon",
+        "value": {
+          "light": "{ow-gray-400}",
+          "dark": "#7d8593"
+        },
+        "usage": "Decorative icons beside text: a select's chevron, inactive nav icons. 2.6:1 on white in light, kept from the source; never the only sign of anything."
+      },
+      {
+        "name": "ow-border",
+        "value": {
+          "light": "{ow-gray-200}",
+          "dark": "#2c313a"
+        },
+        "usage": "Hairlines: card and dialog edges, dividers, menu borders."
+      },
+      {
+        "name": "ow-border-strong",
+        "value": {
+          "light": "{ow-gray-300}",
+          "dark": "#434a56"
+        },
+        "usage": "Control borders: fields, secondary buttons, checkboxes. 1.5:1 on white in light, kept from the source; fields also carry a label."
+      },
+      {
+        "name": "ow-border-hover",
+        "value": {
+          "light": "{ow-gray-400}",
+          "dark": "#5b6472"
+        },
+        "usage": "A hovered control's border."
+      },
+      {
+        "name": "ow-text",
+        "value": {
+          "light": "{ow-gray-900}",
+          "dark": "#f3f4f6"
+        },
+        "usage": "Headings, labels and values on ow-surface, ow-surface-muted and ow-canvas (17.8:1 light, 15.0:1 dark on surface)."
+      },
+      {
+        "name": "ow-text-soft",
+        "value": {
+          "light": "{ow-gray-700}",
+          "dark": "#cfd3da"
+        },
+        "usage": "Secondary button labels and badge text on ow-control and ow-surface-muted."
+      },
+      {
+        "name": "ow-text-muted",
+        "value": {
+          "light": "#5f6b7d",
+          "dark": "#959ba6"
+        },
+        "usage": "Descriptions, hints, placeholders and captions on every surface and the canvas (5.4:1 on white, 4.9:1 on canvas; 5.9:1 on dark surface, 5.1:1 on dark muted)."
+      },
+      {
+        "name": "ow-text-disabled",
+        "value": {
+          "light": "{ow-gray-400}",
+          "dark": "#626a77"
+        },
+        "usage": "Labels of disabled controls only; exempt from contrast minimums, so never use it for anything people must read."
+      },
+      {
+        "name": "ow-primary",
+        "value": {
+          "light": "{ow-brand-600}",
+          "dark": "{ow-brand-500}"
+        },
+        "usage": "Primary fill: top of the primary button's gradient, checked boxes, switches on, avatar initials ground. ow-on-primary on it: 11.7:1 light, 6.3:1 dark."
+      },
+      {
+        "name": "ow-primary-hover",
+        "value": {
+          "light": "{ow-brand-700}",
+          "dark": "{ow-brand-600}"
+        },
+        "usage": "Bottom of the primary button's gradient; checked boxes on hover."
+      },
+      {
+        "name": "ow-primary-active",
+        "value": {
+          "light": "{ow-brand-800}",
+          "dark": "{ow-brand-700}"
+        },
+        "usage": "The primary button's and a checked box's border."
+      },
+      {
+        "name": "ow-on-primary",
+        "value": "#ffffff",
+        "usage": "Text and icons on ow-primary and ow-primary-hover."
+      },
+      {
+        "name": "ow-primary-text",
+        "value": {
+          "light": "{ow-brand-600}",
+          "dark": "{ow-brand-300}"
+        },
+        "usage": "Primary-coloured text and icons on surfaces: the selected option's check, a ChoiceCard's icon, active nav icons (11.7:1 light, 8.9:1 dark on surface)."
+      },
+      {
+        "name": "ow-primary-subtle",
+        "value": {
+          "light": "{ow-brand-50}",
+          "dark": "color-mix(in srgb, var(--ow-brand-400) 14%, transparent)"
+        },
+        "usage": "The active command in the palette, the recommended choice's icon tile, the active badge."
+      },
+      {
+        "name": "ow-primary-soft",
+        "value": {
+          "light": "{ow-brand-100}",
+          "dark": "color-mix(in srgb, var(--ow-brand-400) 22%, transparent)"
+        },
+        "usage": "Stronger primary tint for selected states."
+      },
+      {
+        "name": "ow-primary-border",
+        "value": {
+          "light": "{ow-brand-200}",
+          "dark": "color-mix(in srgb, var(--ow-brand-400) 40%, transparent)"
+        },
+        "usage": "Borders of primary-tinted things: the recommended ChoiceCard, the active badge, icon tiles."
+      },
+      {
+        "name": "ow-primary-focus",
+        "value": {
+          "light": "{ow-brand-300}",
+          "dark": "{ow-brand-400}"
+        },
+        "usage": "An open select's border."
+      },
+      {
+        "name": "ow-focus-border",
+        "value": {
+          "light": "{ow-brand-500}",
+          "dark": "{ow-brand-400}"
+        },
+        "usage": "A focused field's border (6.3:1 on white; 5.3:1 on dark surface)."
+      },
+      {
+        "name": "ow-focus-ring",
+        "value": {
+          "light": "{ow-brand-500}",
+          "dark": "{ow-brand-300}"
+        },
+        "usage": "The 2 px keyboard focus outline on every control, offset 2 px. At least 3:1 on every surface and the canvas in both themes."
+      },
+      {
+        "name": "ow-brass",
+        "value": "#d4a72c",
+        "usage": "The accent, kept small: chip dots, list bullets, the dot grid under the pointer, a star. A graphic colour on light grounds (2.1:1); text only on dark (7.3:1 on dark surface)."
+      },
+      {
+        "name": "ow-brass-deep",
+        "value": {
+          "light": "#8a6a12",
+          "dark": "{ow-brass}"
+        },
+        "usage": "Brass you can read: link hover and brass text on ow-surface and ow-paper (5.1:1 and 4.8:1 in light; 7.3:1 in dark)."
+      },
+      {
+        "name": "ow-brass-soft",
+        "value": {
+          "light": "#faf3df",
+          "dark": "rgba(212,167,44,0.14)"
+        },
+        "usage": "Brass tint behind ow-brass-deep: notes, placeholders, half marks."
+      },
+      {
+        "name": "ow-danger-surface",
+        "value": {
+          "light": "#fff7f7",
+          "dark": "rgba(251,44,54,0.12)"
+        },
+        "usage": "Danger badge and notice background."
+      },
+      {
+        "name": "ow-danger-wash",
+        "value": {
+          "light": "#ffe2e2",
+          "dark": "rgba(251,44,54,0.18)"
+        },
+        "usage": "The round icon tile of a destructive confirm (red-100)."
+      },
+      {
+        "name": "ow-danger-border",
+        "value": {
+          "light": "#ffc9c9",
+          "dark": "rgba(255,100,103,0.38)"
+        },
+        "usage": "Danger badge and notice border (red-200)."
+      },
+      {
+        "name": "ow-danger-line",
+        "value": {
+          "light": "#ffa2a2",
+          "dark": "#ff6467"
+        },
+        "usage": "An invalid field's border (red-300; red-400 in dark)."
+      },
+      {
+        "name": "ow-danger-solid",
+        "value": "#fb2c36",
+        "usage": "An invalid field's focused border, danger icons and dots (red-500); top of the danger button's gradient, where white reads 3.8:1, kept from the source (the label sits lower, over ow-danger-fill)."
+      },
+      {
+        "name": "ow-danger-fill",
+        "value": "#e7000b",
+        "usage": "Bottom of the danger button's gradient, checked danger boxes (red-600). White on it: 4.8:1."
+      },
+      {
+        "name": "ow-danger-fill-border",
+        "value": "#c10007",
+        "usage": "The danger button's border (red-700)."
+      },
+      {
+        "name": "ow-danger-text",
+        "value": {
+          "light": "#c10007",
+          "dark": "#ffa2a2"
+        },
+        "usage": "Error messages and danger badge text on ow-surface and ow-danger-surface (6.4:1 light, 8.6:1 dark)."
+      },
+      {
+        "name": "ow-success-surface",
+        "value": {
+          "light": "#eef8f2",
+          "dark": "rgba(0,188,125,0.12)"
+        },
+        "usage": "Success badge and notice background."
+      },
+      {
+        "name": "ow-success-border",
+        "value": {
+          "light": "#b9d8c2",
+          "dark": "rgba(0,212,146,0.32)"
+        },
+        "usage": "Success badge and notice border."
+      },
+      {
+        "name": "ow-success-solid",
+        "value": "#00bc7d",
+        "usage": "Success icons and dots (emerald-500)."
+      },
+      {
+        "name": "ow-success-text",
+        "value": {
+          "light": "#006045",
+          "dark": "#5ee9b5"
+        },
+        "usage": "Success text on ow-surface and ow-success-surface (7.6:1 light, 10.8:1 dark)."
+      },
+      {
+        "name": "ow-warning-surface",
+        "value": {
+          "light": "#fffbeb",
+          "dark": "rgba(254,154,0,0.12)"
+        },
+        "usage": "Warning badge and notice background (amber-50)."
+      },
+      {
+        "name": "ow-warning-border",
+        "value": {
+          "light": "#d7ca9f",
+          "dark": "rgba(255,185,0,0.32)"
+        },
+        "usage": "Warning badge and notice border."
+      },
+      {
+        "name": "ow-warning-solid",
+        "value": "#fe9a00",
+        "usage": "Warning icons and dots (amber-500)."
+      },
+      {
+        "name": "ow-warning-text",
+        "value": {
+          "light": "#973c00",
+          "dark": "#ffd230"
+        },
+        "usage": "Warning text on ow-surface and ow-warning-surface (7.1:1 light, 11.4:1 dark)."
+      },
+      {
+        "name": "ow-tooltip",
+        "value": {
+          "light": "{ow-gray-900}",
+          "dark": "#f3f4f6"
+        },
+        "usage": "Tooltip ground, inverted from the theme."
+      },
+      {
+        "name": "ow-on-tooltip",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#15171c"
+        },
+        "usage": "Tooltip text on ow-tooltip (17.8:1 light, 16.3:1 dark)."
+      },
+      {
+        "name": "ow-switch-off",
+        "value": {
+          "light": "{ow-gray-400}",
+          "dark": "#5b6472"
+        },
+        "usage": "A switch's track when off; 2.6:1 on white and 2.8:1 on dark surface, so the knob's shadow and the label carry the state too."
+      },
+      {
+        "name": "ow-skeleton",
+        "value": {
+          "light": "{ow-gray-200}",
+          "dark": "#2c313a"
+        },
+        "usage": "Skeleton bars' first line."
+      },
+      {
+        "name": "ow-skeleton-soft",
+        "value": {
+          "light": "{ow-gray-100}",
+          "dark": "#252932"
+        },
+        "usage": "Skeleton bars' second line and control placeholders."
+      },
+      {
+        "name": "ow-avatar-empty",
+        "value": {
+          "light": "{ow-gray-200}",
+          "dark": "#2c313a"
+        },
+        "usage": "An avatar with no name or image."
+      },
+      {
+        "name": "ow-on-avatar-empty",
+        "value": {
+          "light": "{ow-gray-600}",
+          "dark": "#cfd3da"
+        },
+        "usage": "The person icon on ow-avatar-empty."
+      },
+      {
+        "name": "ow-code-ground",
+        "value": {
+          "light": "{ow-gray-100}",
+          "dark": "#262a33"
+        },
+        "usage": "Behind inline code; ow-text on it."
+      },
+      {
+        "name": "ow-key-ground",
+        "value": {
+          "light": "{ow-gray-50}",
+          "dark": "#22262e"
+        },
+        "usage": "Keyboard keys (Kbd); ow-text-soft on it."
+      },
+      {
+        "name": "ow-track",
+        "value": {
+          "light": "{ow-gray-100}",
+          "dark": "#14161b"
+        },
+        "usage": "The well behind segmented controls and segmented tabs."
+      },
+      {
+        "name": "ow-thumb",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#2f3541"
+        },
+        "usage": "The selected segment in a segmented control or segmented tabs; ow-text on it."
+      },
+      {
+        "name": "ow-meter-track",
+        "value": {
+          "light": "{ow-gray-200}",
+          "dark": "#2c313a"
+        },
+        "usage": "The empty part of progress bars, progress circles and sliders."
+      },
+      {
+        "name": "ow-progress",
+        "value": {
+          "light": "{ow-brand-600}",
+          "dark": "{ow-brand-400}"
+        },
+        "usage": "The filled part of progress bars, progress circles, sliders and spinners; at least 3:1 against ow-meter-track and every surface."
+      },
+      {
+        "name": "ow-code-block",
+        "value": "#15171c",
+        "usage": "Code blocks, dark in both themes, on the night ground."
+      },
+      {
+        "name": "ow-code-block-header",
+        "value": "#1c1f26",
+        "usage": "The title bar of a code block."
+      },
+      {
+        "name": "ow-code-block-border",
+        "value": {
+          "light": "#15171c",
+          "dark": "#2c313a"
+        },
+        "usage": "A code block's edge; in dark it separates the block from the page."
+      },
+      {
+        "name": "ow-on-code-block",
+        "value": "#e6edf3",
+        "usage": "Code text on ow-code-block (15.9:1)."
+      },
+      {
+        "name": "ow-on-code-block-muted",
+        "value": "#8b919c",
+        "usage": "Line numbers, file names and the language label on ow-code-block and its header (5.7:1)."
+      },
+      {
+        "name": "ow-backdrop",
+        "value": {
+          "light": "rgba(15,23,42,0.4)",
+          "dark": "rgba(0,0,0,0.6)"
+        },
+        "usage": "The dimmed page behind a modal dialog."
+      },
+      {
+        "name": "ow-dot",
+        "value": {
+          "light": "rgba(15,23,42,0.11)",
+          "dark": "rgba(255,255,255,0.09)"
+        },
+        "usage": "The dot grid's dots."
+      },
+      {
+        "name": "ow-header-glass",
+        "value": {
+          "light": "rgba(255,255,255,0.85)",
+          "dark": "rgba(28,31,38,0.85)"
+        },
+        "usage": "The floating header pill, over a blur."
+      }
     ]
   },
   "type": {
     "fonts": [
-      { "family": "Inter", "file": "fonts/InterVariable.woff2", "weight": "100 900", "style": "normal" },
-      { "family": "Geist Mono", "file": "fonts/GeistMonoVariable.woff2", "weight": "100 900", "style": "normal" }
+      {
+        "family": "Inter",
+        "file": "fonts/InterVariable.woff2",
+        "weight": "100 900",
+        "style": "normal"
+      },
+      {
+        "family": "Geist Mono",
+        "file": "fonts/GeistMonoVariable.woff2",
+        "weight": "100 900",
+        "style": "normal"
+      }
     ],
     "families": {
       "sans": "\"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
@@ -136,12 +661,58 @@
         "family": "sans",
         "note": "Marketing titles: Inter at weight 500 with tight tracking that tightens as the size grows. Never bold a display title.",
         "styles": [
-          { "name": "ow-type-hero", "fontSize": "76px", "lineHeight": 0.98, "fontWeight": 500, "letterSpacing": "-0.045em", "sample": "Ship the idea, not the boilerplate", "usage": "One home-page headline. 42px with 1.02 leading on phones." },
-          { "name": "ow-type-page-title", "fontSize": "56px", "lineHeight": 1.05, "fontWeight": 500, "letterSpacing": "-0.035em", "sample": "Pricing", "usage": "A page's h1. 40px with 1.06 leading on phones." },
-          { "name": "ow-type-section-title", "fontSize": "44px", "lineHeight": 1.1, "fontWeight": 500, "letterSpacing": "-0.03em", "sample": "Everything in one place.", "usage": "A section's h2, under a Chip. 32px with 1.12 leading on phones." },
-          { "name": "ow-type-heading", "fontSize": "24px", "lineHeight": 1.25, "fontWeight": 600, "letterSpacing": "-0.02em", "sample": "What you need", "usage": "Headings inside docs and long pages. 21px on phones." },
-          { "name": "ow-type-lead", "fontSize": "17px", "lineHeight": 1.6, "fontWeight": 400, "sample": "Describe what you want. The rest is handled.", "usage": "The intro under a title, in ow-text-muted, under 560px wide." },
-          { "name": "ow-type-prose", "fontSize": "16.5px", "lineHeight": 1.7, "fontWeight": 400, "sample": "Every change is saved before it lands, so anything can be undone.", "usage": "Docs and long-form text." }
+          {
+            "name": "ow-type-hero",
+            "fontSize": "76px",
+            "lineHeight": 0.98,
+            "fontWeight": 500,
+            "letterSpacing": "-0.045em",
+            "sample": "Ship the idea, not the boilerplate",
+            "usage": "One home-page headline. 42px with 1.02 leading on phones."
+          },
+          {
+            "name": "ow-type-page-title",
+            "fontSize": "56px",
+            "lineHeight": 1.05,
+            "fontWeight": 500,
+            "letterSpacing": "-0.035em",
+            "sample": "Pricing",
+            "usage": "A page's h1. 40px with 1.06 leading on phones."
+          },
+          {
+            "name": "ow-type-section-title",
+            "fontSize": "44px",
+            "lineHeight": 1.1,
+            "fontWeight": 500,
+            "letterSpacing": "-0.03em",
+            "sample": "Everything in one place.",
+            "usage": "A section's h2, under a Chip. 32px with 1.12 leading on phones."
+          },
+          {
+            "name": "ow-type-heading",
+            "fontSize": "24px",
+            "lineHeight": 1.25,
+            "fontWeight": 600,
+            "letterSpacing": "-0.02em",
+            "sample": "What you need",
+            "usage": "Headings inside docs and long pages. 21px on phones."
+          },
+          {
+            "name": "ow-type-lead",
+            "fontSize": "17px",
+            "lineHeight": 1.6,
+            "fontWeight": 400,
+            "sample": "Describe what you want. The rest is handled.",
+            "usage": "The intro under a title, in ow-text-muted, under 560px wide."
+          },
+          {
+            "name": "ow-type-prose",
+            "fontSize": "16.5px",
+            "lineHeight": 1.7,
+            "fontWeight": 400,
+            "sample": "Every change is saved before it lands, so anything can be undone.",
+            "usage": "Docs and long-form text."
+          }
         ]
       },
       {
@@ -149,15 +720,79 @@
         "family": "sans",
         "note": "The app's type: 14px by default, heavier named weights (control 500, emphasis 600, display 760, action 730, strong 750).",
         "styles": [
-          { "name": "ow-type-dialog-title", "fontSize": "16px", "lineHeight": 1.3, "fontWeight": 760, "sample": "Delete this project?", "usage": "Dialog and panel titles; 18px for a dialog with a form." },
-          { "name": "ow-type-card-title", "fontSize": "15px", "lineHeight": 1.3, "fontWeight": 600, "sample": "Start from scratch", "usage": "ChoiceCard and card titles." },
-          { "name": "ow-type-body", "fontSize": "14px", "lineHeight": 1.45, "fontWeight": 400, "sample": "Three files changed since the last checkpoint.", "usage": "Default interface text, field values and menu items." },
-          { "name": "ow-type-copy", "fontSize": "14px", "lineHeight": 1.55, "fontWeight": 400, "sample": "This removes the project from the list. Its folder stays on disk.", "usage": "Dialog descriptions and running text inside the app, in ow-text-muted." },
-          { "name": "ow-type-label", "fontSize": "14px", "lineHeight": 1.4, "fontWeight": 600, "sample": "Project name", "usage": "Field labels, above the control." },
-          { "name": "ow-type-button", "fontSize": "14px", "lineHeight": 1.1, "fontWeight": 730, "sample": "Create project", "usage": "Button labels at every size." },
-          { "name": "ow-type-caption", "fontSize": "12px", "lineHeight": 1.35, "fontWeight": 400, "sample": "Updated 2 minutes ago", "usage": "Hints, option descriptions and meta lines, in ow-text-muted." },
-          { "name": "ow-type-badge", "fontSize": "12px", "lineHeight": 1, "fontWeight": 750, "sample": "Running", "usage": "Badge labels." },
-          { "name": "ow-type-overline", "fontSize": "11px", "lineHeight": 1.35, "fontWeight": 600, "letterSpacing": "0.025em", "sample": "RECENT", "usage": "Group labels in menus, selects and the command palette; set uppercase in ow-text-muted." }
+          {
+            "name": "ow-type-dialog-title",
+            "fontSize": "16px",
+            "lineHeight": 1.3,
+            "fontWeight": 760,
+            "sample": "Delete this project?",
+            "usage": "Dialog and panel titles; 18px for a dialog with a form."
+          },
+          {
+            "name": "ow-type-card-title",
+            "fontSize": "15px",
+            "lineHeight": 1.3,
+            "fontWeight": 600,
+            "sample": "Start from scratch",
+            "usage": "ChoiceCard and card titles."
+          },
+          {
+            "name": "ow-type-body",
+            "fontSize": "14px",
+            "lineHeight": 1.45,
+            "fontWeight": 400,
+            "sample": "Three files changed since the last checkpoint.",
+            "usage": "Default interface text, field values and menu items."
+          },
+          {
+            "name": "ow-type-copy",
+            "fontSize": "14px",
+            "lineHeight": 1.55,
+            "fontWeight": 400,
+            "sample": "This removes the project from the list. Its folder stays on disk.",
+            "usage": "Dialog descriptions and running text inside the app, in ow-text-muted."
+          },
+          {
+            "name": "ow-type-label",
+            "fontSize": "14px",
+            "lineHeight": 1.4,
+            "fontWeight": 600,
+            "sample": "Project name",
+            "usage": "Field labels, above the control."
+          },
+          {
+            "name": "ow-type-button",
+            "fontSize": "14px",
+            "lineHeight": 1.1,
+            "fontWeight": 730,
+            "sample": "Create project",
+            "usage": "Button labels at every size."
+          },
+          {
+            "name": "ow-type-caption",
+            "fontSize": "12px",
+            "lineHeight": 1.35,
+            "fontWeight": 400,
+            "sample": "Updated 2 minutes ago",
+            "usage": "Hints, option descriptions and meta lines, in ow-text-muted."
+          },
+          {
+            "name": "ow-type-badge",
+            "fontSize": "12px",
+            "lineHeight": 1,
+            "fontWeight": 750,
+            "sample": "Running",
+            "usage": "Badge labels."
+          },
+          {
+            "name": "ow-type-overline",
+            "fontSize": "11px",
+            "lineHeight": 1.35,
+            "fontWeight": 600,
+            "letterSpacing": "0.025em",
+            "sample": "RECENT",
+            "usage": "Group labels in menus, selects and the command palette; set uppercase in ow-text-muted."
+          }
         ]
       },
       {
@@ -165,88 +800,364 @@
         "family": "mono",
         "note": "Geist Mono for code, paths and keys.",
         "styles": [
-          { "name": "ow-type-code", "fontSize": "14px", "lineHeight": 1.5, "fontWeight": 400, "sample": "~/Projects/recipe-app", "usage": "Inline code and paths at 0.88em of the text around them, on ow-code-ground." },
-          { "name": "ow-type-kbd", "fontSize": "12px", "lineHeight": 1, "fontWeight": 500, "sample": "⌘ K", "usage": "Keyboard keys (Kbd)." }
+          {
+            "name": "ow-type-code",
+            "fontSize": "14px",
+            "lineHeight": 1.5,
+            "fontWeight": 400,
+            "sample": "~/Projects/recipe-app",
+            "usage": "Inline code and paths at 0.88em of the text around them, on ow-code-ground."
+          },
+          {
+            "name": "ow-type-kbd",
+            "fontSize": "12px",
+            "lineHeight": 1,
+            "fontWeight": 500,
+            "sample": "⌘ K",
+            "usage": "Keyboard keys (Kbd)."
+          }
         ]
       }
     ]
   },
   "spacing": {
     "tokens": [
-      { "name": "ow-space-3xs", "value": "3px", "usage": "Gap between a title and its description." },
-      { "name": "ow-space-2xs", "value": "4px", "usage": "Gap between menu items and options; a menu's offset from its trigger." },
-      { "name": "ow-space-xs", "value": "6px", "usage": "Menu padding; gap inside small badges; tooltip offset." },
-      { "name": "ow-space-sm", "value": "8px", "usage": "The default gap: icon to label, between buttons, label to field." },
-      { "name": "ow-space-md", "value": "10px", "usage": "Small button padding; gap in dialog headers; textarea vertical padding." },
-      { "name": "ow-space-lg", "value": "12px", "usage": "Field horizontal padding; ChoiceCard inner gap." },
-      { "name": "ow-space-xl", "value": "14px", "usage": "Medium button padding; the gap between a form's rows." },
-      { "name": "ow-space-2xl", "value": "16px", "usage": "Large button padding; card padding." },
-      { "name": "ow-space-3xl", "value": "18px", "usage": "Panel header padding." },
-      { "name": "ow-space-4xl", "value": "20px", "usage": "Confirm dialog padding." },
-      { "name": "ow-space-5xl", "value": "22px", "usage": "Form dialog padding; the dot grid's step." },
-      { "name": "ow-space-6xl", "value": "26px", "usage": "Large badge padding." },
-      { "name": "ow-space-7xl", "value": "28px", "usage": "Generous section padding inside the app." },
-      { "name": "ow-page-max", "value": "1200px", "usage": "Marketing pages' content width cap." },
-      { "name": "ow-page-gutter", "value": "20px", "usage": "Page side gutter on phones; 32px from 768px up." },
-      { "name": "ow-header-height", "value": "56px", "usage": "The floating header pill on desktop; 54px on phones." },
-      { "name": "ow-section-y", "value": "96px", "usage": "Vertical padding of a marketing section on desktop; 72px on phones." }
+      {
+        "name": "ow-space-3xs",
+        "value": "3px",
+        "usage": "Gap between a title and its description."
+      },
+      {
+        "name": "ow-space-2xs",
+        "value": "4px",
+        "usage": "Gap between menu items and options; a menu's offset from its trigger."
+      },
+      {
+        "name": "ow-space-xs",
+        "value": "6px",
+        "usage": "Menu padding; gap inside small badges; tooltip offset."
+      },
+      {
+        "name": "ow-space-sm",
+        "value": "8px",
+        "usage": "The default gap: icon to label, between buttons, label to field."
+      },
+      {
+        "name": "ow-space-md",
+        "value": "10px",
+        "usage": "Small button padding; gap in dialog headers; textarea vertical padding."
+      },
+      {
+        "name": "ow-space-lg",
+        "value": "12px",
+        "usage": "Field horizontal padding; ChoiceCard inner gap."
+      },
+      {
+        "name": "ow-space-xl",
+        "value": "14px",
+        "usage": "Medium button padding; the gap between a form's rows."
+      },
+      {
+        "name": "ow-space-2xl",
+        "value": "16px",
+        "usage": "Large button padding; card padding."
+      },
+      {
+        "name": "ow-space-3xl",
+        "value": "18px",
+        "usage": "Panel header padding."
+      },
+      {
+        "name": "ow-space-4xl",
+        "value": "20px",
+        "usage": "Confirm dialog padding."
+      },
+      {
+        "name": "ow-space-5xl",
+        "value": "22px",
+        "usage": "Form dialog padding; the dot grid's step."
+      },
+      {
+        "name": "ow-space-6xl",
+        "value": "26px",
+        "usage": "Large badge padding."
+      },
+      {
+        "name": "ow-space-7xl",
+        "value": "28px",
+        "usage": "Generous section padding inside the app."
+      },
+      {
+        "name": "ow-page-max",
+        "value": "1200px",
+        "usage": "Marketing pages' content width cap."
+      },
+      {
+        "name": "ow-page-gutter",
+        "value": "20px",
+        "usage": "Page side gutter on phones; 32px from 768px up."
+      },
+      {
+        "name": "ow-header-height",
+        "value": "56px",
+        "usage": "The floating header pill on desktop; 54px on phones."
+      },
+      {
+        "name": "ow-section-y",
+        "value": "96px",
+        "usage": "Vertical padding of a marketing section on desktop; 72px on phones."
+      }
     ]
   },
   "radius": {
     "tokens": [
-      { "name": "ow-radius-sm", "value": "4px", "usage": "Checkboxes and small keys." },
-      { "name": "ow-radius-code", "value": "5px", "usage": "Inline code and shortcut hints inside buttons." },
-      { "name": "ow-radius-md", "value": "6px", "usage": "Tooltips, keys and ChoiceCard icon tiles." },
-      { "name": "ow-radius-lg", "value": "8px", "usage": "Menu items, options and nav items." },
-      { "name": "ow-radius-form", "value": "8px", "usage": "Buttons and fields in the app." },
-      { "name": "ow-radius-tile", "value": "10px", "usage": "App icon tiles." },
-      { "name": "ow-radius-container", "value": "12px", "usage": "Cards, dialogs, menus, toasts and the select's listbox." },
-      { "name": "ow-radius-panel", "value": "14px", "usage": "Large app panels." },
-      { "name": "ow-radius-card", "value": "18px", "usage": "Content cards on marketing pages." },
-      { "name": "ow-radius-section", "value": "22px", "usage": "Large marketing panels and the menu panel." },
-      { "name": "ow-radius-pill", "value": "999px", "usage": "Badges, chips, the header, avatars, and buttons with shape=\"pill\" on marketing pages." }
+      {
+        "name": "ow-radius-sm",
+        "value": "4px",
+        "usage": "Checkboxes and small keys."
+      },
+      {
+        "name": "ow-radius-code",
+        "value": "5px",
+        "usage": "Inline code and shortcut hints inside buttons."
+      },
+      {
+        "name": "ow-radius-md",
+        "value": "6px",
+        "usage": "Tooltips, keys and ChoiceCard icon tiles."
+      },
+      {
+        "name": "ow-radius-lg",
+        "value": "8px",
+        "usage": "Menu items, options and nav items."
+      },
+      {
+        "name": "ow-radius-form",
+        "value": "8px",
+        "usage": "Buttons and fields in the app."
+      },
+      {
+        "name": "ow-radius-tile",
+        "value": "10px",
+        "usage": "App icon tiles."
+      },
+      {
+        "name": "ow-radius-container",
+        "value": "12px",
+        "usage": "Cards, dialogs, menus, toasts and the select's listbox."
+      },
+      {
+        "name": "ow-radius-panel",
+        "value": "14px",
+        "usage": "Large app panels."
+      },
+      {
+        "name": "ow-radius-card",
+        "value": "18px",
+        "usage": "Content cards on marketing pages."
+      },
+      {
+        "name": "ow-radius-section",
+        "value": "22px",
+        "usage": "Large marketing panels and the menu panel."
+      },
+      {
+        "name": "ow-radius-pill",
+        "value": "999px",
+        "usage": "Badges, chips, the header, avatars, and buttons with shape=\"pill\" on marketing pages."
+      }
     ]
   },
   "shadow": {
     "tokens": [
-      { "name": "ow-shadow-button", "value": { "light": "inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 2px color-mix(in srgb, var(--ow-brand-700) 30%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--ow-brand-600) 50%, transparent)", "dark": "inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.45), 0 4px 10px -4px rgba(0,0,0,0.7)" }, "usage": "The primary button: a highlight along the top, a dark lower edge and a glow underneath." },
-      { "name": "ow-shadow-button-secondary", "value": { "light": "inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(15,23,42,0.08)", "dark": "inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4)" }, "usage": "Secondary buttons and ChoiceCards." },
-      { "name": "ow-shadow-button-danger", "value": { "light": "inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(127,29,29,0.25), 0 4px 10px -4px rgba(220,38,38,0.5)", "dark": "inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.45), 0 4px 10px -4px rgba(0,0,0,0.7)" }, "usage": "The danger button." },
-      { "name": "ow-shadow-pressed", "value": "inset 0 2px 4px rgba(0,0,0,0.18)", "usage": "Primary and danger buttons while pressed, with a 1px drop." },
-      { "name": "ow-shadow-pressed-secondary", "value": { "light": "inset 0 1px 2px rgba(15,23,42,0.1)", "dark": "inset 0 1px 2px rgba(0,0,0,0.4)" }, "usage": "Secondary buttons while pressed." },
-      { "name": "ow-shadow-control", "value": { "light": "0 1px 2px rgba(0,0,0,0.06)", "dark": "0 1px 2px rgba(0,0,0,0.4)" }, "usage": "Switch knobs, checkboxes and the active nav item." },
-      { "name": "ow-shadow-menu", "value": { "light": "0 12px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08)", "dark": "0 12px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4)" }, "usage": "Menus, the select's listbox, dialogs, the command palette and toasts." },
-      { "name": "ow-shadow-focus", "value": { "light": "0 0 0 3px color-mix(in srgb, var(--ow-brand-600) 14%, transparent)", "dark": "0 0 0 3px color-mix(in srgb, var(--ow-brand-400) 28%, transparent)" }, "usage": "The soft halo around a focused field, with ow-focus-border." },
-      { "name": "ow-shadow-focus-danger", "value": { "light": "0 0 0 3px rgba(239,68,68,0.12)", "dark": "0 0 0 3px rgba(239,68,68,0.24)" }, "usage": "The halo around a focused invalid field." },
-      { "name": "ow-shadow-header", "value": { "light": "0 1px 2px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.04)", "dark": "0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.3)" }, "usage": "The floating header pill." },
-      { "name": "ow-shadow-lift", "value": { "light": "0 20px 40px color-mix(in srgb, var(--ow-brand-700) 35%, transparent)", "dark": "0 20px 40px rgba(0,0,0,0.6)" }, "usage": "A large app icon or hero visual standing alone. The only shadow decoration takes." }
+      {
+        "name": "ow-shadow-button",
+        "value": {
+          "light": "inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 2px color-mix(in srgb, var(--ow-brand-700) 30%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--ow-brand-600) 50%, transparent)",
+          "dark": "inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.45), 0 4px 10px -4px rgba(0,0,0,0.7)"
+        },
+        "usage": "The primary button: a highlight along the top, a dark lower edge and a glow underneath."
+      },
+      {
+        "name": "ow-shadow-button-secondary",
+        "value": {
+          "light": "inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(15,23,42,0.08)",
+          "dark": "inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4)"
+        },
+        "usage": "Secondary buttons and ChoiceCards."
+      },
+      {
+        "name": "ow-shadow-button-danger",
+        "value": {
+          "light": "inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(127,29,29,0.25), 0 4px 10px -4px rgba(220,38,38,0.5)",
+          "dark": "inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.45), 0 4px 10px -4px rgba(0,0,0,0.7)"
+        },
+        "usage": "The danger button."
+      },
+      {
+        "name": "ow-shadow-pressed",
+        "value": "inset 0 2px 4px rgba(0,0,0,0.18)",
+        "usage": "Primary and danger buttons while pressed, with a 1px drop."
+      },
+      {
+        "name": "ow-shadow-pressed-secondary",
+        "value": {
+          "light": "inset 0 1px 2px rgba(15,23,42,0.1)",
+          "dark": "inset 0 1px 2px rgba(0,0,0,0.4)"
+        },
+        "usage": "Secondary buttons while pressed."
+      },
+      {
+        "name": "ow-shadow-control",
+        "value": {
+          "light": "0 1px 2px rgba(0,0,0,0.06)",
+          "dark": "0 1px 2px rgba(0,0,0,0.4)"
+        },
+        "usage": "Switch knobs, checkboxes and the active nav item."
+      },
+      {
+        "name": "ow-shadow-menu",
+        "value": {
+          "light": "0 12px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08)",
+          "dark": "0 12px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4)"
+        },
+        "usage": "Menus, the select's listbox, dialogs, the command palette and toasts."
+      },
+      {
+        "name": "ow-shadow-focus",
+        "value": {
+          "light": "0 0 0 3px color-mix(in srgb, var(--ow-brand-600) 14%, transparent)",
+          "dark": "0 0 0 3px color-mix(in srgb, var(--ow-brand-400) 28%, transparent)"
+        },
+        "usage": "The soft halo around a focused field, with ow-focus-border."
+      },
+      {
+        "name": "ow-shadow-focus-danger",
+        "value": {
+          "light": "0 0 0 3px rgba(239,68,68,0.12)",
+          "dark": "0 0 0 3px rgba(239,68,68,0.24)"
+        },
+        "usage": "The halo around a focused invalid field."
+      },
+      {
+        "name": "ow-shadow-header",
+        "value": {
+          "light": "0 1px 2px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.04)",
+          "dark": "0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.3)"
+        },
+        "usage": "The floating header pill."
+      },
+      {
+        "name": "ow-shadow-lift",
+        "value": {
+          "light": "0 20px 40px color-mix(in srgb, var(--ow-brand-700) 35%, transparent)",
+          "dark": "0 20px 40px rgba(0,0,0,0.6)"
+        },
+        "usage": "A large app icon or hero visual standing alone. The only shadow decoration takes."
+      }
     ]
   },
   "timing": {
     "tokens": [
-      { "name": "ow-duration-fast", "value": "120ms", "usage": "Small colour changes." },
-      { "name": "ow-duration-base", "value": "180ms", "usage": "Hover, press, focus and form transitions." },
-      { "name": "ow-duration-slow", "value": "260ms", "usage": "Menus, panels and messages entering." },
-      { "name": "ow-duration-exit", "value": "140ms", "usage": "Menus, popovers, tooltips and dialogs leaving: exits are quicker than entrances." },
-      { "name": "ow-duration-panel", "value": "340ms", "usage": "Drawers sliding in, accordions opening: large things that travel further." },
-      { "name": "ow-ease-standard", "value": "cubic-bezier(0.2, 0, 0, 1)", "usage": "Every UI transition." },
-      { "name": "ow-ease-emphasized", "value": "cubic-bezier(0.16, 1, 0.3, 1)", "usage": "Things entering: menus, panels, messages." },
-      { "name": "ow-ease-exit", "value": "cubic-bezier(0.4, 0, 1, 1)", "usage": "Things leaving: they speed up as they go." },
-      { "name": "ow-ease-spring", "value": "cubic-bezier(0.34, 1.4, 0.64, 1)", "usage": "Switch knobs, sliding indicators and check marks: a small overshoot that settles." }
+      {
+        "name": "ow-duration-fast",
+        "value": "120ms",
+        "usage": "Small colour changes."
+      },
+      {
+        "name": "ow-duration-base",
+        "value": "180ms",
+        "usage": "Hover, press, focus and form transitions."
+      },
+      {
+        "name": "ow-duration-slow",
+        "value": "260ms",
+        "usage": "Menus, panels and messages entering."
+      },
+      {
+        "name": "ow-duration-exit",
+        "value": "140ms",
+        "usage": "Menus, popovers, tooltips and dialogs leaving: exits are quicker than entrances."
+      },
+      {
+        "name": "ow-duration-panel",
+        "value": "340ms",
+        "usage": "Drawers sliding in, accordions opening: large things that travel further."
+      },
+      {
+        "name": "ow-ease-standard",
+        "value": "cubic-bezier(0.2, 0, 0, 1)",
+        "usage": "Every UI transition."
+      },
+      {
+        "name": "ow-ease-emphasized",
+        "value": "cubic-bezier(0.16, 1, 0.3, 1)",
+        "usage": "Things entering: menus, panels, messages."
+      },
+      {
+        "name": "ow-ease-exit",
+        "value": "cubic-bezier(0.4, 0, 1, 1)",
+        "usage": "Things leaving: they speed up as they go."
+      },
+      {
+        "name": "ow-ease-spring",
+        "value": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+        "usage": "Switch knobs, sliding indicators and check marks: a small overshoot that settles."
+      }
     ]
   },
   "weight": {
     "tokens": [
-      { "name": "ow-weight-regular", "value": "400", "usage": "Body text and field values." },
-      { "name": "ow-weight-control", "value": "500", "usage": "Menu items, option descriptions, nav labels." },
-      { "name": "ow-weight-emphasis", "value": "600", "usage": "Labels, selected options, card titles." },
-      { "name": "ow-weight-label", "value": "680", "usage": "Small strong labels." },
-      { "name": "ow-weight-heavy", "value": "700", "usage": "Heavy emphasis." },
-      { "name": "ow-weight-title", "value": "720", "usage": "App section titles." },
-      { "name": "ow-weight-action", "value": "730", "usage": "Button labels." },
-      { "name": "ow-weight-subheading", "value": "740", "usage": "App subheadings." },
-      { "name": "ow-weight-strong", "value": "750", "usage": "Badge labels." },
-      { "name": "ow-weight-display", "value": "760", "usage": "Dialog titles and app headings." }
+      {
+        "name": "ow-weight-regular",
+        "value": "400",
+        "usage": "Body text and field values."
+      },
+      {
+        "name": "ow-weight-control",
+        "value": "500",
+        "usage": "Menu items, option descriptions, nav labels."
+      },
+      {
+        "name": "ow-weight-emphasis",
+        "value": "600",
+        "usage": "Labels, selected options, card titles."
+      },
+      {
+        "name": "ow-weight-label",
+        "value": "680",
+        "usage": "Small strong labels."
+      },
+      {
+        "name": "ow-weight-heavy",
+        "value": "700",
+        "usage": "Heavy emphasis."
+      },
+      {
+        "name": "ow-weight-title",
+        "value": "720",
+        "usage": "App section titles."
+      },
+      {
+        "name": "ow-weight-action",
+        "value": "730",
+        "usage": "Button labels."
+      },
+      {
+        "name": "ow-weight-subheading",
+        "value": "740",
+        "usage": "App subheadings."
+      },
+      {
+        "name": "ow-weight-strong",
+        "value": "750",
+        "usage": "Badge labels."
+      },
+      {
+        "name": "ow-weight-display",
+        "value": "760",
+        "usage": "Dialog titles and app headings."
+      }
     ]
   }
 }