@twentyfirstmedia/pro 0.0.0-stage → 0.1.1

package/dist/tokens.json

@@ -0,0 +1,1457 @@
+{
+  "name": "Pro",
+  "defaultTheme": "dark",
+  "defaultDensity": "compact",
+  "color": [
+    {
+      "name": "background",
+      "value": {
+        "light": "#f6f6f7",
+        "dark": "#09090b"
+      },
+      "usage": "Theme: page background behind every panel (shadcn `background`)."
+    },
+    {
+      "name": "foreground",
+      "value": {
+        "light": "#111114",
+        "dark": "#ededf0"
+      },
+      "usage": "Theme: default text and icons (shadcn `foreground`)."
+    },
+    {
+      "name": "card",
+      "value": {
+        "light": "#ffffff",
+        "dark": "#0e0e11"
+      },
+      "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": "#111114",
+        "dark": "#ededf0"
+      },
+      "usage": "Theme: the brand colour. Primary buttons, checked boxes, switches, selected chips and days, progress, active marks."
+    },
+    {
+      "name": "primary-foreground",
+      "value": {
+        "light": "#ffffff",
+        "dark": "#09090b"
+      },
+      "usage": "Theme: text and icons on `primary`."
+    },
+    {
+      "name": "primary-hover",
+      "value": {
+        "light": "color-mix(in oklab, {primary} 70%, #000000)",
+        "dark": "color-mix(in oklab, {primary} 70%, #ffffff)"
+      },
+      "usage": "Theme: `primary` under the pointer."
+    },
+    {
+      "name": "secondary",
+      "value": {
+        "light": "#f0f0f2",
+        "dark": "#16161a"
+      },
+      "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": "#f0f0f2",
+        "dark": "#16161a"
+      },
+      "usage": "Theme: quiet fills. Tracks of segmented controls, tabs and progress, search fields, code, placeholders."
+    },
+    {
+      "name": "muted-foreground",
+      "value": {
+        "light": "#4f4f58",
+        "dark": "#a6a6b0"
+      },
+      "usage": "Theme: secondary text, captions, metadata."
+    },
+    {
+      "name": "accent",
+      "value": {
+        "light": "#f0f0f2",
+        "dark": "#16161a"
+      },
+      "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": "#b0301f",
+        "dark": "#ef6f61"
+      },
+      "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": "#dfdfe3",
+        "dark": "#26262c"
+      },
+      "usage": "Theme: hairlines and dividers between surfaces."
+    },
+    {
+      "name": "input",
+      "value": {
+        "light": "#8a8a94",
+        "dark": "#62626d"
+      },
+      "usage": "Theme: borders of fields, checkboxes and radios, and strong lines."
+    },
+    {
+      "name": "ring",
+      "value": {
+        "light": "{foreground}",
+        "dark": "{foreground}"
+      },
+      "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": "{bg-000}",
+        "dark": "{bg-000}"
+      },
+      "usage": "Page background behind every panel and card."
+    },
+    {
+      "name": "surface",
+      "value": {
+        "light": "{bg-100}",
+        "dark": "{bg-100}"
+      },
+      "usage": "Cards, panels, inputs and the main workspace sheet."
+    },
+    {
+      "name": "surface-sunken",
+      "value": {
+        "light": "{bg-200}",
+        "dark": "{bg-200}"
+      },
+      "usage": "Search fields, segmented-tab tracks, quiet chips and icon-button fills on `surface`."
+    },
+    {
+      "name": "frame",
+      "value": {
+        "light": "{bg-100}",
+        "dark": "{bg-100}"
+      },
+      "usage": "The dark app frame: top bar, dock and the outer shell around the workspace."
+    },
+    {
+      "name": "on-frame",
+      "value": {
+        "light": "{fg-100}",
+        "dark": "{fg-100}"
+      },
+      "usage": "Text and icons on `frame`."
+    },
+    {
+      "name": "on-frame-muted",
+      "value": {
+        "light": "{fg-300}",
+        "dark": "{fg-300}"
+      },
+      "usage": "Secondary text and idle nav icons on `frame` (7:1+)."
+    },
+    {
+      "name": "ink",
+      "value": {
+        "light": "{fg-100}",
+        "dark": "{fg-100}"
+      },
+      "usage": "Headings, numbers and body copy on `surface`, `canvas`, `surface-sunken` and every tint."
+    },
+    {
+      "name": "ink-muted",
+      "value": {
+        "light": "{fg-200}",
+        "dark": "{fg-200}"
+      },
+      "usage": "Descriptions, meta lines and labels on `surface` and `canvas` (4.5:1+ in both themes)."
+    },
+    {
+      "name": "ink-subtle",
+      "value": {
+        "light": "{fg-300}",
+        "dark": "{fg-300}"
+      },
+      "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": "{line-200}",
+        "dark": "{line-200}"
+      },
+      "usage": "Hairline dividers and table rules; decorative, never the only boundary of a control."
+    },
+    {
+      "name": "line-strong",
+      "value": {
+        "light": "{line-300}",
+        "dark": "{line-300}"
+      },
+      "usage": "Dashed placeholder tiles and input borders (3:1 on `surface`)."
+    },
+    {
+      "name": "sky",
+      "value": {
+        "light": "{info-bg}",
+        "dark": "{info-bg}"
+      },
+      "usage": "Info tint: stat tiles, event cards, the 'scheduled' state. Text on it is `ink`."
+    },
+    {
+      "name": "sky-ink",
+      "value": {
+        "light": "{info}",
+        "dark": "{info}"
+      },
+      "usage": "Icons and labels on `sky` or as an icon colour on `surface`."
+    },
+    {
+      "name": "mint",
+      "value": {
+        "light": "{ok-bg}",
+        "dark": "{ok-bg}"
+      },
+      "usage": "Success tint: published/live states, positive stat tiles. Text on it is `ink`."
+    },
+    {
+      "name": "mint-ink",
+      "value": {
+        "light": "{ok}",
+        "dark": "{ok}"
+      },
+      "usage": "Icons and labels on `mint`; success marks on `surface`."
+    },
+    {
+      "name": "lilac",
+      "value": {
+        "light": "{signal-bg}",
+        "dark": "{signal-bg}"
+      },
+      "usage": "Highlight tint: the one featured card in a grid, lesson events. Text on it is `ink`."
+    },
+    {
+      "name": "lilac-ink",
+      "value": {
+        "light": "{signal}",
+        "dark": "{signal}"
+      },
+      "usage": "Icons and labels on `lilac`."
+    },
+    {
+      "name": "butter",
+      "value": {
+        "light": "{warn-bg}",
+        "dark": "{warn-bg}"
+      },
+      "usage": "Money and attention tint: revenue tiles, task events, pending states. Text on it is `ink`."
+    },
+    {
+      "name": "butter-ink",
+      "value": {
+        "light": "{warn}",
+        "dark": "{warn}"
+      },
+      "usage": "Icons and labels on `butter`."
+    },
+    {
+      "name": "blush",
+      "value": {
+        "light": "{danger-bg}",
+        "dark": "{danger-bg}"
+      },
+      "usage": "Danger and support tint: errors, tickets, destructive confirms. Text on it is `ink`."
+    },
+    {
+      "name": "blush-ink",
+      "value": {
+        "light": "{danger}",
+        "dark": "{danger}"
+      },
+      "usage": "Icons and labels on `blush`; destructive text on `surface`."
+    },
+    {
+      "name": "focus",
+      "value": {
+        "light": "{ring}",
+        "dark": "{ring}"
+      },
+      "usage": "Focus ring: 2px solid outline, 1px offset, on every interactive element."
+    },
+    {
+      "name": "count",
+      "value": {
+        "light": "{signal}",
+        "dark": "{signal}"
+      },
+      "usage": "Count pills on nav items and tabs (unread, open approvals)."
+    },
+    {
+      "name": "on-count",
+      "value": {
+        "light": "{bg-000}",
+        "dark": "{bg-000}"
+      },
+      "usage": "Text on `count`."
+    },
+    {
+      "name": "on-frame-success",
+      "value": {
+        "light": "{ok}",
+        "dark": "{ok}"
+      },
+      "usage": "Success marks on frame: the brand dot, ok lines in logs."
+    },
+    {
+      "name": "on-frame-danger",
+      "value": {
+        "light": "{danger}",
+        "dark": "{danger}"
+      },
+      "usage": "Error lines in logs and other danger marks on frame."
+    },
+    {
+      "name": "scrim",
+      "value": {
+        "light": "rgba(17,17,20,0.36)",
+        "dark": "rgba(0,0,0,0.62)"
+      },
+      "usage": "Backdrop behind dialogs, sheets and the command palette."
+    },
+    {
+      "name": "scrim-strong",
+      "value": {
+        "light": "{scrim}",
+        "dark": "{scrim}"
+      },
+      "usage": "Backdrop behind modals and the command palette."
+    },
+    {
+      "name": "bg-000",
+      "value": {
+        "light": "{background}",
+        "dark": "{background}"
+      },
+      "usage": "Canvas: app background, behind hairline grids, inputs on surfaces."
+    },
+    {
+      "name": "bg-100",
+      "value": {
+        "light": "{card}",
+        "dark": "{card}"
+      },
+      "usage": "Surface: every grid cell, panel, table, sidebar, dialog."
+    },
+    {
+      "name": "bg-200",
+      "value": {
+        "light": "{muted}",
+        "dark": "{muted}"
+      },
+      "usage": "Raised: row and button hover, kbd keys, skeletons, code blocks."
+    },
+    {
+      "name": "bg-300",
+      "value": {
+        "light": "color-mix(in oklab, {foreground} 3%, {muted})",
+        "dark": "color-mix(in oklab, {foreground} 5%, {muted})"
+      },
+      "usage": "Selected: active nav item, selected row, pressed segment, open menu trigger."
+    },
+    {
+      "name": "fg-100",
+      "value": {
+        "light": "{foreground}",
+        "dark": "{foreground}"
+      },
+      "usage": "Primary text and icons on every surface (bg-000 to bg-300)."
+    },
+    {
+      "name": "fg-200",
+      "value": {
+        "light": "{muted-foreground}",
+        "dark": "{muted-foreground}"
+      },
+      "usage": "Secondary text: descriptions, table cells that are not the row's key, inactive nav items. On bg-000 to bg-300."
+    },
+    {
+      "name": "fg-300",
+      "value": {
+        "light": "color-mix(in oklab, {muted-foreground} 92%, {background})",
+        "dark": "color-mix(in oklab, {muted-foreground} 90%, {background})"
+      },
+      "usage": "Muted text: meta, timestamps, column headers, eyebrows. On bg-000 to bg-300."
+    },
+    {
+      "name": "fg-400",
+      "value": {
+        "light": "color-mix(in oklab, {muted-foreground} 47%, {background})",
+        "dark": "color-mix(in oklab, {muted-foreground} 57%, {background})"
+      },
+      "usage": "Disabled text and placeholders only. Below 4.5:1 by design; never for information."
+    },
+    {
+      "name": "line-100",
+      "value": {
+        "light": "color-mix(in oklab, {border} 59%, {card})",
+        "dark": "color-mix(in oklab, {border} 52%, {card})"
+      },
+      "usage": "Faint hairline: row separators inside tables and lists, background grid."
+    },
+    {
+      "name": "line-200",
+      "value": {
+        "light": "{border}",
+        "dark": "{border}"
+      },
+      "usage": "Hairline: the structural 1px grid between cells, panel and overlay borders, table header rule. Decorative, not a control boundary."
+    },
+    {
+      "name": "line-300",
+      "value": {
+        "light": "{input}",
+        "dark": "{input}"
+      },
+      "usage": "Control border (3:1 on bg-000, bg-100, bg-200): inputs, checkboxes, secondary buttons, crosshair marks."
+    },
+    {
+      "name": "chart-grid",
+      "value": {
+        "light": "{line-100}",
+        "dark": "{line-100}"
+      },
+      "usage": "Chart gridlines."
+    },
+    {
+      "name": "chart-sky",
+      "value": {
+        "light": "{fg-100}",
+        "dark": "{fg-100}"
+      },
+      "usage": "Chart series tinted sky: a step of the monochrome ramp (charts carry no decorative colour)."
+    },
+    {
+      "name": "chart-mint",
+      "value": {
+        "light": "color-mix(in oklab, {foreground} 38%, {card})",
+        "dark": "color-mix(in oklab, {foreground} 48%, {card})"
+      },
+      "usage": "Chart series tinted mint: a step of the monochrome ramp (charts carry no decorative colour)."
+    },
+    {
+      "name": "chart-lilac",
+      "value": {
+        "light": "{fg-300}",
+        "dark": "{fg-300}"
+      },
+      "usage": "Chart series tinted lilac: a step of the monochrome ramp (charts carry no decorative colour)."
+    },
+    {
+      "name": "chart-butter",
+      "value": {
+        "light": "{fg-200}",
+        "dark": "{fg-200}"
+      },
+      "usage": "Chart series tinted butter: a step of the monochrome ramp (charts carry no decorative colour)."
+    },
+    {
+      "name": "chart-blush",
+      "value": {
+        "light": "{line-300}",
+        "dark": "{line-300}"
+      },
+      "usage": "Chart series tinted blush: a step of the monochrome ramp (charts carry no decorative colour)."
+    },
+    {
+      "name": "ok",
+      "value": {
+        "light": "#177447",
+        "dark": "#5cc28f"
+      },
+      "usage": "Success / done / healthy: text and status shapes (circle). On bg-000 to bg-300."
+    },
+    {
+      "name": "ok-bg",
+      "value": {
+        "light": "rgba(23,116,71,0.09)",
+        "dark": "rgba(92,194,143,0.12)"
+      },
+      "usage": "Tint behind ok badges, banners and diff additions."
+    },
+    {
+      "name": "info",
+      "value": {
+        "light": "#2856b0",
+        "dark": "#7aa7f5"
+      },
+      "usage": "Running / in progress / neutral notices. Shape: pulsing dot."
+    },
+    {
+      "name": "info-bg",
+      "value": {
+        "light": "rgba(40,86,176,0.08)",
+        "dark": "rgba(122,167,245,0.12)"
+      },
+      "usage": "Tint behind info badges and banners."
+    },
+    {
+      "name": "warn",
+      "value": {
+        "light": "#765600",
+        "dark": "#d9b44a"
+      },
+      "usage": "Warning: budget at 80 %, expiring domains, degraded checks. Shape: triangle."
+    },
+    {
+      "name": "warn-bg",
+      "value": {
+        "light": "rgba(118,86,0,0.09)",
+        "dark": "rgba(217,180,74,0.12)"
+      },
+      "usage": "Tint behind warning badges and banners."
+    },
+    {
+      "name": "danger",
+      "value": {
+        "light": "{destructive}",
+        "dark": "{destructive}"
+      },
+      "usage": "Error, failed run, destructive actions, budget stop. Shape: square."
+    },
+    {
+      "name": "danger-bg",
+      "value": {
+        "light": "rgba(176,48,31,0.08)",
+        "dark": "rgba(239,111,97,0.12)"
+      },
+      "usage": "Tint behind error badges, banners, diff removals."
+    },
+    {
+      "name": "signal",
+      "value": {
+        "light": "#9a4807",
+        "dark": "#f2994a"
+      },
+      "usage": "Needs a human: approval waiting, beacons, the approval count. Shape: diamond. The only hue that may draw the eye unprompted."
+    },
+    {
+      "name": "signal-bg",
+      "value": {
+        "light": "rgba(154,72,7,0.09)",
+        "dark": "rgba(242,153,74,0.14)"
+      },
+      "usage": "Tint behind approval cards' header and signal badges."
+    },
+    {
+      "name": "idle",
+      "value": {
+        "light": "{fg-300}",
+        "dark": "{fg-300}"
+      },
+      "usage": "Status idle: ready, inactive (ring). Alias of `ink-muted`."
+    },
+    {
+      "name": "diff-add",
+      "value": {
+        "light": "{ok}",
+        "dark": "{ok}"
+      },
+      "usage": "Added lines in override diffs."
+    },
+    {
+      "name": "diff-add-bg",
+      "value": {
+        "light": "{ok-bg}",
+        "dark": "{ok-bg}"
+      },
+      "usage": "Fill of added lines. Alias of `mint`."
+    },
+    {
+      "name": "diff-del",
+      "value": {
+        "light": "{danger}",
+        "dark": "{danger}"
+      },
+      "usage": "Removed lines in override diffs."
+    },
+    {
+      "name": "diff-del-bg",
+      "value": {
+        "light": "{danger-bg}",
+        "dark": "{danger-bg}"
+      },
+      "usage": "Fill of removed lines. Alias of `blush`."
+    },
+    {
+      "name": "paper",
+      "value": {
+        "light": "#ffffff",
+        "dark": "#ffffff"
+      },
+      "usage": "Document previews (invoices, PDFs): paper is white in both themes."
+    },
+    {
+      "name": "paper-ink",
+      "value": {
+        "light": "#111114",
+        "dark": "#111114"
+      },
+      "usage": "Text on paper."
+    },
+    {
+      "name": "frame-hover",
+      "value": {
+        "light": "{bg-200}",
+        "dark": "{bg-200}"
+      },
+      "usage": "Hover fill on the dark frame (top bar, dock, code blocks). Same in both themes."
+    },
+    {
+      "name": "frame-active",
+      "value": {
+        "light": "{bg-300}",
+        "dark": "{bg-300}"
+      },
+      "usage": "Active or selected fill on the dark frame. Same in both themes."
+    },
+    {
+      "name": "frame-strong",
+      "value": {
+        "light": "{bg-300}",
+        "dark": "{bg-300}"
+      },
+      "usage": "Strong fill or divider on the dark frame. Same in both themes."
+    },
+    {
+      "name": "on-frame-strong",
+      "value": {
+        "light": "{fg-100}",
+        "dark": "{fg-100}"
+      },
+      "usage": "Highlighted text on the frame (log highlights). Same in both themes."
+    },
+    {
+      "name": "on-frame-warn",
+      "value": {
+        "light": "{warn}",
+        "dark": "{warn}"
+      },
+      "usage": "Warnings and numbers in logs and code on the frame. Same in both themes."
+    },
+    {
+      "name": "on-frame-signal",
+      "value": {
+        "light": "{signal}",
+        "dark": "{signal}"
+      },
+      "usage": "Keywords in code on the frame. Same in both themes."
+    },
+    {
+      "name": "ink-hover",
+      "value": {
+        "light": "{bg-200}",
+        "dark": "{bg-200}"
+      },
+      "usage": "Hover fill on tinted surfaces such as alerts. Same in both themes."
+    },
+    {
+      "name": "hairline",
+      "value": {
+        "light": "{line-200}",
+        "dark": "{line-200}"
+      },
+      "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": "none",
+        "dark": "none"
+      },
+      "usage": "Resting cards. Pro: none, hairlines divide."
+    },
+    {
+      "name": "shadow-lift",
+      "value": {
+        "light": "none",
+        "dark": "none"
+      },
+      "usage": "Hovered card. Pro: none."
+    },
+    {
+      "name": "shadow-float",
+      "value": {
+        "light": "0 16px 40px rgba(17,17,20,0.12)",
+        "dark": "0 16px 40px rgba(0,0,0,0.55)"
+      },
+      "usage": "Floating layers: dock, toasts, menus and dialogs."
+    },
+    {
+      "name": "shadow-overlay",
+      "value": {
+        "light": "0 16px 40px rgba(17,17,20,0.12)",
+        "dark": "0 16px 40px rgba(0,0,0,0.55)"
+      },
+      "usage": "Only floating layers: menus, popovers, dialogs, toasts, command palette. Always paired with a line-200 border."
+    }
+  ],
+  "component": [
+    {
+      "name": "button-radius",
+      "value": "{radius-1}",
+      "usage": "Corners of buttons (Button, IconButton). One knob for a theme's button shape."
+    },
+    {
+      "name": "field-radius",
+      "value": "{radius-1}",
+      "usage": "Corners of inputs and selects."
+    },
+    {
+      "name": "badge-radius",
+      "value": "{radius-1}",
+      "usage": "Corners of badges and chips."
+    },
+    {
+      "name": "panel-bg",
+      "value": "{bg-100}",
+      "usage": "Background of a panel: a cell of the hairline grid, a section, a side column."
+    },
+    {
+      "name": "panel-border",
+      "value": "{line-200}",
+      "usage": "Border colour of a panel standing on its own; transparent where panels float."
+    },
+    {
+      "name": "panel-radius",
+      "value": "{radius-0}",
+      "usage": "Corners of a panel. Pro: square cells of the hairline grid."
+    },
+    {
+      "name": "panel-shadow",
+      "value": "none",
+      "usage": "Resting shadow of a panel. Pro: none, the hairlines divide."
+    },
+    {
+      "name": "panel-pad",
+      "value": "{space-4}",
+      "usage": "Inner padding of a panel."
+    },
+    {
+      "name": "panel-gap",
+      "value": "1px",
+      "usage": "Gap between panels in a grid: the hairline in Pro, air between cards in Halo."
+    }
+  ],
+  "font": [
+    {
+      "name": "font-sans",
+      "value": "\"Geist\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "usage": "UI text."
+    },
+    {
+      "name": "font-mono",
+      "value": "\"Geist Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+      "usage": "Numbers, IDs, addresses, code, timestamps and eyebrows."
+    }
+  ],
+  "type": [
+    {
+      "name": "display",
+      "family": "sans",
+      "fontSize": "28px",
+      "lineHeight": "32px",
+      "fontWeight": 600,
+      "letterSpacing": "-0.02em",
+      "usage": "One per screen at most: module title on overview pages, login."
+    },
+    {
+      "name": "number-xl",
+      "family": "mono",
+      "fontSize": "24px",
+      "lineHeight": "28px",
+      "fontWeight": 500,
+      "letterSpacing": "-0.02em",
+      "usage": "The value in a stat cell (same as numeric)."
+    },
+    {
+      "name": "h1",
+      "family": "sans",
+      "fontSize": "28px",
+      "lineHeight": "32px",
+      "fontWeight": 600,
+      "letterSpacing": "-0.02em",
+      "usage": "Page title (same as display)."
+    },
+    {
+      "name": "h2",
+      "family": "sans",
+      "fontSize": "18px",
+      "lineHeight": "24px",
+      "fontWeight": 600,
+      "letterSpacing": "-0.01em",
+      "usage": "Section and panel titles (same as heading)."
+    },
+    {
+      "name": "h3",
+      "family": "sans",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "fontWeight": 600,
+      "usage": "Card titles (same as title)."
+    },
+    {
+      "name": "body",
+      "family": "sans",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "fontWeight": 400,
+      "usage": "Running text in comfortable density, chat messages, mail bodies."
+    },
+    {
+      "name": "body-long",
+      "family": "sans",
+      "fontSize": "14px",
+      "lineHeight": "22px",
+      "fontWeight": 400,
+      "usage": "Reading text: mail bodies, chat messages."
+    },
+    {
+      "name": "body-sm",
+      "family": "sans",
+      "fontSize": "13px",
+      "lineHeight": "18px",
+      "fontWeight": 400,
+      "usage": "Default UI text in compact density: tables, lists, nav, controls."
+    },
+    {
+      "name": "label",
+      "family": "sans",
+      "fontSize": "12px",
+      "lineHeight": "16px",
+      "fontWeight": 500,
+      "usage": "Form labels, button text in small buttons, badge text."
+    },
+    {
+      "name": "small",
+      "family": "sans",
+      "fontSize": "12px",
+      "lineHeight": "16px",
+      "fontWeight": 400,
+      "usage": "Meta lines, hints and timestamps (same as caption)."
+    },
+    {
+      "name": "caption",
+      "family": "mono",
+      "fontSize": "11px",
+      "lineHeight": "16px",
+      "fontWeight": 500,
+      "letterSpacing": "0.08em",
+      "textTransform": "uppercase",
+      "usage": "Uppercase eyebrows and table headers (same as eyebrow)."
+    },
+    {
+      "name": "micro",
+      "family": "mono",
+      "fontSize": "10px",
+      "lineHeight": "12px",
+      "fontWeight": 600,
+      "usage": "Counts inside nav dots and tiny badges."
+    },
+    {
+      "name": "code",
+      "family": "mono",
+      "fontSize": "13px",
+      "lineHeight": "20px",
+      "fontWeight": 400,
+      "usage": "Logs, DNS records, IDs and code (same as mono)."
+    },
+    {
+      "name": "heading",
+      "family": "sans",
+      "fontSize": "18px",
+      "lineHeight": "24px",
+      "fontWeight": 600,
+      "letterSpacing": "-0.01em",
+      "usage": "Panel and dialog titles, mail subject in the reader."
+    },
+    {
+      "name": "title",
+      "family": "sans",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "fontWeight": 600,
+      "usage": "Card and section titles, agent names, table row keys."
+    },
+    {
+      "name": "eyebrow",
+      "family": "mono",
+      "fontSize": "11px",
+      "lineHeight": "16px",
+      "fontWeight": 500,
+      "letterSpacing": "0.08em",
+      "textTransform": "uppercase",
+      "usage": "Uppercase section labels, table column headers, grid cell labels. Uppercase via CSS."
+    },
+    {
+      "name": "mono",
+      "family": "mono",
+      "fontSize": "13px",
+      "lineHeight": "20px",
+      "fontWeight": 400,
+      "usage": "Logs, tool calls, IDs, DNS values, email addresses in lists."
+    },
+    {
+      "name": "mono-sm",
+      "family": "mono",
+      "fontSize": "12px",
+      "lineHeight": "16px",
+      "fontWeight": 400,
+      "usage": "Timestamps, amounts in dense tables, shortcuts."
+    },
+    {
+      "name": "numeric",
+      "family": "mono",
+      "fontSize": "24px",
+      "lineHeight": "28px",
+      "fontWeight": 500,
+      "letterSpacing": "-0.02em",
+      "usage": "KPI values in stat cells. Always tabular figures."
+    }
+  ],
+  "space": [
+    {
+      "name": "space-0-5",
+      "value": "2px",
+      "usage": "Icon-to-badge nudges, hairline offsets."
+    },
+    {
+      "name": "space-1",
+      "value": "4px",
+      "usage": "Gap inside badges and kbd groups."
+    },
+    {
+      "name": "space-2",
+      "value": "8px",
+      "usage": "Gap between icon and label, between buttons in a group."
+    },
+    {
+      "name": "space-3",
+      "value": "12px",
+      "usage": "Compact horizontal cell and control padding."
+    },
+    {
+      "name": "space-4",
+      "value": "16px",
+      "usage": "Grid cell padding, comfortable control padding, page gutter on mobile."
+    },
+    {
+      "name": "space-5",
+      "value": "20px",
+      "usage": "Dialog body padding."
+    },
+    {
+      "name": "space-6",
+      "value": "24px",
+      "usage": "Cell padding on overview grids; background-grid pitch."
+    },
+    {
+      "name": "space-8",
+      "value": "32px",
+      "usage": "Gap between stacked sections inside a panel."
+    },
+    {
+      "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": "2px",
+      "usage": "Theme: the base corner radius; Pro is square at 2px, larger values round cards and menus too (shadcn `radius`)."
+    },
+    {
+      "name": "radius-sm",
+      "value": "{radius-1}",
+      "usage": "Inputs inside cells, row hovers, small tiles."
+    },
+    {
+      "name": "radius-md",
+      "value": "calc((var(--radius) - 2px) * 1)",
+      "usage": "Stat cells, event cards, menus: square in Pro."
+    },
+    {
+      "name": "radius-lg",
+      "value": "calc((var(--radius) - 2px) * 1.375)",
+      "usage": "Cards and panels: square cells of the hairline grid."
+    },
+    {
+      "name": "radius-xl",
+      "value": "calc((var(--radius) - 2px) * 1.875)",
+      "usage": "The workspace sheet and app frame: square in Pro."
+    },
+    {
+      "name": "radius-pill",
+      "value": "{radius-1}",
+      "usage": "Buttons, chips, badges, tabs and inputs: 2px in Pro."
+    },
+    {
+      "name": "radius-0",
+      "value": "0px",
+      "usage": "Default for everything structural: cells, panels, tables, dialogs, sheets, cards."
+    },
+    {
+      "name": "radius-1",
+      "value": "var(--radius)",
+      "usage": "Controls: buttons, inputs, badges, kbd, switches, tooltips."
+    },
+    {
+      "name": "radius-full",
+      "value": "9999px",
+      "usage": "Only status dots and radio buttons."
+    }
+  ],
+  "motion": [
+    {
+      "name": "dur-fast",
+      "value": "{duration-fast}",
+      "usage": "Press, hover colour changes, chip toggles."
+    },
+    {
+      "name": "dur-base",
+      "value": "{duration-base}",
+      "usage": "Tab indicator slide, menu open, card lift."
+    },
+    {
+      "name": "dur-enter",
+      "value": "{duration-base}",
+      "usage": "Entrances: short and quiet in Pro."
+    },
+    {
+      "name": "dur-slow",
+      "value": "{duration-base}",
+      "usage": "Count-ups, chart draw-ins and progress fills: short in Pro."
+    },
+    {
+      "name": "stagger-step",
+      "value": "0ms",
+      "usage": "No staggered entrances in Pro."
+    },
+    {
+      "name": "ease-out",
+      "value": "{ease-standard}",
+      "usage": "Entrances."
+    },
+    {
+      "name": "ease-spring",
+      "value": "{ease-standard}",
+      "usage": "No overshoot in Pro: the standard curve."
+    },
+    {
+      "name": "ease-in-out",
+      "value": "{ease-standard}",
+      "usage": "Things moving between two resting places."
+    },
+    {
+      "name": "duration-fast",
+      "value": "90ms",
+      "usage": "Hover and press feedback."
+    },
+    {
+      "name": "duration-base",
+      "value": "140ms",
+      "usage": "Menus, popovers, sheets, toasts entering."
+    },
+    {
+      "name": "ease-standard",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "usage": "The only easing curve."
+    }
+  ],
+  "size": [
+    {
+      "name": "control-sm",
+      "value": "24px",
+      "usage": "Small buttons in dense toolbars."
+    },
+    {
+      "name": "control-md",
+      "value": "{control-dense}",
+      "usage": "Default control height (follows density in components)."
+    },
+    {
+      "name": "control-lg",
+      "value": "{control-comfy}",
+      "usage": "Large controls."
+    },
+    {
+      "name": "row-dense",
+      "value": "28px",
+      "usage": "Row height for tables, lists and nav items in compact density."
+    },
+    {
+      "name": "row-comfy",
+      "value": "36px",
+      "usage": "Row height in comfortable density."
+    },
+    {
+      "name": "control-dense",
+      "value": "28px",
+      "usage": "Button and input height in compact density."
+    },
+    {
+      "name": "control-comfy",
+      "value": "34px",
+      "usage": "Button and input height in comfortable density."
+    },
+    {
+      "name": "topbar-h",
+      "value": "44px",
+      "usage": "Top bar height."
+    },
+    {
+      "name": "sidebar-w",
+      "value": "232px",
+      "usage": "Sidebar width, expanded."
+    },
+    {
+      "name": "sidebar-w-collapsed",
+      "value": "52px",
+      "usage": "Sidebar width, icon-only."
+    },
+    {
+      "name": "subnav-w",
+      "value": "{sidebar-w}",
+      "usage": "SubNav width."
+    },
+    {
+      "name": "side-panel-w",
+      "value": "320px",
+      "usage": "Side panel width."
+    },
+    {
+      "name": "icon-sm",
+      "value": "14px",
+      "usage": "Icons inside badges and dense table cells."
+    },
+    {
+      "name": "icon-md",
+      "value": "16px",
+      "usage": "Default Lucide icon size."
+    },
+    {
+      "name": "icon-lg",
+      "value": "16px",
+      "usage": "Icons in navigation: same as icon-md in Pro."
+    },
+    {
+      "name": "line-width",
+      "value": "1px",
+      "usage": "Every border and grid line (Pro calls it hairline)."
+    }
+  ],
+  "z": [
+    {
+      "name": "z-sticky",
+      "value": "10",
+      "usage": "Sticky table headers, top bar."
+    },
+    {
+      "name": "z-overlay",
+      "value": "40",
+      "usage": "Menus, popovers, sheets, dialogs."
+    },
+    {
+      "name": "z-palette",
+      "value": "60",
+      "usage": "Command palette."
+    },
+    {
+      "name": "z-toast",
+      "value": "50",
+      "usage": "Toast stack."
+    }
+  ],
+  "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"
+    }
+  }
+}