@tuuject/koi-tokens 0.0.0-stage → 0.1.0

package/src/tokens.json

@@ -0,0 +1,1870 @@
+{
+  "name": "Koi",
+  "version": 1,
+  "meta": {
+    "source": "github",
+    "repo": "tcdw/koi",
+    "ref": "main@87c7d4f",
+    "package": ".",
+    "paths": {
+      "tokens": ["src/styles/global.css", "tailwindcss@4.3.3 theme.css (palette values)"],
+      "fonts": ["src/assets/fonts/ChillRoundF/"],
+      "assets": [],
+      "docs": ["README.md", "src/consts.ts"]
+    },
+    "components": {},
+    "synced": "2026-10-07",
+    "note": "Tokens synced from tcdw/koi and extended into a general system; components are hand-written, not from the repository."
+  },
+  "color": {
+    "themes": [
+      {
+        "id": "light",
+        "name": "Light"
+      },
+      {
+        "id": "dark",
+        "name": "Dark"
+      }
+    ],
+    "palettes": {
+      "note": "A palette swaps the primary-* and accent-* scales; every role that points at them follows, in both themes. The other scales (secondary, warning, error) are fixed. Apps can also pass their own palette at runtime (@tuuject/koi-tokens/palette); built-in ones are checked by `pnpm contrast`, custom ones with checkPalette().",
+      "default": "koi",
+      "list": [
+        {
+          "id": "koi",
+          "name": "Koi",
+          "usage": "Sky primary, amber accent: the primary-* and accent-* tokens below."
+        },
+        {
+          "id": "rose",
+          "name": "Rose",
+          "usage": "Rose primary, violet accent (Tailwind v3 scales). A second built-in palette, so switching is exercised and contrast-checked.",
+          "primary": {
+            "50": "#fff1f2",
+            "100": "#ffe4e6",
+            "200": "#fecdd3",
+            "300": "#fda4af",
+            "400": "#fb7185",
+            "500": "#f43f5e",
+            "600": "#e11d48",
+            "700": "#be123c",
+            "800": "#9f1239",
+            "900": "#881337",
+            "950": "#4c0519"
+          },
+          "accent": {
+            "50": "#f5f3ff",
+            "100": "#ede9fe",
+            "200": "#ddd6fe",
+            "300": "#c4b5fd",
+            "400": "#a78bfa",
+            "500": "#8b5cf6",
+            "600": "#7c3aed",
+            "700": "#6d28d9",
+            "800": "#5b21b6",
+            "900": "#4c1d95",
+            "950": "#2e1065"
+          }
+        }
+      ]
+    },
+    "tokens": [
+      {
+        "name": "page-bg",
+        "value": {
+          "light": "{white}",
+          "dark": "{secondary-950}"
+        },
+        "usage": "Page background. The blog's body `bg-white` / `dark:bg-gray-950`."
+      },
+      {
+        "name": "surface",
+        "value": {
+          "light": "{white}",
+          "dark": "{secondary-900}"
+        },
+        "usage": "Cards, inputs, dialogs, the active tab: anything that sits on `page-bg` as its own object."
+      },
+      {
+        "name": "surface-muted",
+        "value": {
+          "light": "{secondary-100}",
+          "dark": "{secondary-800}"
+        },
+        "usage": "Quiet fills: tab track, progress track, ghost-button hover, disabled inputs."
+      },
+      {
+        "name": "surface-glass",
+        "value": {
+          "light": "rgba(255, 255, 255, 0.8)",
+          "dark": "{secondary-950 / 0.7}"
+        },
+        "usage": "Koi's frosted panel (`bg-white/80 dark:bg-gray-950/70`), always with `blur-panel`. Use over imagery or color: the glass Card."
+      },
+      {
+        "name": "surface-glass-tint",
+        "value": {
+          "light": "rgba(255, 255, 255, 0.8)",
+          "dark": "{primary-950 / 0.8}"
+        },
+        "usage": "Floating chrome: toasts and the blog's nav pill (`dark:bg-primary-950/80`), with `blur-float`."
+      },
+      {
+        "name": "backdrop",
+        "value": {
+          "light": "rgba(0, 0, 0, 0.4)",
+          "dark": "rgba(0, 0, 0, 0.6)"
+        },
+        "usage": "Dimmed layer behind a Dialog, with `blur-panel`."
+      },
+      {
+        "name": "tooltip-bg",
+        "value": {
+          "light": "{secondary-900}",
+          "dark": "{secondary-100}"
+        },
+        "usage": "Tooltip fill: inverted against the page."
+      },
+      {
+        "name": "tooltip-text",
+        "value": {
+          "light": "{white}",
+          "dark": "{black}"
+        },
+        "usage": "Text on `tooltip-bg`."
+      },
+      {
+        "name": "text",
+        "value": {
+          "light": "{black}",
+          "dark": "{white}"
+        },
+        "usage": "Body and heading text on `page-bg`, `surface`, `surface-muted` and the glass surfaces."
+      },
+      {
+        "name": "text-muted",
+        "value": {
+          "light": "rgba(0, 0, 0, 0.6)",
+          "dark": "rgba(255, 255, 255, 0.6)"
+        },
+        "usage": "Secondary text: help text, dates, descriptions, inactive tabs. The blog's `opacity-60`. Reads on `page-bg`, `surface` and `surface-muted`."
+      },
+      {
+        "name": "text-disabled",
+        "value": {
+          "light": "rgba(0, 0, 0, 0.38)",
+          "dark": "rgba(255, 255, 255, 0.38)"
+        },
+        "usage": "Disabled labels and values (exempt from contrast minimums). Never for content."
+      },
+      {
+        "name": "text-brand",
+        "value": {
+          "light": "{primary-700}",
+          "dark": "{primary-300}"
+        },
+        "usage": "Brand-colored text and icons: ghost buttons, active page links, tab focus. On `page-bg`, `surface`, `surface-muted`."
+      },
+      {
+        "name": "border",
+        "value": {
+          "light": "{secondary-200}",
+          "dark": "{secondary-800}"
+        },
+        "usage": "Decorative edges: card outlines, dividers, tag outlines. Not for control edges (too faint)."
+      },
+      {
+        "name": "border-control",
+        "value": {
+          "light": "{secondary-500}",
+          "dark": "{secondary-500}"
+        },
+        "usage": "Edges of inputs, selects, checkboxes, radios and the off Switch track. Meets 3:1 on `surface` in both themes."
+      },
+      {
+        "name": "border-control-hover",
+        "value": {
+          "light": "{secondary-600}",
+          "dark": "{secondary-400}"
+        },
+        "usage": "Hovered control edge."
+      },
+      {
+        "name": "divider",
+        "value": {
+          "light": "rgba(0, 0, 0, 0.1)",
+          "dark": "rgba(255, 255, 255, 0.1)"
+        },
+        "usage": "Hairline separators (the blog's `border-black/10 dark:border-white/10`)."
+      },
+      {
+        "name": "focus-ring",
+        "value": {
+          "light": "{primary-600}",
+          "dark": "{primary-400}"
+        },
+        "usage": "2px focus outline on every interactive element, offset 2px (controls: drawn on the edge)."
+      },
+      {
+        "name": "action",
+        "value": {
+          "light": "{primary-700}",
+          "dark": "{primary-700}"
+        },
+        "usage": "Primary buttons, current page, checked controls' fill: the blog's pill button (`bg-primary-700`)."
+      },
+      {
+        "name": "action-hover",
+        "value": {
+          "light": "{primary-800}",
+          "dark": "{primary-800}"
+        },
+        "usage": "Hovered `action`. Darker than the blog's `primary-500` hover so white text stays readable."
+      },
+      {
+        "name": "on-action",
+        "value": {
+          "light": "{white}",
+          "dark": "{white}"
+        },
+        "usage": "Text and icons on `action`, `action-hover`, `control-checked`, `danger`."
+      },
+      {
+        "name": "action-subtle",
+        "value": {
+          "light": "{primary-100}",
+          "dark": "{primary-950}"
+        },
+        "usage": "Secondary buttons and avatar fallbacks."
+      },
+      {
+        "name": "action-subtle-hover",
+        "value": {
+          "light": "{primary-200}",
+          "dark": "{primary-900}"
+        },
+        "usage": "Hovered `action-subtle`."
+      },
+      {
+        "name": "on-action-subtle",
+        "value": {
+          "light": "{primary-800}",
+          "dark": "{primary-200}"
+        },
+        "usage": "Text on `action-subtle`."
+      },
+      {
+        "name": "control-checked",
+        "value": {
+          "light": "{primary-700}",
+          "dark": "{primary-600}"
+        },
+        "usage": "Fill of a checked Checkbox, Radio dot and on Switch track; Progress bar."
+      },
+      {
+        "name": "link",
+        "value": {
+          "light": "{accent-700}",
+          "dark": "{accent-400}"
+        },
+        "usage": "Inline text links, with a dashed `link-border` underline. One step darker than the blog's `accent-600` so it reads at body size."
+      },
+      {
+        "name": "link-border",
+        "value": {
+          "light": "{accent-300}",
+          "dark": "{accent-800}"
+        },
+        "usage": "Dashed underline under `link` (the blog's `prose-a:border-dashed`)."
+      },
+      {
+        "name": "link-hover-bg",
+        "value": {
+          "light": "{accent-100}",
+          "dark": "{accent-950}"
+        },
+        "usage": "Tint behind a hovered link (the blog's `.prose a:hover`)."
+      },
+      {
+        "name": "link-hover-border",
+        "value": {
+          "light": "{accent-500}",
+          "dark": "{accent-600}"
+        },
+        "usage": "Underline of a hovered link."
+      },
+      {
+        "name": "danger",
+        "value": {
+          "light": "{error-600}",
+          "dark": "{error-600}"
+        },
+        "usage": "Destructive buttons."
+      },
+      {
+        "name": "danger-hover",
+        "value": {
+          "light": "{error-700}",
+          "dark": "{error-700}"
+        },
+        "usage": "Hovered `danger`."
+      },
+      {
+        "name": "info-surface",
+        "value": {
+          "light": "{primary-50}",
+          "dark": "{primary-950}"
+        },
+        "usage": "Info Alert fill."
+      },
+      {
+        "name": "info-border",
+        "value": {
+          "light": "{primary-200}",
+          "dark": "{primary-800}"
+        },
+        "usage": "Info Alert edge."
+      },
+      {
+        "name": "info-text",
+        "value": {
+          "light": "{primary-800}",
+          "dark": "{primary-200}"
+        },
+        "usage": "Text and icon on `info-surface`."
+      },
+      {
+        "name": "warning-surface",
+        "value": {
+          "light": "{warning-50}",
+          "dark": "{warning-950}"
+        },
+        "usage": "Warning Alert and Badge fill."
+      },
+      {
+        "name": "warning-border",
+        "value": {
+          "light": "{warning-300}",
+          "dark": "{warning-800}"
+        },
+        "usage": "Warning Alert edge."
+      },
+      {
+        "name": "warning-text",
+        "value": {
+          "light": "{warning-800}",
+          "dark": "{warning-200}"
+        },
+        "usage": "Text and icon on `warning-surface`."
+      },
+      {
+        "name": "error-surface",
+        "value": {
+          "light": "{error-50}",
+          "dark": "{error-950}"
+        },
+        "usage": "Error Alert and Badge fill."
+      },
+      {
+        "name": "error-border",
+        "value": {
+          "light": "{error-300}",
+          "dark": "{error-800}"
+        },
+        "usage": "Error Alert edge."
+      },
+      {
+        "name": "error-text",
+        "value": {
+          "light": "{error-700}",
+          "dark": "{error-300}"
+        },
+        "usage": "Text and icon on `error-surface`; Field error messages on `page-bg` / `surface`."
+      },
+      {
+        "name": "error-control",
+        "value": {
+          "light": "{error-600}",
+          "dark": "{error-400}"
+        },
+        "usage": "Edge of an invalid input."
+      },
+      {
+        "name": "highlight",
+        "value": {
+          "light": "{accent-100}",
+          "dark": "{accent-950}"
+        },
+        "usage": "Accent Badge fill: Koi's amber in a small dose."
+      },
+      {
+        "name": "on-highlight",
+        "value": {
+          "light": "{accent-800}",
+          "dark": "{accent-200}"
+        },
+        "usage": "Text on `highlight`."
+      },
+      {
+        "name": "nav-item-text",
+        "value": {
+          "light": "{secondary-700}",
+          "dark": "{secondary-300}"
+        },
+        "usage": "NavMenu items at rest, on page-bg, surface and the nav hover/active fills."
+      },
+      {
+        "name": "nav-item-hover",
+        "value": {
+          "light": "{secondary-50}",
+          "dark": "{secondary-900}"
+        },
+        "usage": "Hovered NavMenu item."
+      },
+      {
+        "name": "table-row-hover",
+        "value": {
+          "light": "{secondary-50}",
+          "dark": "{secondary-800 / 0.5}"
+        },
+        "usage": "Hovered table row. A step lighter than `surface-muted`, the ghost-button hover fill, so a hovered button still stands out in a hovered row."
+      },
+      {
+        "name": "nav-item-active",
+        "value": {
+          "light": "{secondary-100}",
+          "dark": "{secondary-800}"
+        },
+        "usage": "The current NavMenu item, with bold `text`."
+      },
+      {
+        "name": "skeleton",
+        "value": {
+          "light": "{secondary-100}",
+          "dark": "{secondary-800}"
+        },
+        "usage": "Skeleton placeholder fill. Reads on `page-bg` and `surface`."
+      },
+      {
+        "name": "skeleton-highlight",
+        "value": {
+          "light": "{secondary-50}",
+          "dark": "{secondary-700}"
+        },
+        "usage": "The shimmer band that sweeps across Skeleton placeholders."
+      },
+      {
+        "name": "prose-text",
+        "value": {
+          "light": "{secondary-700}",
+          "dark": "{secondary-300}"
+        },
+        "usage": "Running text inside Prose (the blog's `prose-slate` body, a step softer than `text`). Headings, bold and inline code inside Prose stay `text`."
+      },
+      {
+        "name": "code-block-bg",
+        "value": {
+          "light": "{secondary-800}",
+          "dark": "{secondary-800}"
+        },
+        "usage": "Code block fill inside Prose: dark in both themes, as in the blog's `prose-slate`. Dark theme lifts it to the 800 step instead of Tailwind's `black / 0.5`, which vanished against `page-bg`."
+      },
+      {
+        "name": "code-block-text",
+        "value": {
+          "light": "{secondary-200}",
+          "dark": "{secondary-300}"
+        },
+        "usage": "Text on `code-block-bg`."
+      },
+      {
+        "name": "primary-solid",
+        "value": {
+          "light": "{action}",
+          "dark": "{action}"
+        },
+        "usage": "Solid Button fill, color=\"primary\"."
+      },
+      {
+        "name": "primary-solid-hover",
+        "value": {
+          "light": "{action-hover}",
+          "dark": "{action-hover}"
+        },
+        "usage": "Hovered solid fill, color=\"primary\"."
+      },
+      {
+        "name": "on-primary-solid",
+        "value": {
+          "light": "{on-action}",
+          "dark": "{on-action}"
+        },
+        "usage": "Text and icons on the solid fill, color=\"primary\"."
+      },
+      {
+        "name": "primary-soft",
+        "value": {
+          "light": "{action-subtle}",
+          "dark": "{action-subtle}"
+        },
+        "usage": "Soft Button fill; also the hover fill of outline and ghost, color=\"primary\"."
+      },
+      {
+        "name": "primary-soft-hover",
+        "value": {
+          "light": "{action-subtle-hover}",
+          "dark": "{action-subtle-hover}"
+        },
+        "usage": "Hovered soft fill, color=\"primary\"."
+      },
+      {
+        "name": "on-primary-soft",
+        "value": {
+          "light": "{on-action-subtle}",
+          "dark": "{on-action-subtle}"
+        },
+        "usage": "Text on the soft fill, color=\"primary\"."
+      },
+      {
+        "name": "primary-fg",
+        "value": {
+          "light": "{text-brand}",
+          "dark": "{text-brand}"
+        },
+        "usage": "Text and icons of outline and ghost Buttons, color=\"primary\"."
+      },
+      {
+        "name": "primary-edge",
+        "value": {
+          "light": "{primary-600}",
+          "dark": "{primary-400}"
+        },
+        "usage": "Outline Button edge (3:1+ on page-bg and surface), color=\"primary\"."
+      },
+      {
+        "name": "accent-solid",
+        "value": {
+          "light": "{accent-400}",
+          "dark": "{accent-400}"
+        },
+        "usage": "Solid Button fill, color=\"accent\"."
+      },
+      {
+        "name": "accent-solid-hover",
+        "value": {
+          "light": "{accent-300}",
+          "dark": "{accent-300}"
+        },
+        "usage": "Hovered solid fill, color=\"accent\"."
+      },
+      {
+        "name": "on-accent-solid",
+        "value": {
+          "light": "{accent-950}",
+          "dark": "{accent-950}"
+        },
+        "usage": "Text and icons on the solid fill, color=\"accent\"."
+      },
+      {
+        "name": "accent-soft",
+        "value": {
+          "light": "{accent-100}",
+          "dark": "{accent-950}"
+        },
+        "usage": "Soft Button fill; also the hover fill of outline and ghost, color=\"accent\"."
+      },
+      {
+        "name": "accent-soft-hover",
+        "value": {
+          "light": "{accent-200}",
+          "dark": "{accent-900}"
+        },
+        "usage": "Hovered soft fill, color=\"accent\"."
+      },
+      {
+        "name": "on-accent-soft",
+        "value": {
+          "light": "{accent-800}",
+          "dark": "{accent-200}"
+        },
+        "usage": "Text on the soft fill, color=\"accent\"."
+      },
+      {
+        "name": "accent-fg",
+        "value": {
+          "light": "{accent-700}",
+          "dark": "{accent-400}"
+        },
+        "usage": "Text and icons of outline and ghost Buttons, color=\"accent\"."
+      },
+      {
+        "name": "accent-edge",
+        "value": {
+          "light": "{accent-600}",
+          "dark": "{accent-500}"
+        },
+        "usage": "Outline Button edge (3:1+ on page-bg and surface), color=\"accent\"."
+      },
+      {
+        "name": "secondary-solid",
+        "value": {
+          "light": "{secondary-700}",
+          "dark": "{secondary-200}"
+        },
+        "usage": "Solid Button fill, color=\"secondary\"."
+      },
+      {
+        "name": "secondary-solid-hover",
+        "value": {
+          "light": "{secondary-800}",
+          "dark": "{secondary-300}"
+        },
+        "usage": "Hovered solid fill, color=\"secondary\"."
+      },
+      {
+        "name": "on-secondary-solid",
+        "value": {
+          "light": "{white}",
+          "dark": "{secondary-950}"
+        },
+        "usage": "Text and icons on the solid fill, color=\"secondary\"."
+      },
+      {
+        "name": "secondary-soft",
+        "value": {
+          "light": "{secondary-100}",
+          "dark": "{secondary-800}"
+        },
+        "usage": "Soft Button fill; also the hover fill of outline and ghost, color=\"secondary\"."
+      },
+      {
+        "name": "secondary-soft-hover",
+        "value": {
+          "light": "{secondary-200}",
+          "dark": "{secondary-700}"
+        },
+        "usage": "Hovered soft fill, color=\"secondary\"."
+      },
+      {
+        "name": "on-secondary-soft",
+        "value": {
+          "light": "{secondary-800}",
+          "dark": "{secondary-100}"
+        },
+        "usage": "Text on the soft fill, color=\"secondary\"."
+      },
+      {
+        "name": "secondary-fg",
+        "value": {
+          "light": "{secondary-700}",
+          "dark": "{secondary-300}"
+        },
+        "usage": "Text and icons of outline and ghost Buttons, color=\"secondary\"."
+      },
+      {
+        "name": "secondary-edge",
+        "value": {
+          "light": "{secondary-500}",
+          "dark": "{secondary-500}"
+        },
+        "usage": "Outline Button edge (3:1+ on page-bg and surface), color=\"secondary\"."
+      },
+      {
+        "name": "warning-solid",
+        "value": {
+          "light": "{warning-400}",
+          "dark": "{warning-400}"
+        },
+        "usage": "Solid Button fill, color=\"warning\"."
+      },
+      {
+        "name": "warning-solid-hover",
+        "value": {
+          "light": "{warning-300}",
+          "dark": "{warning-300}"
+        },
+        "usage": "Hovered solid fill, color=\"warning\"."
+      },
+      {
+        "name": "on-warning-solid",
+        "value": {
+          "light": "{warning-950}",
+          "dark": "{warning-950}"
+        },
+        "usage": "Text and icons on the solid fill, color=\"warning\"."
+      },
+      {
+        "name": "warning-soft",
+        "value": {
+          "light": "{warning-100}",
+          "dark": "{warning-950}"
+        },
+        "usage": "Soft Button fill; also the hover fill of outline and ghost, color=\"warning\"."
+      },
+      {
+        "name": "warning-soft-hover",
+        "value": {
+          "light": "{warning-200}",
+          "dark": "{warning-900}"
+        },
+        "usage": "Hovered soft fill, color=\"warning\"."
+      },
+      {
+        "name": "on-warning-soft",
+        "value": {
+          "light": "{warning-800}",
+          "dark": "{warning-200}"
+        },
+        "usage": "Text on the soft fill, color=\"warning\"."
+      },
+      {
+        "name": "warning-fg",
+        "value": {
+          "light": "{warning-700}",
+          "dark": "{warning-400}"
+        },
+        "usage": "Text and icons of outline and ghost Buttons, color=\"warning\"."
+      },
+      {
+        "name": "warning-edge",
+        "value": {
+          "light": "{warning-700}",
+          "dark": "{warning-500}"
+        },
+        "usage": "Outline Button edge (3:1+ on page-bg and surface), color=\"warning\"."
+      },
+      {
+        "name": "error-solid",
+        "value": {
+          "light": "{danger}",
+          "dark": "{danger}"
+        },
+        "usage": "Solid Button fill, color=\"error\"."
+      },
+      {
+        "name": "error-solid-hover",
+        "value": {
+          "light": "{danger-hover}",
+          "dark": "{danger-hover}"
+        },
+        "usage": "Hovered solid fill, color=\"error\"."
+      },
+      {
+        "name": "on-error-solid",
+        "value": {
+          "light": "{on-action}",
+          "dark": "{on-action}"
+        },
+        "usage": "Text and icons on the solid fill, color=\"error\"."
+      },
+      {
+        "name": "error-soft",
+        "value": {
+          "light": "{error-100}",
+          "dark": "{error-950}"
+        },
+        "usage": "Soft Button fill; also the hover fill of outline and ghost, color=\"error\"."
+      },
+      {
+        "name": "error-soft-hover",
+        "value": {
+          "light": "{error-200}",
+          "dark": "{error-900}"
+        },
+        "usage": "Hovered soft fill, color=\"error\"."
+      },
+      {
+        "name": "on-error-soft",
+        "value": {
+          "light": "{error-800}",
+          "dark": "{error-200}"
+        },
+        "usage": "Text on the soft fill, color=\"error\"."
+      },
+      {
+        "name": "error-fg",
+        "value": {
+          "light": "{error-700}",
+          "dark": "{error-400}"
+        },
+        "usage": "Text and icons of outline and ghost Buttons, color=\"error\"."
+      },
+      {
+        "name": "error-edge",
+        "value": {
+          "light": "{error-600}",
+          "dark": "{error-400}"
+        },
+        "usage": "Outline Button edge (3:1+ on page-bg and surface), color=\"error\"."
+      },
+      {
+        "name": "primary-50",
+        "value": "oklch(97.7% 0.013 236.62)",
+        "usage": "Brand primary, step 50: Tailwind sky-50 (global.css `--color-primary-50: var(--color-sky-50)`)."
+      },
+      {
+        "name": "primary-100",
+        "value": "oklch(95.1% 0.026 236.824)",
+        "usage": "Brand primary, step 100: Tailwind sky-100 (global.css `--color-primary-100: var(--color-sky-100)`)."
+      },
+      {
+        "name": "primary-200",
+        "value": "oklch(90.1% 0.058 230.902)",
+        "usage": "Brand primary, step 200: Tailwind sky-200 (global.css `--color-primary-200: var(--color-sky-200)`)."
+      },
+      {
+        "name": "primary-300",
+        "value": "oklch(82.8% 0.111 230.318)",
+        "usage": "Brand primary, step 300: Tailwind sky-300 (global.css `--color-primary-300: var(--color-sky-300)`)."
+      },
+      {
+        "name": "primary-400",
+        "value": "oklch(74.6% 0.16 232.661)",
+        "usage": "Brand primary, step 400: Tailwind sky-400 (global.css `--color-primary-400: var(--color-sky-400)`)."
+      },
+      {
+        "name": "primary-500",
+        "value": "oklch(68.5% 0.169 237.323)",
+        "usage": "Brand primary, step 500: Tailwind sky-500 (global.css `--color-primary-500: var(--color-sky-500)`)."
+      },
+      {
+        "name": "primary-600",
+        "value": "oklch(58.8% 0.158 241.966)",
+        "usage": "Brand primary, step 600: Tailwind sky-600 (global.css `--color-primary-600: var(--color-sky-600)`)."
+      },
+      {
+        "name": "primary-700",
+        "value": "oklch(50% 0.134 242.749)",
+        "usage": "Brand primary, step 700: Tailwind sky-700 (global.css `--color-primary-700: var(--color-sky-700)`)."
+      },
+      {
+        "name": "primary-800",
+        "value": "oklch(44.3% 0.11 240.79)",
+        "usage": "Brand primary, step 800: Tailwind sky-800 (global.css `--color-primary-800: var(--color-sky-800)`)."
+      },
+      {
+        "name": "primary-900",
+        "value": "oklch(39.1% 0.09 240.876)",
+        "usage": "Brand primary, step 900: Tailwind sky-900 (global.css `--color-primary-900: var(--color-sky-900)`)."
+      },
+      {
+        "name": "primary-950",
+        "value": "oklch(29.3% 0.066 243.157)",
+        "usage": "Brand primary, step 950: Tailwind sky-950 (global.css `--color-primary-950: var(--color-sky-950)`)."
+      },
+      {
+        "name": "accent-50",
+        "value": "oklch(98.7% 0.022 95.277)",
+        "usage": "Brand accent, step 50: Tailwind amber-50 (global.css `--color-accent-50: var(--color-amber-50)`)."
+      },
+      {
+        "name": "accent-100",
+        "value": "oklch(96.2% 0.059 95.617)",
+        "usage": "Brand accent, step 100: Tailwind amber-100 (global.css `--color-accent-100: var(--color-amber-100)`)."
+      },
+      {
+        "name": "accent-200",
+        "value": "oklch(92.4% 0.12 95.746)",
+        "usage": "Brand accent, step 200: Tailwind amber-200 (global.css `--color-accent-200: var(--color-amber-200)`)."
+      },
+      {
+        "name": "accent-300",
+        "value": "oklch(87.9% 0.169 91.605)",
+        "usage": "Brand accent, step 300: Tailwind amber-300 (global.css `--color-accent-300: var(--color-amber-300)`)."
+      },
+      {
+        "name": "accent-400",
+        "value": "oklch(82.8% 0.189 84.429)",
+        "usage": "Brand accent, step 400: Tailwind amber-400 (global.css `--color-accent-400: var(--color-amber-400)`)."
+      },
+      {
+        "name": "accent-500",
+        "value": "oklch(76.9% 0.188 70.08)",
+        "usage": "Brand accent, step 500: Tailwind amber-500 (global.css `--color-accent-500: var(--color-amber-500)`)."
+      },
+      {
+        "name": "accent-600",
+        "value": "oklch(66.6% 0.179 58.318)",
+        "usage": "Brand accent, step 600: Tailwind amber-600 (global.css `--color-accent-600: var(--color-amber-600)`)."
+      },
+      {
+        "name": "accent-700",
+        "value": "oklch(55.5% 0.163 48.998)",
+        "usage": "Brand accent, step 700: Tailwind amber-700 (global.css `--color-accent-700: var(--color-amber-700)`)."
+      },
+      {
+        "name": "accent-800",
+        "value": "oklch(47.3% 0.137 46.201)",
+        "usage": "Brand accent, step 800: Tailwind amber-800 (global.css `--color-accent-800: var(--color-amber-800)`)."
+      },
+      {
+        "name": "accent-900",
+        "value": "oklch(41.4% 0.112 45.904)",
+        "usage": "Brand accent, step 900: Tailwind amber-900 (global.css `--color-accent-900: var(--color-amber-900)`)."
+      },
+      {
+        "name": "accent-950",
+        "value": "oklch(27.9% 0.077 45.635)",
+        "usage": "Brand accent, step 950: Tailwind amber-950 (global.css `--color-accent-950: var(--color-amber-950)`)."
+      },
+      {
+        "name": "secondary-50",
+        "value": "oklch(98.5% 0.002 247.839)",
+        "usage": "Neutral secondary, step 50: Tailwind gray-50. 1.0:1 on white, 19.3:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-100",
+        "value": "oklch(96.7% 0.003 264.542)",
+        "usage": "Neutral secondary, step 100: Tailwind gray-100. 1.1:1 on white, 18.3:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-200",
+        "value": "oklch(92.8% 0.006 264.531)",
+        "usage": "Neutral secondary, step 200: Tailwind gray-200. 1.2:1 on white, 16.3:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-300",
+        "value": "oklch(87.2% 0.01 258.338)",
+        "usage": "Neutral secondary, step 300: Tailwind gray-300. 1.5:1 on white, 13.7:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-400",
+        "value": "oklch(70.7% 0.022 261.325)",
+        "usage": "Neutral secondary, step 400: Tailwind gray-400. 2.6:1 on white, 7.7:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-500",
+        "value": "oklch(55.1% 0.027 264.364)",
+        "usage": "Neutral secondary, step 500: Tailwind gray-500. 4.8:1 on white, 4.2:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-600",
+        "value": "oklch(44.6% 0.03 256.802)",
+        "usage": "Neutral secondary, step 600: Tailwind gray-600. 7.6:1 on white, 2.7:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-700",
+        "value": "oklch(37.3% 0.034 259.733)",
+        "usage": "Neutral secondary, step 700: Tailwind gray-700. 10.3:1 on white, 2.0:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-800",
+        "value": "oklch(27.8% 0.033 256.848)",
+        "usage": "Neutral secondary, step 800: Tailwind gray-800. 14.7:1 on white, 1.4:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-900",
+        "value": "oklch(21% 0.034 264.665)",
+        "usage": "Neutral secondary, step 900: Tailwind gray-900. 17.7:1 on white, 1.1:1 on `secondary-950`."
+      },
+      {
+        "name": "secondary-950",
+        "value": "oklch(13% 0.028 261.692)",
+        "usage": "Neutral secondary, step 950: Tailwind gray-950. 20.1:1 on white, 1.0:1 on `secondary-950`. The dark-theme page ground (`page-bg`)."
+      },
+      {
+        "name": "warning-50",
+        "value": "oklch(98.7% 0.026 102.212)",
+        "usage": "Warning, step 50: Tailwind yellow-50. 1.0:1 on white, 19.4:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-100",
+        "value": "oklch(97.3% 0.071 103.193)",
+        "usage": "Warning, step 100: Tailwind yellow-100. 1.1:1 on white, 18.7:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-200",
+        "value": "oklch(94.5% 0.129 101.54)",
+        "usage": "Warning, step 200: Tailwind yellow-200. 1.2:1 on white, 17.3:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-300",
+        "value": "oklch(90.5% 0.182 98.111)",
+        "usage": "Warning, step 300: Tailwind yellow-300. 1.3:1 on white, 15.2:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-400",
+        "value": "oklch(85.2% 0.199 91.936)",
+        "usage": "Warning, step 400: Tailwind yellow-400. 1.6:1 on white, 12.8:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-500",
+        "value": "oklch(79.5% 0.184 86.047)",
+        "usage": "Warning, step 500: Tailwind yellow-500. 1.9:1 on white, 10.5:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-600",
+        "value": "oklch(68.1% 0.162 75.834)",
+        "usage": "Warning, step 600: Tailwind yellow-600. 2.9:1 on white, 6.9:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-700",
+        "value": "oklch(55.4% 0.135 66.442)",
+        "usage": "Warning, step 700: Tailwind yellow-700. 4.9:1 on white, 4.1:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-800",
+        "value": "oklch(47.6% 0.114 61.907)",
+        "usage": "Warning, step 800: Tailwind yellow-800. 6.9:1 on white, 2.9:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-900",
+        "value": "oklch(42.1% 0.095 57.708)",
+        "usage": "Warning, step 900: Tailwind yellow-900. 8.7:1 on white, 2.3:1 on `secondary-950`."
+      },
+      {
+        "name": "warning-950",
+        "value": "oklch(28.6% 0.066 53.813)",
+        "usage": "Warning, step 950: Tailwind yellow-950. 14.6:1 on white, 1.4:1 on `secondary-950`."
+      },
+      {
+        "name": "error-50",
+        "value": "oklch(97.1% 0.013 17.38)",
+        "usage": "Error, step 50: Tailwind red-50. 1.1:1 on white, 18.4:1 on `secondary-950`."
+      },
+      {
+        "name": "error-100",
+        "value": "oklch(93.6% 0.032 17.717)",
+        "usage": "Error, step 100: Tailwind red-100. 1.2:1 on white, 16.5:1 on `secondary-950`."
+      },
+      {
+        "name": "error-200",
+        "value": "oklch(88.5% 0.062 18.334)",
+        "usage": "Error, step 200: Tailwind red-200. 1.4:1 on white, 13.9:1 on `secondary-950`."
+      },
+      {
+        "name": "error-300",
+        "value": "oklch(80.8% 0.114 19.571)",
+        "usage": "Error, step 300: Tailwind red-300. 1.9:1 on white, 10.5:1 on `secondary-950`."
+      },
+      {
+        "name": "error-400",
+        "value": "oklch(70.4% 0.191 22.216)",
+        "usage": "Error, step 400: Tailwind red-400. 2.9:1 on white, 7.0:1 on `secondary-950`."
+      },
+      {
+        "name": "error-500",
+        "value": "oklch(63.7% 0.237 25.331)",
+        "usage": "Error, step 500: Tailwind red-500. 3.8:1 on white, 5.3:1 on `secondary-950`."
+      },
+      {
+        "name": "error-600",
+        "value": "oklch(57.7% 0.245 27.325)",
+        "usage": "Error, step 600: Tailwind red-600. 4.8:1 on white, 4.2:1 on `secondary-950`."
+      },
+      {
+        "name": "error-700",
+        "value": "oklch(50.5% 0.213 27.518)",
+        "usage": "Error, step 700: Tailwind red-700. 6.4:1 on white, 3.1:1 on `secondary-950`."
+      },
+      {
+        "name": "error-800",
+        "value": "oklch(44.4% 0.177 26.899)",
+        "usage": "Error, step 800: Tailwind red-800. 8.4:1 on white, 2.4:1 on `secondary-950`."
+      },
+      {
+        "name": "error-900",
+        "value": "oklch(39.6% 0.141 25.723)",
+        "usage": "Error, step 900: Tailwind red-900. 10.1:1 on white, 2.0:1 on `secondary-950`."
+      },
+      {
+        "name": "error-950",
+        "value": "oklch(25.8% 0.092 26.042)",
+        "usage": "Error, step 950: Tailwind red-950. 16.1:1 on white, 1.2:1 on `secondary-950`."
+      },
+      {
+        "name": "white",
+        "value": "#ffffff",
+        "usage": "Light page ground; text in dark theme; text on buttons."
+      },
+      {
+        "name": "black",
+        "value": "#000000",
+        "usage": "Text in light theme."
+      }
+    ]
+  },
+  "type": {
+    "fonts": [],
+    "familiesNote": "sans is what every text style uses. With <html data-font=\"chill\"> it resolves to chill instead (load @tuuject/koi-tokens/fonts.css for the face).",
+    "families": {
+      "sans": "-apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif",
+      "chill": "\"ChillRoundF\", -apple-system, BlinkMacSystemFont, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif"
+    },
+    "groups": [
+      {
+        "name": "Headings",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "display",
+            "fontSize": "30px",
+            "lineHeight": "38px",
+            "fontWeight": 700,
+            "usage": "One per page at most: hero and site titles.",
+            "sample": "Astro Koi"
+          },
+          {
+            "name": "heading-1",
+            "fontSize": "24px",
+            "lineHeight": "32px",
+            "fontWeight": 700,
+            "usage": "Page titles.",
+            "sample": "又一个基于 Astro 的博客站点"
+          },
+          {
+            "name": "heading-2",
+            "fontSize": "20px",
+            "lineHeight": "28px",
+            "fontWeight": 700,
+            "usage": "Section titles; Dialog titles.",
+            "sample": "Markdown Style Guide"
+          },
+          {
+            "name": "heading-3",
+            "fontSize": "16px",
+            "lineHeight": "24px",
+            "fontWeight": 700,
+            "usage": "Card titles, the NavMenu product name, sub-sections.",
+            "sample": "朋友们"
+          }
+        ]
+      },
+      {
+        "name": "Text",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "prose",
+            "fontSize": "16px",
+            "lineHeight": 1.75,
+            "fontWeight": 400,
+            "usage": "Long-form reading text only (articles, docs). Everything else is `body`.",
+            "sample": "这是一段正文。This is body copy."
+          },
+          {
+            "name": "body",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": 400,
+            "usage": "The base size: UI text, inputs, alerts, menus, table cells.",
+            "sample": "Oct 7, 2026"
+          },
+          {
+            "name": "small",
+            "fontSize": "12px",
+            "lineHeight": "16px",
+            "fontWeight": 400,
+            "usage": "Help text, descriptions, tooltips, tags, section labels.",
+            "sample": "用于说明的辅助文字"
+          },
+          {
+            "name": "caption",
+            "fontSize": "12px",
+            "lineHeight": "16px",
+            "fontWeight": 700,
+            "usage": "Badges and tiny counters only.",
+            "sample": "NEW"
+          }
+        ]
+      },
+      {
+        "name": "Controls",
+        "family": "sans",
+        "styles": [
+          {
+            "name": "label",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": 700,
+            "usage": "Field labels, table headers, Alert and Toast titles.",
+            "sample": "电子邮箱"
+          },
+          {
+            "name": "button",
+            "fontSize": "14px",
+            "lineHeight": "20px",
+            "fontWeight": 600,
+            "usage": "Button labels, md and lg.",
+            "sample": "下一页"
+          },
+          {
+            "name": "button-sm",
+            "fontSize": "12px",
+            "lineHeight": "16px",
+            "fontWeight": 600,
+            "usage": "Small button labels, except in table cells.",
+            "sample": "保存"
+          }
+        ]
+      }
+    ]
+  },
+  "spacing": {
+    "tokens": [
+      {
+        "name": "space-1",
+        "value": "4px",
+        "usage": "Icon-to-label gap inside badges; Tailwind's unit."
+      },
+      {
+        "name": "space-2",
+        "value": "8px",
+        "usage": "Gap between an icon and its label; between a label and its control."
+      },
+      {
+        "name": "space-3",
+        "value": "12px",
+        "usage": "Inner padding of compact containers (tooltips, tab track); stack gap in forms' option lists."
+      },
+      {
+        "name": "space-4",
+        "value": "16px",
+        "usage": "Gap between fields in a form; Alert padding."
+      },
+      {
+        "name": "space-5",
+        "value": "20px",
+        "usage": "Content padding on mobile (the blog's `p-5`)."
+      },
+      {
+        "name": "space-6",
+        "value": "24px",
+        "usage": "Card and Dialog padding; content padding from md up (`md:p-6`)."
+      },
+      {
+        "name": "space-8",
+        "value": "32px",
+        "usage": "Gap between groups and between cards (the blog's `gap-8`)."
+      },
+      {
+        "name": "space-10",
+        "value": "40px",
+        "usage": "Space between list items on mobile (`my-10`)."
+      },
+      {
+        "name": "space-12",
+        "value": "48px",
+        "usage": "Space between list items from md up (`md:my-12`)."
+      },
+      {
+        "name": "space-16",
+        "value": "64px",
+        "usage": "Gap between page sections."
+      }
+    ]
+  },
+  "radius": {
+    "tokens": [
+      {
+        "name": "radius-sm",
+        "value": "6px",
+        "usage": "Checkbox boxes."
+      },
+      {
+        "name": "radius-lg",
+        "value": "8px",
+        "usage": "Buttons and icon buttons with `shape=\"rounded\"` (Tailwind `rounded-lg`); tooltips; images inside text."
+      },
+      {
+        "name": "radius-xl",
+        "value": "12px",
+        "usage": "Inputs, textareas, selects, alerts, square avatars (the blog's friend avatars)."
+      },
+      {
+        "name": "radius-2xl",
+        "value": "16px",
+        "usage": "Spare step between fields (12px) and panels (24px); not used by the components today."
+      },
+      {
+        "name": "radius-panel",
+        "value": "24px",
+        "usage": "Cards and toasts (the blog's `.koi-squircle-md`; 48px squircle where `corner-shape: squircle` is supported)."
+      },
+      {
+        "name": "radius-dialog",
+        "value": "32px",
+        "usage": "Dialog panels: `radius-lg` (8px) of the footer buttons plus `space-6` (24px) padding, so the panel corner and the button corner share a center and read as concentric."
+      },
+      {
+        "name": "radius-bar",
+        "value": "36px",
+        "usage": "Floating bars: the blog's nav pill (`rounded-[2.25rem]`)."
+      },
+      {
+        "name": "radius-full",
+        "value": "9999px",
+        "usage": "Buttons, icon buttons, badges, tags, switches, tab tracks, round avatars."
+      }
+    ]
+  },
+  "shadow": {
+    "tokens": [
+      {
+        "name": "shadow-raised",
+        "value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+        "usage": "The active tab and switch thumbs (`shadow-sm`). Not used on buttons, which are flat."
+      },
+      {
+        "name": "shadow-float",
+        "value": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        "usage": "Things floating over the page: dialogs, toasts, the nav pill (`shadow-2xl`)."
+      },
+      {
+        "name": "shadow-float-soft",
+        "value": "0 25px 50px -12px rgba(0, 0, 0, 0.15)",
+        "usage": "Docked floating chrome (the nav bar once scrolled)."
+      }
+    ]
+  },
+  "size": {
+    "note": "Fixed sizes components share.",
+    "tokens": [
+      {
+        "name": "control-sm",
+        "value": "28px",
+        "usage": "Small buttons, inputs, tags, avatars."
+      },
+      {
+        "name": "control-md",
+        "value": "36px",
+        "usage": "Default height of buttons, inputs, selects, tab buttons and NavMenu items."
+      },
+      {
+        "name": "control-lg",
+        "value": "44px",
+        "usage": "Large buttons (the blog's pagination pills), the tab track, the NavMenu logo box, large avatars."
+      },
+      {
+        "name": "content-max",
+        "value": "56rem",
+        "usage": "Max width of a reading column (`max-w-4xl`)."
+      },
+      {
+        "name": "icon",
+        "value": "16px",
+        "usage": "Icons beside 14px text: md/lg controls, alerts, toasts, NavMenu."
+      },
+      {
+        "name": "icon-sm",
+        "value": "14px",
+        "usage": "Icons in small controls and tags."
+      },
+      {
+        "name": "icon-xs",
+        "value": "12px",
+        "usage": "Icons beside 12px text: the checkbox tick, a field's error icon."
+      },
+      {
+        "name": "icon-lg",
+        "value": "18px",
+        "usage": "Icons beside 16px titles: toasts, the dialog's close button."
+      }
+    ]
+  },
+  "blur": {
+    "note": "Backdrop blur behind translucent surfaces.",
+    "tokens": [
+      {
+        "name": "blur-panel",
+        "value": "24px",
+        "usage": "Behind `surface-glass` and `backdrop` (`backdrop-blur-xl`)."
+      },
+      {
+        "name": "blur-float",
+        "value": "40px",
+        "usage": "Behind `surface-glass-tint` (`backdrop-blur-2xl`)."
+      }
+    ]
+  },
+  "layer": {
+    "note": "Stacking order of things that float over the page (z-index). A component's own internal stacking (a tab's indicator under its labels) stays inside it.",
+    "tokens": [
+      {
+        "name": "layer-dialog",
+        "value": 900,
+        "usage": "Dialog backdrop and popup."
+      },
+      {
+        "name": "layer-popup",
+        "value": 950,
+        "usage": "Panels opened from a trigger (SelectPanel), so they work inside a Dialog."
+      },
+      {
+        "name": "layer-toast",
+        "value": 1000,
+        "usage": "The toast stack, above everything else."
+      },
+      {
+        "name": "layer-tooltip",
+        "value": 1000,
+        "usage": "Tooltips: above dialogs and popups."
+      }
+    ]
+  },
+  "component": {
+    "note": "Dimensions inside components, so every platform builds them the same: px unless noted, grouped by component. They come out as plain numbers in @tuuject/koi-tokens/dimensions (`components.switch.trackWidth`), not as CSS variables: they aren't themed and aren't meant for styling apps. Shared sizes (controls, icons, spacing, radii) are the groups above.",
+    "groups": [
+      {
+        "name": "focus-ring",
+        "usage": "The keyboard focus outline every focusable control draws.",
+        "tokens": [
+          {
+            "name": "width",
+            "value": "2px",
+            "usage": "Outline thickness."
+          },
+          {
+            "name": "offset",
+            "value": "2px",
+            "usage": "Gap between the control and its outline."
+          }
+        ]
+      },
+      {
+        "name": "stroke",
+        "usage": "Edge thicknesses.",
+        "tokens": [
+          {
+            "name": "hairline",
+            "value": "1px",
+            "usage": "Card, field, button and divider edges."
+          },
+          {
+            "name": "check",
+            "value": "1.5px",
+            "usage": "The checkbox and radio box edge: a little heavier so a 16px box reads at a glance."
+          }
+        ]
+      },
+      {
+        "name": "spinner",
+        "usage": "The loading ring: drawn on a 24 grid, so its stroke scales with it.",
+        "tokens": [
+          {
+            "name": "size-sm",
+            "value": "16px",
+            "usage": "In small buttons and beside 12px text."
+          },
+          {
+            "name": "size-md",
+            "value": "20px",
+            "usage": "Default."
+          },
+          {
+            "name": "size-lg",
+            "value": "32px",
+            "usage": "Loading a whole panel."
+          },
+          {
+            "name": "stroke",
+            "value": "3",
+            "usage": "Ring and arc stroke on the 24 grid (not px)."
+          }
+        ]
+      },
+      {
+        "name": "close-button",
+        "usage": "The round × button in alerts and toasts.",
+        "tokens": [
+          {
+            "name": "size",
+            "value": "24px",
+            "usage": "Its width and height."
+          }
+        ]
+      },
+      {
+        "name": "popup",
+        "usage": "Panels that open from a trigger (SelectPanel).",
+        "tokens": [
+          {
+            "name": "offset",
+            "value": "4px",
+            "usage": "Gap between the trigger and the panel."
+          }
+        ]
+      },
+      {
+        "name": "field",
+        "usage": "What Input, Textarea, Select and SelectPanel share.",
+        "tokens": [
+          {
+            "name": "line-height",
+            "value": "20px",
+            "usage": "The text line inside a field (body)."
+          },
+          {
+            "name": "padding-x-sm",
+            "value": "10px",
+            "usage": "Side padding at control-sm."
+          },
+          {
+            "name": "padding-x-md",
+            "value": "12px",
+            "usage": "Side padding at control-md."
+          },
+          {
+            "name": "padding-x-lg",
+            "value": "14px",
+            "usage": "Side padding at control-lg."
+          },
+          {
+            "name": "gap",
+            "value": "6px",
+            "usage": "Between a Field's label, control, error and help (legacy; no spacing step is 6px)."
+          },
+          {
+            "name": "icon-offset",
+            "value": "2px",
+            "usage": "Moves a 12px error icon down to center it on the 16px help line."
+          },
+          {
+            "name": "chevron-inset",
+            "value": "10px",
+            "usage": "The native Select's chevron, from the end edge."
+          },
+          {
+            "name": "chevron-space",
+            "value": "36px",
+            "usage": "End padding that keeps the native Select's text clear of its chevron."
+          }
+        ]
+      },
+      {
+        "name": "textarea",
+        "usage": "Multi-line text field.",
+        "tokens": [
+          {
+            "name": "min-height",
+            "value": "80px",
+            "usage": "At least about three lines."
+          }
+        ]
+      },
+      {
+        "name": "table",
+        "usage": "Table and DataTable.",
+        "tokens": [
+          {
+            "name": "row-height",
+            "value": "48px",
+            "usage": "A body row's minimum height; cells keep their own padding, so taller content grows the row."
+          }
+        ]
+      },
+      {
+        "name": "badge",
+        "usage": "Status and count labels.",
+        "tokens": [
+          {
+            "name": "height",
+            "value": "22px",
+            "usage": "Its height."
+          },
+          {
+            "name": "padding-x",
+            "value": "10px",
+            "usage": "Side padding."
+          },
+          {
+            "name": "dot",
+            "value": "6px",
+            "usage": "The leading dot."
+          }
+        ]
+      },
+      {
+        "name": "avatar",
+        "usage": "Avatars; sm/md/lg take the control heights.",
+        "tokens": [
+          {
+            "name": "size-xl",
+            "value": "64px",
+            "usage": "The xl avatar."
+          },
+          {
+            "name": "font-sm",
+            "value": "12px",
+            "usage": "Initials at sm."
+          },
+          {
+            "name": "font-md",
+            "value": "14px",
+            "usage": "Initials at md."
+          },
+          {
+            "name": "font-lg",
+            "value": "16px",
+            "usage": "Initials at lg."
+          },
+          {
+            "name": "font-xl",
+            "value": "24px",
+            "usage": "Initials at xl."
+          }
+        ]
+      },
+      {
+        "name": "alert",
+        "usage": "Inline status messages.",
+        "tokens": [
+          {
+            "name": "icon-offset",
+            "value": "2px",
+            "usage": "Moves the 16px icon down to center it on the title's 20px line."
+          }
+        ]
+      },
+      {
+        "name": "dialog",
+        "usage": "Modal dialogs.",
+        "tokens": [
+          {
+            "name": "width-sm",
+            "value": "400px",
+            "usage": "Max width at sm."
+          },
+          {
+            "name": "width-md",
+            "value": "520px",
+            "usage": "Max width at md (default)."
+          },
+          {
+            "name": "width-lg",
+            "value": "720px",
+            "usage": "Max width at lg."
+          }
+        ]
+      },
+      {
+        "name": "checkbox",
+        "usage": "The 16px box Checkbox and RadioGroup share.",
+        "tokens": [
+          {
+            "name": "box",
+            "value": "16px",
+            "usage": "The box's width and height."
+          },
+          {
+            "name": "offset",
+            "value": "2px",
+            "usage": "Moves the box down to center it on the label's 20px first line."
+          }
+        ]
+      },
+      {
+        "name": "radio",
+        "usage": "RadioGroup's control (Checkbox's box, round).",
+        "tokens": [
+          {
+            "name": "dot",
+            "value": "6px",
+            "usage": "The checked dot."
+          }
+        ]
+      },
+      {
+        "name": "switch",
+        "usage": "The pill toggle. The thumb travels track-width − thumb − 2 × thumb-inset.",
+        "tokens": [
+          {
+            "name": "track-width",
+            "value": "36px",
+            "usage": "Track width."
+          },
+          {
+            "name": "track-height",
+            "value": "20px",
+            "usage": "Track height: one label line, so it lines up like the checkbox."
+          },
+          {
+            "name": "thumb",
+            "value": "14px",
+            "usage": "Thumb width and height."
+          },
+          {
+            "name": "thumb-inset",
+            "value": "3px",
+            "usage": "Gap between the thumb and the track's edge."
+          }
+        ]
+      },
+      {
+        "name": "progress",
+        "usage": "Progress bars.",
+        "tokens": [
+          {
+            "name": "track-sm",
+            "value": "4px",
+            "usage": "Track height at sm."
+          },
+          {
+            "name": "track-md",
+            "value": "8px",
+            "usage": "Track height at md (default)."
+          },
+          {
+            "name": "track-lg",
+            "value": "12px",
+            "usage": "Track height at lg."
+          }
+        ]
+      },
+      {
+        "name": "pagination",
+        "usage": "Page navigation.",
+        "tokens": [
+          {
+            "name": "gap-width",
+            "value": "24px",
+            "usage": "The … between page numbers."
+          }
+        ]
+      },
+      {
+        "name": "tag",
+        "usage": "Tags and filter chips.",
+        "tokens": [
+          {
+            "name": "padding-x",
+            "value": "10px",
+            "usage": "Side padding."
+          },
+          {
+            "name": "remove",
+            "value": "16px",
+            "usage": "The round × button."
+          },
+          {
+            "name": "remove-overhang",
+            "value": "4px",
+            "usage": "How far the × reaches into the end padding."
+          }
+        ]
+      },
+      {
+        "name": "toast",
+        "usage": "Toasts.",
+        "tokens": [
+          {
+            "name": "width",
+            "value": "360px",
+            "usage": "Width (narrower on small screens)."
+          },
+          {
+            "name": "icon-offset",
+            "value": "3px",
+            "usage": "Moves the 18px icon down to center it on the title's 24px line."
+          },
+          {
+            "name": "closable-inset",
+            "value": "44px",
+            "usage": "End padding when closable: space-3 + close-button + space-2."
+          },
+          {
+            "name": "enter-offset",
+            "value": "12px",
+            "usage": "How far a toast rises (or drops) as it enters."
+          }
+        ]
+      },
+      {
+        "name": "tooltip",
+        "usage": "Tooltips.",
+        "tokens": [
+          {
+            "name": "max-width",
+            "value": "240px",
+            "usage": "Longest line before wrapping."
+          },
+          {
+            "name": "offset",
+            "value": "8px",
+            "usage": "Gap between the trigger and the bubble."
+          }
+        ]
+      },
+      {
+        "name": "select-panel",
+        "usage": "SelectPanel's trigger and panel.",
+        "tokens": [
+          {
+            "name": "max-height",
+            "value": "360px",
+            "usage": "Tallest the panel gets before it scrolls (less when the viewport is short)."
+          },
+          {
+            "name": "chevron-overhang",
+            "value": "2px",
+            "usage": "How far the chevron reaches into the end padding (legacy sat it 10px from the edge)."
+          }
+        ]
+      },
+      {
+        "name": "link",
+        "usage": "Inline links: the blog's dashed amber underline.",
+        "tokens": [
+          {
+            "name": "underline",
+            "value": "2px",
+            "usage": "The dashed bottom border."
+          },
+          {
+            "name": "radius",
+            "value": "2px",
+            "usage": "Corners of the hover tint (no radius step is that small)."
+          },
+          {
+            "name": "icon-gap",
+            "value": "2px",
+            "usage": "Space before the external-link arrow."
+          }
+        ]
+      },
+      {
+        "name": "chat-bubble",
+        "usage": "Chat and comment message bubbles.",
+        "tokens": [
+          {
+            "name": "padding-x",
+            "value": "12px",
+            "usage": "Side padding."
+          },
+          {
+            "name": "padding-y",
+            "value": "8px",
+            "usage": "Top and bottom padding."
+          },
+          {
+            "name": "max-width",
+            "value": "480px",
+            "usage": "Longest line before wrapping; bubbles never run the full width."
+          }
+        ]
+      },
+      {
+        "name": "prose",
+        "usage": "Long-form rich text. Only the rules that stay put at every size live here; type sizes and vertical rhythm inside Prose are em of its base size, in the recipe.",
+        "tokens": [
+          {
+            "name": "quote-rule",
+            "value": "4px",
+            "usage": "Blockquote start border (the blog's 0.25rem)."
+          },
+          {
+            "name": "head-rule",
+            "value": "2px",
+            "usage": "Rule under a table head (the blog's `prose-thead:border-b-2`)."
+          },
+          {
+            "name": "kbd-depth",
+            "value": "3px",
+            "usage": "Drop of the shadow under a `kbd` key cap."
+          }
+        ]
+      }
+    ]
+  }
+}