@twentyfirstmedia/halo 0.0.0-stage → 0.1.1

package/dist/tokens.json

@@ -0,0 +1,1455 @@
+{
+  "name": "Halo",
+  "defaultTheme": "system",
+  "defaultDensity": "comfortable",
+  "color": [
+    {
+      "name": "background",
+      "value": {
+        "light": "#f4f3f0",
+        "dark": "#0f0f10"
+      },
+      "usage": "Theme: page background behind every panel (shadcn `background`)."
+    },
+    {
+      "name": "foreground",
+      "value": {
+        "light": "#141414",
+        "dark": "#f2f1ed"
+      },
+      "usage": "Theme: default text and icons (shadcn `foreground`)."
+    },
+    {
+      "name": "card",
+      "value": {
+        "light": "#ffffff",
+        "dark": "#1a1a1c"
+      },
+      "usage": "Theme: cards, panels, inputs and the workspace sheet (shadcn `card`)."
+    },
+    {
+      "name": "card-foreground",
+      "value": {
+        "light": "{foreground}",
+        "dark": "{foreground}"
+      },
+      "usage": "Theme: text on cards."
+    },
+    {
+      "name": "popover",
+      "value": {
+        "light": "{card}",
+        "dark": "{card}"
+      },
+      "usage": "Theme: menus, popovers, select lists, command palette, hover cards, dialogs."
+    },
+    {
+      "name": "popover-foreground",
+      "value": {
+        "light": "{foreground}",
+        "dark": "{foreground}"
+      },
+      "usage": "Theme: text on popovers."
+    },
+    {
+      "name": "primary",
+      "value": {
+        "light": "#141414",
+        "dark": "#f2f1ed"
+      },
+      "usage": "Theme: the brand colour. Primary buttons, checked boxes, switches, selected chips and days, progress, active marks."
+    },
+    {
+      "name": "primary-foreground",
+      "value": {
+        "light": "#ffffff",
+        "dark": "#141414"
+      },
+      "usage": "Theme: text and icons on `primary`."
+    },
+    {
+      "name": "primary-hover",
+      "value": {
+        "light": "{primary}",
+        "dark": "{primary}"
+      },
+      "usage": "Theme: `primary` under the pointer."
+    },
+    {
+      "name": "secondary",
+      "value": {
+        "light": "#ecebe7",
+        "dark": "#232326"
+      },
+      "usage": "Theme: secondary actions. Soft buttons and icon buttons, neutral chips and badges."
+    },
+    {
+      "name": "secondary-foreground",
+      "value": {
+        "light": "{foreground}",
+        "dark": "{foreground}"
+      },
+      "usage": "Theme: text on `secondary`."
+    },
+    {
+      "name": "muted",
+      "value": {
+        "light": "#ecebe7",
+        "dark": "#232326"
+      },
+      "usage": "Theme: quiet fills. Tracks of segmented controls, tabs and progress, search fields, code, placeholders."
+    },
+    {
+      "name": "muted-foreground",
+      "value": {
+        "light": "#5f5e5a",
+        "dark": "#a9a8a3"
+      },
+      "usage": "Theme: secondary text, captions, metadata."
+    },
+    {
+      "name": "accent",
+      "value": {
+        "light": "#ecebe7",
+        "dark": "#232326"
+      },
+      "usage": "Theme: highlight under the pointer or keyboard. Menu items, list rows, options, ghost buttons, nav items."
+    },
+    {
+      "name": "accent-foreground",
+      "value": {
+        "light": "{foreground}",
+        "dark": "{foreground}"
+      },
+      "usage": "Theme: text on `accent`."
+    },
+    {
+      "name": "destructive",
+      "value": {
+        "light": "#8a2b23",
+        "dark": "#f2a8a0"
+      },
+      "usage": "Theme: destructive actions and errors. Danger buttons, error text and icons."
+    },
+    {
+      "name": "destructive-foreground",
+      "value": {
+        "light": "{card}",
+        "dark": "{card}"
+      },
+      "usage": "Theme: text on solid `destructive`."
+    },
+    {
+      "name": "border",
+      "value": {
+        "light": "#e5e4df",
+        "dark": "#2c2c30"
+      },
+      "usage": "Theme: hairlines and dividers between surfaces."
+    },
+    {
+      "name": "input",
+      "value": {
+        "light": "#a8a7a1",
+        "dark": "#5a5a60"
+      },
+      "usage": "Theme: borders of fields, checkboxes and radios, and strong lines."
+    },
+    {
+      "name": "ring",
+      "value": {
+        "light": "#2f6fe0",
+        "dark": "#8fb8ff"
+      },
+      "usage": "Theme: keyboard focus rings."
+    },
+    {
+      "name": "chart-1",
+      "value": {
+        "light": "{sky-ink}",
+        "dark": "{sky-ink}"
+      },
+      "usage": "Theme: chart series 1 (sky series)."
+    },
+    {
+      "name": "chart-2",
+      "value": {
+        "light": "{mint-ink}",
+        "dark": "{mint-ink}"
+      },
+      "usage": "Theme: chart series 2 (mint series)."
+    },
+    {
+      "name": "chart-3",
+      "value": {
+        "light": "{butter-ink}",
+        "dark": "{butter-ink}"
+      },
+      "usage": "Theme: chart series 3 (butter series)."
+    },
+    {
+      "name": "chart-4",
+      "value": {
+        "light": "{lilac-ink}",
+        "dark": "{lilac-ink}"
+      },
+      "usage": "Theme: chart series 4 (lilac series)."
+    },
+    {
+      "name": "chart-5",
+      "value": {
+        "light": "{blush-ink}",
+        "dark": "{blush-ink}"
+      },
+      "usage": "Theme: chart series 5 (blush series)."
+    },
+    {
+      "name": "sidebar",
+      "value": {
+        "light": "{card}",
+        "dark": "{card}"
+      },
+      "usage": "Theme: Sidebar background."
+    },
+    {
+      "name": "sidebar-foreground",
+      "value": {
+        "light": "{foreground}",
+        "dark": "{foreground}"
+      },
+      "usage": "Theme: Sidebar text."
+    },
+    {
+      "name": "sidebar-primary",
+      "value": {
+        "light": "{primary}",
+        "dark": "{primary}"
+      },
+      "usage": "Theme: Sidebar emphasis (current item mark, badges)."
+    },
+    {
+      "name": "sidebar-primary-foreground",
+      "value": {
+        "light": "{primary-foreground}",
+        "dark": "{primary-foreground}"
+      },
+      "usage": "Theme: text on `sidebar-primary`."
+    },
+    {
+      "name": "sidebar-accent",
+      "value": {
+        "light": "{accent}",
+        "dark": "{accent}"
+      },
+      "usage": "Theme: Sidebar item under the pointer and the current item."
+    },
+    {
+      "name": "sidebar-accent-foreground",
+      "value": {
+        "light": "{accent-foreground}",
+        "dark": "{accent-foreground}"
+      },
+      "usage": "Theme: text on `sidebar-accent`."
+    },
+    {
+      "name": "sidebar-border",
+      "value": {
+        "light": "{border}",
+        "dark": "{border}"
+      },
+      "usage": "Theme: Sidebar edges and dividers."
+    },
+    {
+      "name": "sidebar-ring",
+      "value": {
+        "light": "{ring}",
+        "dark": "{ring}"
+      },
+      "usage": "Theme: focus rings inside the Sidebar."
+    },
+    {
+      "name": "canvas",
+      "value": {
+        "light": "{background}",
+        "dark": "{background}"
+      },
+      "usage": "Page background behind every panel and card."
+    },
+    {
+      "name": "surface",
+      "value": {
+        "light": "{card}",
+        "dark": "{card}"
+      },
+      "usage": "Cards, panels, inputs and the main workspace sheet."
+    },
+    {
+      "name": "surface-sunken",
+      "value": {
+        "light": "{muted}",
+        "dark": "{muted}"
+      },
+      "usage": "Search fields, segmented-tab tracks, quiet chips and icon-button fills on `surface`."
+    },
+    {
+      "name": "frame",
+      "value": {
+        "light": "#121212",
+        "dark": "#050505"
+      },
+      "usage": "The dark app frame: top bar, dock and the outer shell around the workspace."
+    },
+    {
+      "name": "on-frame",
+      "value": {
+        "light": "#f4f3f0",
+        "dark": "#f2f1ed"
+      },
+      "usage": "Text and icons on `frame`."
+    },
+    {
+      "name": "on-frame-muted",
+      "value": {
+        "light": "#a3a29d",
+        "dark": "#a3a29d"
+      },
+      "usage": "Secondary text and idle nav icons on `frame` (7:1+)."
+    },
+    {
+      "name": "ink",
+      "value": {
+        "light": "{foreground}",
+        "dark": "{foreground}"
+      },
+      "usage": "Headings, numbers and body copy on `surface`, `canvas`, `surface-sunken` and every tint."
+    },
+    {
+      "name": "ink-muted",
+      "value": {
+        "light": "{muted-foreground}",
+        "dark": "{muted-foreground}"
+      },
+      "usage": "Descriptions, meta lines and labels on `surface` and `canvas` (4.5:1+ in both themes)."
+    },
+    {
+      "name": "ink-subtle",
+      "value": {
+        "light": "color-mix(in oklab, {muted-foreground} 91%, {background})",
+        "dark": "color-mix(in oklab, {muted-foreground} 84%, {background})"
+      },
+      "usage": "Placeholders, disabled text and the quietest meta; 4.5:1 on surface and surface-sunken in both themes, still clearly lighter than ink-muted."
+    },
+    {
+      "name": "line",
+      "value": {
+        "light": "{border}",
+        "dark": "{border}"
+      },
+      "usage": "Hairline dividers and table rules; decorative, never the only boundary of a control."
+    },
+    {
+      "name": "line-strong",
+      "value": {
+        "light": "{input}",
+        "dark": "{input}"
+      },
+      "usage": "Dashed placeholder tiles and input borders (3:1 on `surface`)."
+    },
+    {
+      "name": "sky",
+      "value": {
+        "light": "#cfe3fb",
+        "dark": "#1e3550"
+      },
+      "usage": "Info tint: stat tiles, event cards, the 'scheduled' state. Text on it is `ink`."
+    },
+    {
+      "name": "sky-ink",
+      "value": {
+        "light": "#1f4f8a",
+        "dark": "#9cc6f7"
+      },
+      "usage": "Icons and labels on `sky` or as an icon colour on `surface`."
+    },
+    {
+      "name": "mint",
+      "value": {
+        "light": "#d6efc3",
+        "dark": "#24401a"
+      },
+      "usage": "Success tint: published/live states, positive stat tiles. Text on it is `ink`."
+    },
+    {
+      "name": "mint-ink",
+      "value": {
+        "light": "#2f5d16",
+        "dark": "#a8db86"
+      },
+      "usage": "Icons and labels on `mint`; success marks on `surface`."
+    },
+    {
+      "name": "lilac",
+      "value": {
+        "light": "#e9cdf4",
+        "dark": "#3d2547"
+      },
+      "usage": "Highlight tint: the one featured card in a grid, lesson events. Text on it is `ink`."
+    },
+    {
+      "name": "lilac-ink",
+      "value": {
+        "light": "#6a2a82",
+        "dark": "#dba6ee"
+      },
+      "usage": "Icons and labels on `lilac`."
+    },
+    {
+      "name": "butter",
+      "value": {
+        "light": "#fbe7aa",
+        "dark": "#4a3a10"
+      },
+      "usage": "Money and attention tint: revenue tiles, task events, pending states. Text on it is `ink`."
+    },
+    {
+      "name": "butter-ink",
+      "value": {
+        "light": "#6b4d00",
+        "dark": "#f3d374"
+      },
+      "usage": "Icons and labels on `butter`."
+    },
+    {
+      "name": "blush",
+      "value": {
+        "light": "#f8d6d2",
+        "dark": "#4a2320"
+      },
+      "usage": "Danger and support tint: errors, tickets, destructive confirms. Text on it is `ink`."
+    },
+    {
+      "name": "blush-ink",
+      "value": {
+        "light": "#8a2b23",
+        "dark": "#f2a8a0"
+      },
+      "usage": "Icons and labels on `blush`; destructive text on `surface`."
+    },
+    {
+      "name": "focus",
+      "value": {
+        "light": "{ring}",
+        "dark": "{ring}"
+      },
+      "usage": "2px focus ring on every interactive element (3:1+ on `surface`, `canvas` and every tint)."
+    },
+    {
+      "name": "count",
+      "value": {
+        "light": "#d6efc3",
+        "dark": "#d6efc3"
+      },
+      "usage": "Count pills on nav items and tabs (unread, open approvals)."
+    },
+    {
+      "name": "on-count",
+      "value": {
+        "light": "#141414",
+        "dark": "#141414"
+      },
+      "usage": "Text on `count`."
+    },
+    {
+      "name": "on-frame-success",
+      "value": {
+        "light": "#a8db86",
+        "dark": "#a8db86"
+      },
+      "usage": "Success marks on frame: the brand dot, ok lines in logs."
+    },
+    {
+      "name": "on-frame-danger",
+      "value": {
+        "light": "#f2a8a0",
+        "dark": "#f2a8a0"
+      },
+      "usage": "Error lines in logs and other danger marks on frame."
+    },
+    {
+      "name": "scrim",
+      "value": {
+        "light": "rgba(10, 10, 10, 0.32)",
+        "dark": "rgba(10, 10, 10, 0.32)"
+      },
+      "usage": "Backdrop behind drawers."
+    },
+    {
+      "name": "scrim-strong",
+      "value": {
+        "light": "rgba(10, 10, 10, 0.38)",
+        "dark": "rgba(10, 10, 10, 0.38)"
+      },
+      "usage": "Backdrop behind modals and the command palette."
+    },
+    {
+      "name": "bg-000",
+      "value": {
+        "light": "{canvas}",
+        "dark": "{canvas}"
+      },
+      "usage": "Canvas: app background behind panels and grids."
+    },
+    {
+      "name": "bg-100",
+      "value": {
+        "light": "{surface}",
+        "dark": "{surface}"
+      },
+      "usage": "Surface: cards, panels, cells, dialogs."
+    },
+    {
+      "name": "bg-200",
+      "value": {
+        "light": "{surface-sunken}",
+        "dark": "{surface-sunken}"
+      },
+      "usage": "Raised or sunken fill: hover, tracks, kbd keys, skeletons."
+    },
+    {
+      "name": "bg-300",
+      "value": {
+        "light": "{line}",
+        "dark": "{line}"
+      },
+      "usage": "Selected fill: active nav item, pressed segment."
+    },
+    {
+      "name": "fg-100",
+      "value": {
+        "light": "{ink}",
+        "dark": "{ink}"
+      },
+      "usage": "Primary text and icons."
+    },
+    {
+      "name": "fg-200",
+      "value": {
+        "light": "{ink-muted}",
+        "dark": "{ink-muted}"
+      },
+      "usage": "Secondary text: descriptions, inactive nav."
+    },
+    {
+      "name": "fg-300",
+      "value": {
+        "light": "{ink-muted}",
+        "dark": "{ink-muted}"
+      },
+      "usage": "Muted text: meta, timestamps, column headers."
+    },
+    {
+      "name": "fg-400",
+      "value": {
+        "light": "{ink-subtle}",
+        "dark": "{ink-subtle}"
+      },
+      "usage": "Disabled text and placeholders."
+    },
+    {
+      "name": "line-100",
+      "value": {
+        "light": "{line}",
+        "dark": "{line}"
+      },
+      "usage": "Faint hairline between rows."
+    },
+    {
+      "name": "line-200",
+      "value": {
+        "light": "{line}",
+        "dark": "{line}"
+      },
+      "usage": "Structural hairline between cells and around overlays."
+    },
+    {
+      "name": "line-300",
+      "value": {
+        "light": "{line-strong}",
+        "dark": "{line-strong}"
+      },
+      "usage": "Control borders (3:1)."
+    },
+    {
+      "name": "chart-grid",
+      "value": {
+        "light": "{line}",
+        "dark": "{line}"
+      },
+      "usage": "Chart gridlines."
+    },
+    {
+      "name": "chart-sky",
+      "value": {
+        "light": "{sky}",
+        "dark": "{sky-ink}"
+      },
+      "usage": "Chart bars and segments tinted sky: the tint in light, its -ink partner in dark."
+    },
+    {
+      "name": "chart-mint",
+      "value": {
+        "light": "{mint}",
+        "dark": "{mint-ink}"
+      },
+      "usage": "Chart bars and segments tinted mint: the tint in light, its -ink partner in dark."
+    },
+    {
+      "name": "chart-lilac",
+      "value": {
+        "light": "{lilac}",
+        "dark": "{lilac-ink}"
+      },
+      "usage": "Chart bars and segments tinted lilac: the tint in light, its -ink partner in dark."
+    },
+    {
+      "name": "chart-butter",
+      "value": {
+        "light": "{butter}",
+        "dark": "{butter-ink}"
+      },
+      "usage": "Chart bars and segments tinted butter: the tint in light, its -ink partner in dark."
+    },
+    {
+      "name": "chart-blush",
+      "value": {
+        "light": "{blush}",
+        "dark": "{blush-ink}"
+      },
+      "usage": "Chart bars and segments tinted blush: the tint in light, its -ink partner in dark."
+    },
+    {
+      "name": "ok",
+      "value": {
+        "light": "#2f5d16",
+        "dark": "#a8db86"
+      },
+      "usage": "Status ok: done, online, valid (dot). Alias of `mint-ink`."
+    },
+    {
+      "name": "ok-bg",
+      "value": {
+        "light": "#d6efc3",
+        "dark": "#24401a"
+      },
+      "usage": "Fill behind ok. Alias of `mint`."
+    },
+    {
+      "name": "info",
+      "value": {
+        "light": "#1f4f8a",
+        "dark": "#9cc6f7"
+      },
+      "usage": "Status running: working, syncing (pulsing dot). Alias of `sky-ink`."
+    },
+    {
+      "name": "info-bg",
+      "value": {
+        "light": "#cfe3fb",
+        "dark": "#1e3550"
+      },
+      "usage": "Fill behind info. Alias of `sky`."
+    },
+    {
+      "name": "warn",
+      "value": {
+        "light": "#6b4d00",
+        "dark": "#f3d374"
+      },
+      "usage": "Status warn: paused, expiring (triangle). Alias of `butter-ink`."
+    },
+    {
+      "name": "warn-bg",
+      "value": {
+        "light": "#fbe7aa",
+        "dark": "#4a3a10"
+      },
+      "usage": "Fill behind warn. Alias of `butter`."
+    },
+    {
+      "name": "danger",
+      "value": {
+        "light": "{destructive}",
+        "dark": "{destructive}"
+      },
+      "usage": "Status danger: failed, offline (square). Alias of `blush-ink`."
+    },
+    {
+      "name": "danger-bg",
+      "value": {
+        "light": "#f8d6d2",
+        "dark": "#4a2320"
+      },
+      "usage": "Fill behind danger. Alias of `blush`."
+    },
+    {
+      "name": "signal",
+      "value": {
+        "light": "#6a2a82",
+        "dark": "#dba6ee"
+      },
+      "usage": "Status signal: waits for a human (diamond). The only state that may draw attention unasked. Alias of `lilac-ink`."
+    },
+    {
+      "name": "signal-bg",
+      "value": {
+        "light": "#e9cdf4",
+        "dark": "#3d2547"
+      },
+      "usage": "Fill behind signal, e.g. the approval header. Alias of `lilac`."
+    },
+    {
+      "name": "idle",
+      "value": {
+        "light": "#5f5e5a",
+        "dark": "#a9a8a3"
+      },
+      "usage": "Status idle: ready, inactive (ring). Alias of `ink-muted`."
+    },
+    {
+      "name": "diff-add",
+      "value": {
+        "light": "#2f5d16",
+        "dark": "#a8db86"
+      },
+      "usage": "Added lines. Alias of `mint-ink`."
+    },
+    {
+      "name": "diff-add-bg",
+      "value": {
+        "light": "#d6efc3",
+        "dark": "#24401a"
+      },
+      "usage": "Fill of added lines. Alias of `mint`."
+    },
+    {
+      "name": "diff-del",
+      "value": {
+        "light": "#8a2b23",
+        "dark": "#f2a8a0"
+      },
+      "usage": "Removed lines. Alias of `blush-ink`."
+    },
+    {
+      "name": "diff-del-bg",
+      "value": {
+        "light": "#f8d6d2",
+        "dark": "#4a2320"
+      },
+      "usage": "Fill of removed lines. Alias of `blush`."
+    },
+    {
+      "name": "paper",
+      "value": {
+        "light": "#ffffff",
+        "dark": "#ffffff"
+      },
+      "usage": "Document previews (invoices, PDFs, mails) stay white in both themes."
+    },
+    {
+      "name": "paper-ink",
+      "value": {
+        "light": "#141414",
+        "dark": "#141414"
+      },
+      "usage": "Text on `paper`."
+    },
+    {
+      "name": "frame-hover",
+      "value": {
+        "light": "rgba(255, 255, 255, 0.08)",
+        "dark": "rgba(255, 255, 255, 0.08)"
+      },
+      "usage": "Hover fill on the dark frame (top bar, dock, code blocks). Same in both themes."
+    },
+    {
+      "name": "frame-active",
+      "value": {
+        "light": "rgba(255, 255, 255, 0.12)",
+        "dark": "rgba(255, 255, 255, 0.12)"
+      },
+      "usage": "Active or selected fill on the dark frame. Same in both themes."
+    },
+    {
+      "name": "frame-strong",
+      "value": {
+        "light": "rgba(255, 255, 255, 0.18)",
+        "dark": "rgba(255, 255, 255, 0.18)"
+      },
+      "usage": "Strong fill or divider on the dark frame. Same in both themes."
+    },
+    {
+      "name": "on-frame-strong",
+      "value": {
+        "light": "#ffffff",
+        "dark": "#ffffff"
+      },
+      "usage": "Highlighted text on the frame (log highlights). Same in both themes."
+    },
+    {
+      "name": "on-frame-warn",
+      "value": {
+        "light": "#f3d374",
+        "dark": "#f3d374"
+      },
+      "usage": "Warnings and numbers in logs and code on the frame. Same in both themes."
+    },
+    {
+      "name": "on-frame-signal",
+      "value": {
+        "light": "#d4b8f0",
+        "dark": "#d4b8f0"
+      },
+      "usage": "Keywords in code on the frame. Same in both themes."
+    },
+    {
+      "name": "ink-hover",
+      "value": {
+        "light": "rgba(0, 0, 0, 0.06)",
+        "dark": "rgba(0, 0, 0, 0.06)"
+      },
+      "usage": "Hover fill on tinted surfaces such as alerts. Same in both themes."
+    },
+    {
+      "name": "hairline",
+      "value": {
+        "light": "rgba(0, 0, 0, 0.12)",
+        "dark": "rgba(0, 0, 0, 0.12)"
+      },
+      "usage": "Thin outline around swatches and colour wells. Same in both themes."
+    },
+    {
+      "name": "media-scrim",
+      "value": {
+        "light": "rgba(10, 10, 10, 0.6)",
+        "dark": "rgba(10, 10, 10, 0.6)"
+      },
+      "usage": "Labels and counters on top of photos. Same in both themes."
+    },
+    {
+      "name": "media-ink",
+      "value": {
+        "light": "#ffffff",
+        "dark": "#ffffff"
+      },
+      "usage": "Text and lines on top of photos. Same in both themes."
+    },
+    {
+      "name": "media-shadow",
+      "value": {
+        "light": "rgba(0, 0, 0, 0.3)",
+        "dark": "rgba(0, 0, 0, 0.3)"
+      },
+      "usage": "Shadow behind lines drawn on photos. Same in both themes."
+    },
+    {
+      "name": "lightbox",
+      "value": {
+        "light": "rgba(8, 8, 8, 0.92)",
+        "dark": "rgba(8, 8, 8, 0.92)"
+      },
+      "usage": "Full-screen image viewer background. Same in both themes."
+    },
+    {
+      "name": "lightbox-ink",
+      "value": {
+        "light": "rgba(255, 255, 255, 0.8)",
+        "dark": "rgba(255, 255, 255, 0.8)"
+      },
+      "usage": "Captions in the image viewer. Same in both themes."
+    },
+    {
+      "name": "paper-muted",
+      "value": {
+        "light": "#706f6a",
+        "dark": "#706f6a"
+      },
+      "usage": "Secondary text on paper (4.5:1 on white)."
+    },
+    {
+      "name": "paper-subtle",
+      "value": {
+        "light": "#6b6a65",
+        "dark": "#6b6a65"
+      },
+      "usage": "Small print on `paper`. Same in both themes."
+    },
+    {
+      "name": "serp-ink",
+      "value": {
+        "light": "#202124",
+        "dark": "#202124"
+      },
+      "usage": "Search ad preview: text. Same in both themes."
+    },
+    {
+      "name": "serp-muted",
+      "value": {
+        "light": "#4d5156",
+        "dark": "#4d5156"
+      },
+      "usage": "Search ad preview: description and URL. Same in both themes."
+    },
+    {
+      "name": "serp-link",
+      "value": {
+        "light": "#1a0dab",
+        "dark": "#1a0dab"
+      },
+      "usage": "Search ad preview: headline link. Same in both themes."
+    },
+    {
+      "name": "serp-chip",
+      "value": {
+        "light": "#f1f3f4",
+        "dark": "#f1f3f4"
+      },
+      "usage": "Search ad preview: favicon chip. Same in both themes."
+    }
+  ],
+  "shadow": [
+    {
+      "name": "shadow-card",
+      "value": {
+        "light": "0 1px 2px rgba(20,20,20,0.04), 0 6px 20px rgba(20,20,20,0.05)",
+        "dark": "0 1px 2px rgba(0,0,0,0.4)"
+      },
+      "usage": "Resting cards on `canvas`."
+    },
+    {
+      "name": "shadow-lift",
+      "value": {
+        "light": "0 2px 4px rgba(20,20,20,0.06), 0 14px 32px rgba(20,20,20,0.10)",
+        "dark": "0 2px 6px rgba(0,0,0,0.5), 0 14px 32px rgba(0,0,0,0.45)"
+      },
+      "usage": "Hovered card, open menu."
+    },
+    {
+      "name": "shadow-float",
+      "value": {
+        "light": "0 16px 40px rgba(0,0,0,0.22)",
+        "dark": "0 16px 40px rgba(0,0,0,0.6)"
+      },
+      "usage": "The floating dock, toasts, menus and modals."
+    },
+    {
+      "name": "shadow-overlay",
+      "value": {
+        "light": "{shadow-float}",
+        "dark": "{shadow-float}"
+      },
+      "usage": "Floating layers: menus, popovers, dialogs, toasts."
+    }
+  ],
+  "component": [
+    {
+      "name": "button-radius",
+      "value": "{radius-pill}",
+      "usage": "Corners of buttons (Button, IconButton). One knob for a theme's button shape."
+    },
+    {
+      "name": "field-radius",
+      "value": "{radius-pill}",
+      "usage": "Corners of inputs and selects."
+    },
+    {
+      "name": "badge-radius",
+      "value": "{radius-pill}",
+      "usage": "Corners of badges and chips."
+    },
+    {
+      "name": "panel-bg",
+      "value": "{surface}",
+      "usage": "Background of a panel: a cell of the hairline grid, a section, a side column."
+    },
+    {
+      "name": "panel-border",
+      "value": "transparent",
+      "usage": "Border colour of a panel standing on its own; transparent where panels float."
+    },
+    {
+      "name": "panel-radius",
+      "value": "{radius-lg}",
+      "usage": "Corners of a panel. Pro: square cells of the hairline grid."
+    },
+    {
+      "name": "panel-shadow",
+      "value": "{shadow-card}",
+      "usage": "Resting shadow of a panel. Pro: none, the hairlines divide."
+    },
+    {
+      "name": "panel-pad",
+      "value": "{space-6}",
+      "usage": "Inner padding of a panel."
+    },
+    {
+      "name": "panel-gap",
+      "value": "{space-4}",
+      "usage": "Gap between panels in a grid: the hairline in Pro, air between cards in Halo."
+    }
+  ],
+  "font": [
+    {
+      "name": "font-sans",
+      "value": "\"Plus Jakarta Sans\", ui-sans-serif, system-ui, sans-serif",
+      "usage": "UI text."
+    },
+    {
+      "name": "font-mono",
+      "value": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace",
+      "usage": "Logs, IDs, code, numbers in tables."
+    }
+  ],
+  "type": [
+    {
+      "name": "display",
+      "family": "sans",
+      "fontSize": "40px",
+      "lineHeight": "44px",
+      "fontWeight": 700,
+      "letterSpacing": "-0.02em",
+      "usage": "One per page at most: an empty state or a welcome header."
+    },
+    {
+      "name": "number-xl",
+      "family": "sans",
+      "fontSize": "32px",
+      "lineHeight": "36px",
+      "fontWeight": 700,
+      "letterSpacing": "-0.02em",
+      "usage": "The value in a stat tile."
+    },
+    {
+      "name": "h1",
+      "family": "sans",
+      "fontSize": "28px",
+      "lineHeight": "34px",
+      "fontWeight": 700,
+      "letterSpacing": "-0.015em",
+      "usage": "Page title, top-left of the workspace sheet."
+    },
+    {
+      "name": "h2",
+      "family": "sans",
+      "fontSize": "20px",
+      "lineHeight": "26px",
+      "fontWeight": 700,
+      "letterSpacing": "-0.01em",
+      "usage": "Section and side-panel titles."
+    },
+    {
+      "name": "h3",
+      "family": "sans",
+      "fontSize": "16px",
+      "lineHeight": "22px",
+      "fontWeight": 700,
+      "letterSpacing": "-0.01em",
+      "usage": "Card titles; wrap to two lines, never truncate to one."
+    },
+    {
+      "name": "body",
+      "family": "sans",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "fontWeight": 500,
+      "usage": "Default copy and inputs."
+    },
+    {
+      "name": "body-long",
+      "family": "sans",
+      "fontSize": "14px",
+      "lineHeight": "22px",
+      "fontWeight": 500,
+      "usage": "Reading text: mail bodies, chat messages, notes."
+    },
+    {
+      "name": "body-sm",
+      "family": "sans",
+      "fontSize": "13px",
+      "lineHeight": "18px",
+      "fontWeight": 500,
+      "usage": "Card descriptions and meta lines, in `ink-muted`."
+    },
+    {
+      "name": "label",
+      "family": "sans",
+      "fontSize": "13px",
+      "lineHeight": "18px",
+      "fontWeight": 600,
+      "usage": "Buttons, chips, tabs, badges."
+    },
+    {
+      "name": "small",
+      "family": "sans",
+      "fontSize": "12px",
+      "lineHeight": "16px",
+      "fontWeight": 500,
+      "usage": "Meta lines, hints, timestamps and table secondary text, in ink-muted."
+    },
+    {
+      "name": "caption",
+      "family": "sans",
+      "fontSize": "11px",
+      "lineHeight": "14px",
+      "fontWeight": 600,
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "usage": "Uppercase eyebrows and table headers."
+    },
+    {
+      "name": "micro",
+      "family": "sans",
+      "fontSize": "10px",
+      "lineHeight": "12px",
+      "fontWeight": 700,
+      "usage": "Only for counts inside nav dots and tiny badges."
+    },
+    {
+      "name": "code",
+      "family": "mono",
+      "fontSize": "13px",
+      "lineHeight": "20px",
+      "fontWeight": 500,
+      "usage": "Logs, DNS records, IDs and code, in font-mono."
+    },
+    {
+      "name": "heading",
+      "family": "sans",
+      "fontSize": "20px",
+      "lineHeight": "26px",
+      "fontWeight": 700,
+      "letterSpacing": "-0.01em",
+      "usage": "Panel and dialog titles (same as h2)."
+    },
+    {
+      "name": "title",
+      "family": "sans",
+      "fontSize": "16px",
+      "lineHeight": "22px",
+      "fontWeight": 700,
+      "letterSpacing": "-0.01em",
+      "usage": "Card and section titles (same as h3)."
+    },
+    {
+      "name": "eyebrow",
+      "family": "sans",
+      "fontSize": "11px",
+      "lineHeight": "14px",
+      "fontWeight": 600,
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "usage": "Uppercase section labels and column headers (same as caption)."
+    },
+    {
+      "name": "mono",
+      "family": "mono",
+      "fontSize": "13px",
+      "lineHeight": "20px",
+      "fontWeight": 500,
+      "usage": "Logs, IDs, DNS values (same as code)."
+    },
+    {
+      "name": "mono-sm",
+      "family": "mono",
+      "fontSize": "12px",
+      "lineHeight": "16px",
+      "fontWeight": 500,
+      "usage": "Timestamps and amounts in dense tables."
+    },
+    {
+      "name": "numeric",
+      "family": "sans",
+      "fontSize": "32px",
+      "lineHeight": "36px",
+      "fontWeight": 700,
+      "letterSpacing": "-0.02em",
+      "usage": "KPI values (same as number-xl)."
+    }
+  ],
+  "space": [
+    {
+      "name": "space-0-5",
+      "value": "2px",
+      "usage": "Icon-to-badge nudges, hairline offsets."
+    },
+    {
+      "name": "space-1",
+      "value": "4px",
+      "usage": "Tight pairs (label + value); flush-panel row gap. Micro 2/6 only inside badges and tags."
+    },
+    {
+      "name": "space-2",
+      "value": "8px",
+      "usage": "Inline gap: buttons in a group, icon-to-label; flush panel inset."
+    },
+    {
+      "name": "space-3",
+      "value": "12px",
+      "usage": "Gap between stacked lines inside a card."
+    },
+    {
+      "name": "space-4",
+      "value": "16px",
+      "usage": "Grid gap between cards; compact tile inset; row and cell padding; control padding-x."
+    },
+    {
+      "name": "space-5",
+      "value": "20px",
+      "usage": "Card inset."
+    },
+    {
+      "name": "space-6",
+      "value": "24px",
+      "usage": "Panel inset; gap between page sections."
+    },
+    {
+      "name": "space-8",
+      "value": "32px",
+      "usage": "Workspace sheet padding."
+    },
+    {
+      "name": "space-10",
+      "value": "40px",
+      "usage": "Outer margin of the app frame on large screens."
+    },
+    {
+      "name": "space-12",
+      "value": "48px",
+      "usage": "Empty-state padding."
+    },
+    {
+      "name": "space-16",
+      "value": "64px",
+      "usage": "Login and onboarding vertical rhythm."
+    }
+  ],
+  "radius": [
+    {
+      "name": "radius",
+      "value": "16px",
+      "usage": "Theme: the base corner radius; the scale below derives from it (shadcn `radius`)."
+    },
+    {
+      "name": "radius-sm",
+      "value": "calc(var(--radius) * 0.625)",
+      "usage": "Inputs inside cards, table row hovers, small tiles."
+    },
+    {
+      "name": "radius-md",
+      "value": "var(--radius)",
+      "usage": "Stat tiles, event cards, menus."
+    },
+    {
+      "name": "radius-lg",
+      "value": "calc(var(--radius) * 1.375)",
+      "usage": "Content cards and side panels."
+    },
+    {
+      "name": "radius-xl",
+      "value": "calc(var(--radius) * 1.875)",
+      "usage": "The workspace sheet and the app frame."
+    },
+    {
+      "name": "radius-pill",
+      "value": "999px",
+      "usage": "Buttons, chips, badges, tabs, search, icon buttons and the dock."
+    },
+    {
+      "name": "radius-0",
+      "value": "0px",
+      "usage": "Square corners."
+    },
+    {
+      "name": "radius-1",
+      "value": "{radius-sm}",
+      "usage": "Small controls and tiles."
+    },
+    {
+      "name": "radius-full",
+      "value": "9999px",
+      "usage": "Circles: status dots, radios, avatars."
+    }
+  ],
+  "motion": [
+    {
+      "name": "dur-fast",
+      "value": "120ms",
+      "usage": "Press, hover colour changes, chip toggles."
+    },
+    {
+      "name": "dur-base",
+      "value": "220ms",
+      "usage": "Tab indicator slide, menu open, card lift."
+    },
+    {
+      "name": "dur-enter",
+      "value": "520ms",
+      "usage": "Entrance of cards, tiles, panels and rows."
+    },
+    {
+      "name": "dur-slow",
+      "value": "900ms",
+      "usage": "Number count-up, chart bars growing, lines drawing, progress fills."
+    },
+    {
+      "name": "stagger-step",
+      "value": "55ms",
+      "usage": "Delay added per item in a staggered entrance (cards, rows, bars)."
+    },
+    {
+      "name": "ease-out",
+      "value": "cubic-bezier(0.22, 1, 0.36, 1)",
+      "usage": "Entrances, count-ups and draw-ins: fast start, soft landing."
+    },
+    {
+      "name": "ease-spring",
+      "value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "usage": "Small playful overshoot: dock, toast, modal, badge pop."
+    },
+    {
+      "name": "ease-in-out",
+      "value": "cubic-bezier(0.65, 0, 0.35, 1)",
+      "usage": "Things that move between two resting places: tab indicator, switch knob."
+    },
+    {
+      "name": "duration-fast",
+      "value": "{dur-fast}",
+      "usage": "Hover and press feedback."
+    },
+    {
+      "name": "duration-base",
+      "value": "{dur-base}",
+      "usage": "Overlays entering."
+    },
+    {
+      "name": "ease-standard",
+      "value": "{ease-out}",
+      "usage": "Default curve."
+    }
+  ],
+  "size": [
+    {
+      "name": "control-sm",
+      "value": "32px",
+      "usage": "Small buttons and inputs."
+    },
+    {
+      "name": "control-md",
+      "value": "40px",
+      "usage": "Buttons, inputs, selects and search."
+    },
+    {
+      "name": "control-lg",
+      "value": "48px",
+      "usage": "Large controls."
+    },
+    {
+      "name": "row-dense",
+      "value": "40px",
+      "usage": "Row height in compact density."
+    },
+    {
+      "name": "row-comfy",
+      "value": "52px",
+      "usage": "Row height in comfortable density."
+    },
+    {
+      "name": "control-dense",
+      "value": "{control-sm}",
+      "usage": "Control height in compact density."
+    },
+    {
+      "name": "control-comfy",
+      "value": "{control-md}",
+      "usage": "Control height in comfortable density."
+    },
+    {
+      "name": "topbar-h",
+      "value": "60px",
+      "usage": "Top bar height."
+    },
+    {
+      "name": "sidebar-w",
+      "value": "44px",
+      "usage": "Side rail width."
+    },
+    {
+      "name": "sidebar-w-collapsed",
+      "value": "44px",
+      "usage": "Side rail width, collapsed."
+    },
+    {
+      "name": "subnav-w",
+      "value": "208px",
+      "usage": "SubNav width."
+    },
+    {
+      "name": "side-panel-w",
+      "value": "304px",
+      "usage": "Side panel width."
+    },
+    {
+      "name": "icon-sm",
+      "value": "14px",
+      "usage": "Icons in chips, badges and event bars."
+    },
+    {
+      "name": "icon-md",
+      "value": "16px",
+      "usage": "Default icon size."
+    },
+    {
+      "name": "icon-lg",
+      "value": "20px",
+      "usage": "Icons in navigation."
+    },
+    {
+      "name": "line-width",
+      "value": "1px",
+      "usage": "Borders and rules."
+    }
+  ],
+  "z": [
+    {
+      "name": "z-sticky",
+      "value": "20"
+    },
+    {
+      "name": "z-overlay",
+      "value": "60"
+    },
+    {
+      "name": "z-palette",
+      "value": "80"
+    },
+    {
+      "name": "z-toast",
+      "value": "95"
+    }
+  ],
+  "density": {
+    "compact": {
+      "density-control": "{control-dense}",
+      "density-row": "{row-dense}",
+      "density-pad-x": "{space-3}",
+      "density-font-size": "13px",
+      "density-line-height": "18px"
+    },
+    "comfortable": {
+      "density-control": "{control-comfy}",
+      "density-row": "{row-comfy}",
+      "density-pad-x": "{space-4}",
+      "density-font-size": "14px",
+      "density-line-height": "20px"
+    }
+  }
+}