@openwarelabs/ui 0.0.0-stage → 0.1.1

package/dist/tokens.json

@@ -0,0 +1,1163 @@
+{
+  "name": "Openware UI",
+  "version": 1,
+  "color": {
+    "themes": [
+      {
+        "id": "light",
+        "name": "Light"
+      },
+      {
+        "id": "dark",
+        "name": "Dark"
+      }
+    ],
+    "tokens": [
+      {
+        "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"
+      }
+    ],
+    "families": {
+      "sans": "\"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "mono": "\"Geist Mono Variable\", \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, monospace"
+    },
+    "groups": [
+      {
+        "name": "Display",
+        "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": "Interface",
+        "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": "Mono",
+        "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)."
+          }
+        ]
+      }
+    ]
+  },
+  "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."
+      }
+    ]
+  },
+  "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."
+      }
+    ]
+  },
+  "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."
+      }
+    ]
+  },
+  "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."
+      }
+    ]
+  },
+  "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."
+      }
+    ]
+  }
+}