@rnine/nineos 0.0.0-stage → 0.1.0

package/dist/tokens.d.ts

@@ -0,0 +1,2446 @@
+// Generated. Do not edit.
+export declare const tokens: {
+  "name": "NineOS",
+  "prefix": "r9",
+  "moods": {
+    "light": {
+      "id": "clear",
+      "label": "Clear",
+      "description": "The light mood: white, ink, magenta."
+    },
+    "dark": {
+      "id": "cipher",
+      "label": "Cipher",
+      "description": "The dark mood: near-black, neon magenta, scanlines."
+    }
+  },
+  "auto": "night",
+  "groups": {
+    "color": [
+      {
+        "name": "color-gray-0",
+        "cssVar": "--r9-color-gray-0",
+        "type": "color",
+        "value": "#FFFFFF"
+      },
+      {
+        "name": "color-gray-10",
+        "cssVar": "--r9-color-gray-10",
+        "type": "color",
+        "value": "#F4F4F6"
+      },
+      {
+        "name": "color-gray-25",
+        "cssVar": "--r9-color-gray-25",
+        "type": "color",
+        "value": "#F5F5F7"
+      },
+      {
+        "name": "color-gray-50",
+        "cssVar": "--r9-color-gray-50",
+        "type": "color",
+        "value": "#EDEDF1"
+      },
+      {
+        "name": "color-gray-100",
+        "cssVar": "--r9-color-gray-100",
+        "type": "color",
+        "value": "#DBDBE1"
+      },
+      {
+        "name": "color-gray-300",
+        "cssVar": "--r9-color-gray-300",
+        "type": "color",
+        "value": "#A2A2AD"
+      },
+      {
+        "name": "color-gray-500",
+        "cssVar": "--r9-color-gray-500",
+        "type": "color",
+        "value": "#6E6F7A"
+      },
+      {
+        "name": "color-gray-600",
+        "cssVar": "--r9-color-gray-600",
+        "type": "color",
+        "value": "#4E4F57"
+      },
+      {
+        "name": "color-gray-800",
+        "cssVar": "--r9-color-gray-800",
+        "type": "color",
+        "value": "#26262C"
+      },
+      {
+        "name": "color-gray-850",
+        "cssVar": "--r9-color-gray-850",
+        "type": "color",
+        "value": "#18181C"
+      },
+      {
+        "name": "color-gray-900",
+        "cssVar": "--r9-color-gray-900",
+        "type": "color",
+        "value": "#111114"
+      },
+      {
+        "name": "color-gray-950",
+        "cssVar": "--r9-color-gray-950",
+        "type": "color",
+        "value": "#0A0A0C"
+      },
+      {
+        "name": "color-gray-975",
+        "cssVar": "--r9-color-gray-975",
+        "type": "color",
+        "value": "#050506"
+      },
+      {
+        "name": "color-accent-300",
+        "cssVar": "--r9-color-accent-300",
+        "type": "color",
+        "value": "#FF4FB0"
+      },
+      {
+        "name": "color-accent-400",
+        "cssVar": "--r9-color-accent-400",
+        "type": "color",
+        "value": "#FF1F9A"
+      },
+      {
+        "name": "color-accent-500",
+        "cssVar": "--r9-color-accent-500",
+        "type": "color",
+        "value": "#E6007E"
+      },
+      {
+        "name": "color-accent-600",
+        "cssVar": "--r9-color-accent-600",
+        "type": "color",
+        "value": "#D4006F"
+      },
+      {
+        "name": "color-accent-700",
+        "cssVar": "--r9-color-accent-700",
+        "type": "color",
+        "value": "#C20066"
+      },
+      {
+        "name": "color-accent-800",
+        "cssVar": "--r9-color-accent-800",
+        "type": "color",
+        "value": "#9E0052"
+      },
+      {
+        "name": "color-signal-300",
+        "cssVar": "--r9-color-signal-300",
+        "type": "color",
+        "value": "#1FE0FF"
+      },
+      {
+        "name": "color-signal-500",
+        "cssVar": "--r9-color-signal-500",
+        "type": "color",
+        "value": "#0098C7"
+      },
+      {
+        "name": "color-signal-700",
+        "cssVar": "--r9-color-signal-700",
+        "type": "color",
+        "value": "#00779C"
+      },
+      {
+        "name": "color-green-400",
+        "cssVar": "--r9-color-green-400",
+        "type": "color",
+        "value": "#3DDC84"
+      },
+      {
+        "name": "color-green-700",
+        "cssVar": "--r9-color-green-700",
+        "type": "color",
+        "value": "#14804A"
+      },
+      {
+        "name": "color-amber-400",
+        "cssVar": "--r9-color-amber-400",
+        "type": "color",
+        "value": "#FFB020"
+      },
+      {
+        "name": "color-amber-700",
+        "cssVar": "--r9-color-amber-700",
+        "type": "color",
+        "value": "#9A5B00"
+      },
+      {
+        "name": "color-red-400",
+        "cssVar": "--r9-color-red-400",
+        "type": "color",
+        "value": "#FF6B4A"
+      },
+      {
+        "name": "color-red-700",
+        "cssVar": "--r9-color-red-700",
+        "type": "color",
+        "value": "#C2361A"
+      }
+    ],
+    "breakpoint": [
+      {
+        "name": "breakpoint-sm",
+        "cssVar": "--r9-breakpoint-sm",
+        "type": "dimension",
+        "value": "640px"
+      },
+      {
+        "name": "breakpoint-md",
+        "cssVar": "--r9-breakpoint-md",
+        "type": "dimension",
+        "value": "900px"
+      },
+      {
+        "name": "breakpoint-lg",
+        "cssVar": "--r9-breakpoint-lg",
+        "type": "dimension",
+        "value": "1200px"
+      }
+    ],
+    "container": [
+      {
+        "name": "container-max",
+        "cssVar": "--r9-container-max",
+        "type": "dimension",
+        "value": "1120px"
+      },
+      {
+        "name": "container-text",
+        "cssVar": "--r9-container-text",
+        "type": "dimension",
+        "value": "65ch",
+        "description": "Longest comfortable line of running text"
+      },
+      {
+        "name": "container-gutter",
+        "cssVar": "--r9-container-gutter",
+        "type": "dimension",
+        "value": "16px",
+        "description": "Minimum side padding at every width"
+      }
+    ],
+    "header": [
+      {
+        "name": "header-height",
+        "cssVar": "--r9-header-height",
+        "type": "dimension",
+        "value": "64px"
+      }
+    ],
+    "z": [
+      {
+        "name": "z-base",
+        "cssVar": "--r9-z-base",
+        "type": "number",
+        "value": 0
+      },
+      {
+        "name": "z-raised",
+        "cssVar": "--r9-z-raised",
+        "type": "number",
+        "value": 10
+      },
+      {
+        "name": "z-sticky",
+        "cssVar": "--r9-z-sticky",
+        "type": "number",
+        "value": 30
+      },
+      {
+        "name": "z-overlay",
+        "cssVar": "--r9-z-overlay",
+        "type": "number",
+        "value": 40
+      },
+      {
+        "name": "z-modal",
+        "cssVar": "--r9-z-modal",
+        "type": "number",
+        "value": 50
+      },
+      {
+        "name": "z-toast",
+        "cssVar": "--r9-z-toast",
+        "type": "number",
+        "value": 60
+      },
+      {
+        "name": "z-fx",
+        "cssVar": "--r9-z-fx",
+        "type": "number",
+        "value": 70,
+        "description": "Scanlines and click sparks: above everything, never interactive"
+      }
+    ],
+    "duration": [
+      {
+        "name": "duration-instant",
+        "cssVar": "--r9-duration-instant",
+        "type": "duration",
+        "value": "90ms",
+        "description": "Press, toggle"
+      },
+      {
+        "name": "duration-fast",
+        "cssVar": "--r9-duration-fast",
+        "type": "duration",
+        "value": "160ms",
+        "description": "Hover color, small fades"
+      },
+      {
+        "name": "duration-base",
+        "cssVar": "--r9-duration-base",
+        "type": "duration",
+        "value": "260ms",
+        "description": "Underlines, arrows, lifts"
+      },
+      {
+        "name": "duration-slow",
+        "cssVar": "--r9-duration-slow",
+        "type": "duration",
+        "value": "420ms",
+        "description": "Glitch, magnet release, tilt release"
+      },
+      {
+        "name": "duration-slower",
+        "cssVar": "--r9-duration-slower",
+        "type": "duration",
+        "value": "700ms",
+        "description": "Scroll reveals, decrypt"
+      },
+      {
+        "name": "duration-ambient",
+        "cssVar": "--r9-duration-ambient",
+        "type": "duration",
+        "value": "9000ms",
+        "description": "Sheen, scanline drift, idle ripples"
+      }
+    ],
+    "easing": [
+      {
+        "name": "easing-out",
+        "cssVar": "--r9-easing-out",
+        "type": "cubicBezier",
+        "value": "cubic-bezier(0.2, 0.7, 0.2, 1)",
+        "description": "Default. Things arrive fast and settle"
+      },
+      {
+        "name": "easing-in-out",
+        "cssVar": "--r9-easing-in-out",
+        "type": "cubicBezier",
+        "value": "cubic-bezier(0.6, 0, 0.2, 1)",
+        "description": "Things that move across the screen"
+      },
+      {
+        "name": "easing-linear",
+        "cssVar": "--r9-easing-linear",
+        "type": "cubicBezier",
+        "value": "cubic-bezier(0, 0, 1, 1)",
+        "description": "Pointer-following (magnet, tilt) and loops"
+      }
+    ],
+    "corner": [
+      {
+        "name": "corner-sm",
+        "cssVar": "--r9-corner-sm",
+        "type": "dimension",
+        "value": "6px",
+        "description": "Chips, small buttons, inputs"
+      },
+      {
+        "name": "corner-md",
+        "cssVar": "--r9-corner-md",
+        "type": "dimension",
+        "value": "10px",
+        "description": "Buttons, terminals, panels"
+      },
+      {
+        "name": "corner-lg",
+        "cssVar": "--r9-corner-lg",
+        "type": "dimension",
+        "value": "18px",
+        "description": "Cards (single top-right cut)"
+      }
+    ],
+    "shape": [
+      {
+        "name": "shape-cut",
+        "cssVar": "--r9-shape-cut",
+        "type": "number",
+        "value": 1,
+        "description": "NineOS: corners are cut"
+      },
+      {
+        "name": "shape-round",
+        "cssVar": "--r9-shape-round",
+        "type": "number",
+        "value": 0,
+        "description": "NineOS: no rounding"
+      }
+    ],
+    "radius": [
+      {
+        "name": "radius-none",
+        "cssVar": "--r9-radius-none",
+        "type": "dimension",
+        "value": "0px"
+      },
+      {
+        "name": "radius-xs",
+        "cssVar": "--r9-radius-xs",
+        "type": "dimension",
+        "value": "2px",
+        "description": "Only for tiny things a corner cut can't fit: checkboxes, dots"
+      },
+      {
+        "name": "radius-full",
+        "cssVar": "--r9-radius-full",
+        "type": "dimension",
+        "value": "999px",
+        "description": "Status dots and avatars only"
+      }
+    ],
+    "border": [
+      {
+        "name": "border-hair",
+        "cssVar": "--r9-border-hair",
+        "type": "dimension",
+        "value": "1px"
+      },
+      {
+        "name": "border-strong",
+        "cssVar": "--r9-border-strong",
+        "type": "dimension",
+        "value": "2px"
+      }
+    ],
+    "space": [
+      {
+        "name": "space-0",
+        "cssVar": "--r9-space-0",
+        "type": "dimension",
+        "value": "0rem"
+      },
+      {
+        "name": "space-1",
+        "cssVar": "--r9-space-1",
+        "type": "dimension",
+        "value": "0.25rem"
+      },
+      {
+        "name": "space-2",
+        "cssVar": "--r9-space-2",
+        "type": "dimension",
+        "value": "0.5rem"
+      },
+      {
+        "name": "space-3",
+        "cssVar": "--r9-space-3",
+        "type": "dimension",
+        "value": "0.75rem"
+      },
+      {
+        "name": "space-4",
+        "cssVar": "--r9-space-4",
+        "type": "dimension",
+        "value": "1rem"
+      },
+      {
+        "name": "space-5",
+        "cssVar": "--r9-space-5",
+        "type": "dimension",
+        "value": "1.25rem"
+      },
+      {
+        "name": "space-6",
+        "cssVar": "--r9-space-6",
+        "type": "dimension",
+        "value": "1.5rem"
+      },
+      {
+        "name": "space-8",
+        "cssVar": "--r9-space-8",
+        "type": "dimension",
+        "value": "2rem"
+      },
+      {
+        "name": "space-10",
+        "cssVar": "--r9-space-10",
+        "type": "dimension",
+        "value": "2.5rem"
+      },
+      {
+        "name": "space-12",
+        "cssVar": "--r9-space-12",
+        "type": "dimension",
+        "value": "3rem"
+      },
+      {
+        "name": "space-16",
+        "cssVar": "--r9-space-16",
+        "type": "dimension",
+        "value": "4rem"
+      },
+      {
+        "name": "space-20",
+        "cssVar": "--r9-space-20",
+        "type": "dimension",
+        "value": "5rem"
+      },
+      {
+        "name": "space-24",
+        "cssVar": "--r9-space-24",
+        "type": "dimension",
+        "value": "6rem"
+      }
+    ],
+    "font": [
+      {
+        "name": "font-display",
+        "cssVar": "--r9-font-display",
+        "type": "fontFamily",
+        "value": "\"Chakra Petch\", \"Segoe UI\", system-ui, sans-serif",
+        "description": "Headings, wordmarks, numbers that matter. Weights 500-700"
+      },
+      {
+        "name": "font-body",
+        "cssVar": "--r9-font-body",
+        "type": "fontFamily",
+        "value": "\"Hanken Grotesk Variable\", \"Hanken Grotesk\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+        "description": "Running text and UI"
+      },
+      {
+        "name": "font-mono",
+        "cssVar": "--r9-font-mono",
+        "type": "fontFamily",
+        "value": "\"Share Tech Mono\", ui-monospace, \"Cascadia Mono\", Consolas, monospace",
+        "description": "Labels, code, data, eyebrows"
+      }
+    ],
+    "font-size": [
+      {
+        "name": "font-size-xs",
+        "cssVar": "--r9-font-size-xs",
+        "type": "dimension",
+        "value": "0.75rem"
+      },
+      {
+        "name": "font-size-sm",
+        "cssVar": "--r9-font-size-sm",
+        "type": "dimension",
+        "value": "0.875rem"
+      },
+      {
+        "name": "font-size-base",
+        "cssVar": "--r9-font-size-base",
+        "type": "dimension",
+        "value": "1rem"
+      },
+      {
+        "name": "font-size-md",
+        "cssVar": "--r9-font-size-md",
+        "type": "dimension",
+        "value": "1.125rem"
+      },
+      {
+        "name": "font-size-lg",
+        "cssVar": "--r9-font-size-lg",
+        "type": "dimension",
+        "value": "1.25rem"
+      },
+      {
+        "name": "font-size-xl",
+        "cssVar": "--r9-font-size-xl",
+        "type": "dimension",
+        "value": "1.5rem"
+      },
+      {
+        "name": "font-size-2xl",
+        "cssVar": "--r9-font-size-2xl",
+        "type": "dimension",
+        "value": "2rem"
+      },
+      {
+        "name": "font-size-3xl",
+        "cssVar": "--r9-font-size-3xl",
+        "type": "dimension",
+        "value": "2.5rem"
+      },
+      {
+        "name": "font-size-4xl",
+        "cssVar": "--r9-font-size-4xl",
+        "type": "dimension",
+        "value": "3.25rem"
+      },
+      {
+        "name": "font-size-5xl",
+        "cssVar": "--r9-font-size-5xl",
+        "type": "dimension",
+        "value": "4.5rem"
+      }
+    ],
+    "font-weight": [
+      {
+        "name": "font-weight-regular",
+        "cssVar": "--r9-font-weight-regular",
+        "type": "fontWeight",
+        "value": 400
+      },
+      {
+        "name": "font-weight-medium",
+        "cssVar": "--r9-font-weight-medium",
+        "type": "fontWeight",
+        "value": 500
+      },
+      {
+        "name": "font-weight-semibold",
+        "cssVar": "--r9-font-weight-semibold",
+        "type": "fontWeight",
+        "value": 600
+      },
+      {
+        "name": "font-weight-bold",
+        "cssVar": "--r9-font-weight-bold",
+        "type": "fontWeight",
+        "value": 700
+      }
+    ],
+    "leading": [
+      {
+        "name": "leading-tight",
+        "cssVar": "--r9-leading-tight",
+        "type": "number",
+        "value": 1.06
+      },
+      {
+        "name": "leading-snug",
+        "cssVar": "--r9-leading-snug",
+        "type": "number",
+        "value": 1.25
+      },
+      {
+        "name": "leading-normal",
+        "cssVar": "--r9-leading-normal",
+        "type": "number",
+        "value": 1.6
+      }
+    ],
+    "tracking": [
+      {
+        "name": "tracking-tight",
+        "cssVar": "--r9-tracking-tight",
+        "type": "dimension",
+        "value": "-0.01em"
+      },
+      {
+        "name": "tracking-normal",
+        "cssVar": "--r9-tracking-normal",
+        "type": "dimension",
+        "value": "0em"
+      },
+      {
+        "name": "tracking-wide",
+        "cssVar": "--r9-tracking-wide",
+        "type": "dimension",
+        "value": "0.06em"
+      },
+      {
+        "name": "tracking-wider",
+        "cssVar": "--r9-tracking-wider",
+        "type": "dimension",
+        "value": "0.1em"
+      },
+      {
+        "name": "tracking-mark",
+        "cssVar": "--r9-tracking-mark",
+        "type": "dimension",
+        "value": "0.34em",
+        "description": "Wordmarks only (N I N E O S)"
+      }
+    ]
+  },
+  "schemes": {
+    "light": [
+      {
+        "name": "bg",
+        "cssVar": "--r9-bg",
+        "type": "color",
+        "value": "#FFFFFF",
+        "ref": "color.gray.0",
+        "description": "Page background"
+      },
+      {
+        "name": "surface",
+        "cssVar": "--r9-surface",
+        "type": "color",
+        "value": "#F5F5F7",
+        "ref": "color.gray.25",
+        "description": "Cards, panels, inputs"
+      },
+      {
+        "name": "surface-raised",
+        "cssVar": "--r9-surface-raised",
+        "type": "color",
+        "value": "#FFFFFF",
+        "ref": "color.gray.0",
+        "description": "Menus, popovers, toasts"
+      },
+      {
+        "name": "glass",
+        "cssVar": "--r9-glass",
+        "type": "color",
+        "value": "#FFFFFFD1",
+        "description": "Translucent surface for UI floating over the dot field (panels, dock, HUD), with a backdrop blur"
+      },
+      {
+        "name": "fg",
+        "cssVar": "--r9-fg",
+        "type": "color",
+        "value": "#0A0A0C",
+        "ref": "color.gray.950",
+        "description": "Main text and icons"
+      },
+      {
+        "name": "fg-muted",
+        "cssVar": "--r9-fg-muted",
+        "type": "color",
+        "value": "#4E4F57",
+        "ref": "color.gray.600",
+        "description": "Secondary text"
+      },
+      {
+        "name": "fg-subtle",
+        "cssVar": "--r9-fg-subtle",
+        "type": "color",
+        "value": "#6E6F7A",
+        "ref": "color.gray.500",
+        "description": "Placeholders, disabled text (large text only)"
+      },
+      {
+        "name": "line",
+        "cssVar": "--r9-line",
+        "type": "color",
+        "value": "#DBDBE1",
+        "ref": "color.gray.100",
+        "description": "Hairline borders and dividers"
+      },
+      {
+        "name": "line-strong",
+        "cssVar": "--r9-line-strong",
+        "type": "color",
+        "value": "#A2A2AD",
+        "ref": "color.gray.300",
+        "description": "Input borders, hovered hairlines"
+      },
+      {
+        "name": "accent",
+        "cssVar": "--r9-accent",
+        "type": "color",
+        "value": "#D4006F",
+        "ref": "color.accent.600",
+        "description": "Magenta: primary actions, the one mark on every component"
+      },
+      {
+        "name": "accent-hover",
+        "cssVar": "--r9-accent-hover",
+        "type": "color",
+        "value": "#C20066",
+        "ref": "color.accent.700",
+        "description": "Hovered and pressed accent fills"
+      },
+      {
+        "name": "accent-text",
+        "cssVar": "--r9-accent-text",
+        "type": "color",
+        "value": "#C20066",
+        "ref": "color.accent.700",
+        "description": "Magenta text and icons on bg or surface"
+      },
+      {
+        "name": "on-accent",
+        "cssVar": "--r9-on-accent",
+        "type": "color",
+        "value": "#FFFFFF",
+        "ref": "color.gray.0",
+        "description": "Text on accent fills"
+      },
+      {
+        "name": "accent-soft",
+        "cssVar": "--r9-accent-soft",
+        "type": "color",
+        "value": "#D4006F1F",
+        "description": "Tinted backgrounds, focus glow"
+      },
+      {
+        "name": "signal",
+        "cssVar": "--r9-signal",
+        "type": "color",
+        "value": "#0098C7",
+        "ref": "color.signal.500",
+        "description": "Cyan: live states, cursor light, data. Never a second brand color"
+      },
+      {
+        "name": "signal-text",
+        "cssVar": "--r9-signal-text",
+        "type": "color",
+        "value": "#00779C",
+        "ref": "color.signal.700",
+        "description": "Cyan text on bg or surface"
+      },
+      {
+        "name": "inverse-bg",
+        "cssVar": "--r9-inverse-bg",
+        "type": "color",
+        "value": "#0A0A0C",
+        "ref": "color.gray.950",
+        "description": "Index chips, inverted tags"
+      },
+      {
+        "name": "inverse-fg",
+        "cssVar": "--r9-inverse-fg",
+        "type": "color",
+        "value": "#FFFFFF",
+        "ref": "color.gray.0",
+        "description": "Text on inverse-bg"
+      },
+      {
+        "name": "success",
+        "cssVar": "--r9-success",
+        "type": "color",
+        "value": "#14804A",
+        "ref": "color.green.700",
+        "description": "Success status text and icons. Always with an icon or a word, never color alone"
+      },
+      {
+        "name": "warning",
+        "cssVar": "--r9-warning",
+        "type": "color",
+        "value": "#9A5B00",
+        "ref": "color.amber.700",
+        "description": "Warning status text and icons. Always with an icon or a word"
+      },
+      {
+        "name": "danger",
+        "cssVar": "--r9-danger",
+        "type": "color",
+        "value": "#C2361A",
+        "ref": "color.red.700",
+        "description": "Errors and destructive actions. Always with an icon or a word"
+      },
+      {
+        "name": "dot",
+        "cssVar": "--r9-dot",
+        "type": "color",
+        "value": "#0A0A0C29",
+        "description": "Dot field and dotted grid"
+      },
+      {
+        "name": "scan",
+        "cssVar": "--r9-scan",
+        "type": "color",
+        "value": "#00000000",
+        "description": "Scanlines (off in Clear)"
+      },
+      {
+        "name": "sheen",
+        "cssVar": "--r9-sheen",
+        "type": "color",
+        "value": "#0098C712",
+        "description": "Light band that crosses heroes"
+      },
+      {
+        "name": "selection",
+        "cssVar": "--r9-selection",
+        "type": "color",
+        "value": "#D4006F33",
+        "description": "Text selection"
+      }
+    ],
+    "dark": [
+      {
+        "name": "bg",
+        "cssVar": "--r9-bg",
+        "type": "color",
+        "value": "#050506",
+        "ref": "color.gray.975"
+      },
+      {
+        "name": "surface",
+        "cssVar": "--r9-surface",
+        "type": "color",
+        "value": "#111114",
+        "ref": "color.gray.900"
+      },
+      {
+        "name": "surface-raised",
+        "cssVar": "--r9-surface-raised",
+        "type": "color",
+        "value": "#18181C",
+        "ref": "color.gray.850"
+      },
+      {
+        "name": "glass",
+        "cssVar": "--r9-glass",
+        "type": "color",
+        "value": "#050506C7"
+      },
+      {
+        "name": "fg",
+        "cssVar": "--r9-fg",
+        "type": "color",
+        "value": "#F4F4F6",
+        "ref": "color.gray.10"
+      },
+      {
+        "name": "fg-muted",
+        "cssVar": "--r9-fg-muted",
+        "type": "color",
+        "value": "#A2A2AD",
+        "ref": "color.gray.300"
+      },
+      {
+        "name": "fg-subtle",
+        "cssVar": "--r9-fg-subtle",
+        "type": "color",
+        "value": "#6E6F7A",
+        "ref": "color.gray.500"
+      },
+      {
+        "name": "line",
+        "cssVar": "--r9-line",
+        "type": "color",
+        "value": "#26262C",
+        "ref": "color.gray.800"
+      },
+      {
+        "name": "line-strong",
+        "cssVar": "--r9-line-strong",
+        "type": "color",
+        "value": "#4E4F57",
+        "ref": "color.gray.600"
+      },
+      {
+        "name": "accent",
+        "cssVar": "--r9-accent",
+        "type": "color",
+        "value": "#FF1F9A",
+        "ref": "color.accent.400"
+      },
+      {
+        "name": "accent-hover",
+        "cssVar": "--r9-accent-hover",
+        "type": "color",
+        "value": "#FF4FB0",
+        "ref": "color.accent.300"
+      },
+      {
+        "name": "accent-text",
+        "cssVar": "--r9-accent-text",
+        "type": "color",
+        "value": "#FF4FB0",
+        "ref": "color.accent.300"
+      },
+      {
+        "name": "on-accent",
+        "cssVar": "--r9-on-accent",
+        "type": "color",
+        "value": "#050506",
+        "ref": "color.gray.975"
+      },
+      {
+        "name": "accent-soft",
+        "cssVar": "--r9-accent-soft",
+        "type": "color",
+        "value": "#FF1F9A29"
+      },
+      {
+        "name": "signal",
+        "cssVar": "--r9-signal",
+        "type": "color",
+        "value": "#1FE0FF",
+        "ref": "color.signal.300"
+      },
+      {
+        "name": "signal-text",
+        "cssVar": "--r9-signal-text",
+        "type": "color",
+        "value": "#1FE0FF",
+        "ref": "color.signal.300"
+      },
+      {
+        "name": "inverse-bg",
+        "cssVar": "--r9-inverse-bg",
+        "type": "color",
+        "value": "#F4F4F6",
+        "ref": "color.gray.10"
+      },
+      {
+        "name": "inverse-fg",
+        "cssVar": "--r9-inverse-fg",
+        "type": "color",
+        "value": "#050506",
+        "ref": "color.gray.975"
+      },
+      {
+        "name": "success",
+        "cssVar": "--r9-success",
+        "type": "color",
+        "value": "#3DDC84",
+        "ref": "color.green.400"
+      },
+      {
+        "name": "warning",
+        "cssVar": "--r9-warning",
+        "type": "color",
+        "value": "#FFB020",
+        "ref": "color.amber.400"
+      },
+      {
+        "name": "danger",
+        "cssVar": "--r9-danger",
+        "type": "color",
+        "value": "#FF6B4A",
+        "ref": "color.red.400"
+      },
+      {
+        "name": "dot",
+        "cssVar": "--r9-dot",
+        "type": "color",
+        "value": "#F4F4F621"
+      },
+      {
+        "name": "scan",
+        "cssVar": "--r9-scan",
+        "type": "color",
+        "value": "#FFFFFF08"
+      },
+      {
+        "name": "sheen",
+        "cssVar": "--r9-sheen",
+        "type": "color",
+        "value": "#1FE0FF0D"
+      },
+      {
+        "name": "selection",
+        "cssVar": "--r9-selection",
+        "type": "color",
+        "value": "#FF1F9A4D"
+      }
+    ]
+  },
+  "typeRoles": [
+    {
+      "name": "display",
+      "cssVarPrefix": "--r9-type-display",
+      "fontFamily": "\"Chakra Petch\", \"Segoe UI\", system-ui, sans-serif",
+      "fontWeight": 700,
+      "fontSize": "clamp(2.5rem, 1.25rem + 5.2vw, 4.75rem)",
+      "lineHeight": 1.04,
+      "letterSpacing": "-0.01em"
+    },
+    {
+      "name": "h1",
+      "cssVarPrefix": "--r9-type-h1",
+      "fontFamily": "\"Chakra Petch\", \"Segoe UI\", system-ui, sans-serif",
+      "fontWeight": 700,
+      "fontSize": "clamp(2rem, 1.3rem + 2.8vw, 3.25rem)",
+      "lineHeight": 1.06,
+      "letterSpacing": "-0.01em"
+    },
+    {
+      "name": "h2",
+      "cssVarPrefix": "--r9-type-h2",
+      "fontFamily": "\"Chakra Petch\", \"Segoe UI\", system-ui, sans-serif",
+      "fontWeight": 600,
+      "fontSize": "clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem)",
+      "lineHeight": 1.1,
+      "letterSpacing": "0em"
+    },
+    {
+      "name": "h3",
+      "cssVarPrefix": "--r9-type-h3",
+      "fontFamily": "\"Chakra Petch\", \"Segoe UI\", system-ui, sans-serif",
+      "fontWeight": 600,
+      "fontSize": "1.375rem",
+      "lineHeight": 1.2,
+      "letterSpacing": "0em"
+    },
+    {
+      "name": "h4",
+      "cssVarPrefix": "--r9-type-h4",
+      "fontFamily": "\"Chakra Petch\", \"Segoe UI\", system-ui, sans-serif",
+      "fontWeight": 600,
+      "fontSize": "1.125rem",
+      "lineHeight": 1.25,
+      "letterSpacing": "0em"
+    },
+    {
+      "name": "body-lg",
+      "cssVarPrefix": "--r9-type-body-lg",
+      "fontFamily": "\"Hanken Grotesk Variable\", \"Hanken Grotesk\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1.125rem",
+      "lineHeight": 1.6,
+      "letterSpacing": "0em"
+    },
+    {
+      "name": "body",
+      "cssVarPrefix": "--r9-type-body",
+      "fontFamily": "\"Hanken Grotesk Variable\", \"Hanken Grotesk\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "1rem",
+      "lineHeight": 1.6,
+      "letterSpacing": "0em"
+    },
+    {
+      "name": "body-sm",
+      "cssVarPrefix": "--r9-type-body-sm",
+      "fontFamily": "\"Hanken Grotesk Variable\", \"Hanken Grotesk\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "fontWeight": 400,
+      "fontSize": "0.875rem",
+      "lineHeight": 1.55,
+      "letterSpacing": "0em"
+    },
+    {
+      "name": "label",
+      "cssVarPrefix": "--r9-type-label",
+      "fontFamily": "\"Share Tech Mono\", ui-monospace, \"Cascadia Mono\", Consolas, monospace",
+      "fontWeight": 400,
+      "fontSize": "0.8125rem",
+      "lineHeight": 1.2,
+      "letterSpacing": "0.08em",
+      "description": "Uppercase eyebrows, chips, table heads"
+    },
+    {
+      "name": "code",
+      "cssVarPrefix": "--r9-type-code",
+      "fontFamily": "\"Share Tech Mono\", ui-monospace, \"Cascadia Mono\", Consolas, monospace",
+      "fontWeight": 400,
+      "fontSize": "0.9375rem",
+      "lineHeight": 1.7,
+      "letterSpacing": "0em"
+    },
+    {
+      "name": "caption",
+      "cssVarPrefix": "--r9-type-caption",
+      "fontFamily": "\"Share Tech Mono\", ui-monospace, \"Cascadia Mono\", Consolas, monospace",
+      "fontWeight": 400,
+      "fontSize": "0.75rem",
+      "lineHeight": 1.4,
+      "letterSpacing": "0.04em"
+    },
+    {
+      "name": "wordmark",
+      "cssVarPrefix": "--r9-type-wordmark",
+      "fontFamily": "\"Chakra Petch\", \"Segoe UI\", system-ui, sans-serif",
+      "fontWeight": 500,
+      "fontSize": "0.8125rem",
+      "lineHeight": 1,
+      "letterSpacing": "0.34em"
+    }
+  ],
+  "breakpoints": {
+    "sm": 640,
+    "md": 900,
+    "lg": 1200
+  },
+  "palettes": [
+    {
+      "id": "magenta",
+      "label": "Magenta",
+      "description": "Magenta accent, cyan signal: the default.",
+      "default": true,
+      "colors": [
+        {
+          "name": "color-accent-300",
+          "cssVar": "--r9-color-accent-300",
+          "type": "color",
+          "value": "#FF4FB0"
+        },
+        {
+          "name": "color-accent-400",
+          "cssVar": "--r9-color-accent-400",
+          "type": "color",
+          "value": "#FF1F9A"
+        },
+        {
+          "name": "color-accent-500",
+          "cssVar": "--r9-color-accent-500",
+          "type": "color",
+          "value": "#E6007E"
+        },
+        {
+          "name": "color-accent-600",
+          "cssVar": "--r9-color-accent-600",
+          "type": "color",
+          "value": "#D4006F"
+        },
+        {
+          "name": "color-accent-700",
+          "cssVar": "--r9-color-accent-700",
+          "type": "color",
+          "value": "#C20066"
+        },
+        {
+          "name": "color-accent-800",
+          "cssVar": "--r9-color-accent-800",
+          "type": "color",
+          "value": "#9E0052"
+        },
+        {
+          "name": "color-signal-300",
+          "cssVar": "--r9-color-signal-300",
+          "type": "color",
+          "value": "#1FE0FF"
+        },
+        {
+          "name": "color-signal-500",
+          "cssVar": "--r9-color-signal-500",
+          "type": "color",
+          "value": "#0098C7"
+        },
+        {
+          "name": "color-signal-700",
+          "cssVar": "--r9-color-signal-700",
+          "type": "color",
+          "value": "#00779C"
+        }
+      ],
+      "schemes": {
+        "light": [
+          {
+            "name": "bg",
+            "cssVar": "--r9-bg",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Page background"
+          },
+          {
+            "name": "surface",
+            "cssVar": "--r9-surface",
+            "type": "color",
+            "value": "#F5F5F7",
+            "ref": "color.gray.25",
+            "description": "Cards, panels, inputs"
+          },
+          {
+            "name": "surface-raised",
+            "cssVar": "--r9-surface-raised",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Menus, popovers, toasts"
+          },
+          {
+            "name": "glass",
+            "cssVar": "--r9-glass",
+            "type": "color",
+            "value": "#FFFFFFD1",
+            "description": "Translucent surface for UI floating over the dot field (panels, dock, HUD), with a backdrop blur"
+          },
+          {
+            "name": "fg",
+            "cssVar": "--r9-fg",
+            "type": "color",
+            "value": "#0A0A0C",
+            "ref": "color.gray.950",
+            "description": "Main text and icons"
+          },
+          {
+            "name": "fg-muted",
+            "cssVar": "--r9-fg-muted",
+            "type": "color",
+            "value": "#4E4F57",
+            "ref": "color.gray.600",
+            "description": "Secondary text"
+          },
+          {
+            "name": "fg-subtle",
+            "cssVar": "--r9-fg-subtle",
+            "type": "color",
+            "value": "#6E6F7A",
+            "ref": "color.gray.500",
+            "description": "Placeholders, disabled text (large text only)"
+          },
+          {
+            "name": "line",
+            "cssVar": "--r9-line",
+            "type": "color",
+            "value": "#DBDBE1",
+            "ref": "color.gray.100",
+            "description": "Hairline borders and dividers"
+          },
+          {
+            "name": "line-strong",
+            "cssVar": "--r9-line-strong",
+            "type": "color",
+            "value": "#A2A2AD",
+            "ref": "color.gray.300",
+            "description": "Input borders, hovered hairlines"
+          },
+          {
+            "name": "accent",
+            "cssVar": "--r9-accent",
+            "type": "color",
+            "value": "#D4006F",
+            "ref": "color.accent.600",
+            "description": "Magenta: primary actions, the one mark on every component"
+          },
+          {
+            "name": "accent-hover",
+            "cssVar": "--r9-accent-hover",
+            "type": "color",
+            "value": "#C20066",
+            "ref": "color.accent.700",
+            "description": "Hovered and pressed accent fills"
+          },
+          {
+            "name": "accent-text",
+            "cssVar": "--r9-accent-text",
+            "type": "color",
+            "value": "#C20066",
+            "ref": "color.accent.700",
+            "description": "Magenta text and icons on bg or surface"
+          },
+          {
+            "name": "on-accent",
+            "cssVar": "--r9-on-accent",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Text on accent fills"
+          },
+          {
+            "name": "accent-soft",
+            "cssVar": "--r9-accent-soft",
+            "type": "color",
+            "value": "#D4006F1F",
+            "description": "Tinted backgrounds, focus glow"
+          },
+          {
+            "name": "signal",
+            "cssVar": "--r9-signal",
+            "type": "color",
+            "value": "#0098C7",
+            "ref": "color.signal.500",
+            "description": "Cyan: live states, cursor light, data. Never a second brand color"
+          },
+          {
+            "name": "signal-text",
+            "cssVar": "--r9-signal-text",
+            "type": "color",
+            "value": "#00779C",
+            "ref": "color.signal.700",
+            "description": "Cyan text on bg or surface"
+          },
+          {
+            "name": "inverse-bg",
+            "cssVar": "--r9-inverse-bg",
+            "type": "color",
+            "value": "#0A0A0C",
+            "ref": "color.gray.950",
+            "description": "Index chips, inverted tags"
+          },
+          {
+            "name": "inverse-fg",
+            "cssVar": "--r9-inverse-fg",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Text on inverse-bg"
+          },
+          {
+            "name": "success",
+            "cssVar": "--r9-success",
+            "type": "color",
+            "value": "#14804A",
+            "ref": "color.green.700",
+            "description": "Success status text and icons. Always with an icon or a word, never color alone"
+          },
+          {
+            "name": "warning",
+            "cssVar": "--r9-warning",
+            "type": "color",
+            "value": "#9A5B00",
+            "ref": "color.amber.700",
+            "description": "Warning status text and icons. Always with an icon or a word"
+          },
+          {
+            "name": "danger",
+            "cssVar": "--r9-danger",
+            "type": "color",
+            "value": "#C2361A",
+            "ref": "color.red.700",
+            "description": "Errors and destructive actions. Always with an icon or a word"
+          },
+          {
+            "name": "dot",
+            "cssVar": "--r9-dot",
+            "type": "color",
+            "value": "#0A0A0C29",
+            "description": "Dot field and dotted grid"
+          },
+          {
+            "name": "scan",
+            "cssVar": "--r9-scan",
+            "type": "color",
+            "value": "#00000000",
+            "description": "Scanlines (off in Clear)"
+          },
+          {
+            "name": "sheen",
+            "cssVar": "--r9-sheen",
+            "type": "color",
+            "value": "#0098C712",
+            "description": "Light band that crosses heroes"
+          },
+          {
+            "name": "selection",
+            "cssVar": "--r9-selection",
+            "type": "color",
+            "value": "#D4006F33",
+            "description": "Text selection"
+          }
+        ],
+        "dark": [
+          {
+            "name": "bg",
+            "cssVar": "--r9-bg",
+            "type": "color",
+            "value": "#050506",
+            "ref": "color.gray.975"
+          },
+          {
+            "name": "surface",
+            "cssVar": "--r9-surface",
+            "type": "color",
+            "value": "#111114",
+            "ref": "color.gray.900"
+          },
+          {
+            "name": "surface-raised",
+            "cssVar": "--r9-surface-raised",
+            "type": "color",
+            "value": "#18181C",
+            "ref": "color.gray.850"
+          },
+          {
+            "name": "glass",
+            "cssVar": "--r9-glass",
+            "type": "color",
+            "value": "#050506C7"
+          },
+          {
+            "name": "fg",
+            "cssVar": "--r9-fg",
+            "type": "color",
+            "value": "#F4F4F6",
+            "ref": "color.gray.10"
+          },
+          {
+            "name": "fg-muted",
+            "cssVar": "--r9-fg-muted",
+            "type": "color",
+            "value": "#A2A2AD",
+            "ref": "color.gray.300"
+          },
+          {
+            "name": "fg-subtle",
+            "cssVar": "--r9-fg-subtle",
+            "type": "color",
+            "value": "#6E6F7A",
+            "ref": "color.gray.500"
+          },
+          {
+            "name": "line",
+            "cssVar": "--r9-line",
+            "type": "color",
+            "value": "#26262C",
+            "ref": "color.gray.800"
+          },
+          {
+            "name": "line-strong",
+            "cssVar": "--r9-line-strong",
+            "type": "color",
+            "value": "#4E4F57",
+            "ref": "color.gray.600"
+          },
+          {
+            "name": "accent",
+            "cssVar": "--r9-accent",
+            "type": "color",
+            "value": "#FF1F9A",
+            "ref": "color.accent.400"
+          },
+          {
+            "name": "accent-hover",
+            "cssVar": "--r9-accent-hover",
+            "type": "color",
+            "value": "#FF4FB0",
+            "ref": "color.accent.300"
+          },
+          {
+            "name": "accent-text",
+            "cssVar": "--r9-accent-text",
+            "type": "color",
+            "value": "#FF4FB0",
+            "ref": "color.accent.300"
+          },
+          {
+            "name": "on-accent",
+            "cssVar": "--r9-on-accent",
+            "type": "color",
+            "value": "#050506",
+            "ref": "color.gray.975"
+          },
+          {
+            "name": "accent-soft",
+            "cssVar": "--r9-accent-soft",
+            "type": "color",
+            "value": "#FF1F9A29"
+          },
+          {
+            "name": "signal",
+            "cssVar": "--r9-signal",
+            "type": "color",
+            "value": "#1FE0FF",
+            "ref": "color.signal.300"
+          },
+          {
+            "name": "signal-text",
+            "cssVar": "--r9-signal-text",
+            "type": "color",
+            "value": "#1FE0FF",
+            "ref": "color.signal.300"
+          },
+          {
+            "name": "inverse-bg",
+            "cssVar": "--r9-inverse-bg",
+            "type": "color",
+            "value": "#F4F4F6",
+            "ref": "color.gray.10"
+          },
+          {
+            "name": "inverse-fg",
+            "cssVar": "--r9-inverse-fg",
+            "type": "color",
+            "value": "#050506",
+            "ref": "color.gray.975"
+          },
+          {
+            "name": "success",
+            "cssVar": "--r9-success",
+            "type": "color",
+            "value": "#3DDC84",
+            "ref": "color.green.400"
+          },
+          {
+            "name": "warning",
+            "cssVar": "--r9-warning",
+            "type": "color",
+            "value": "#FFB020",
+            "ref": "color.amber.400"
+          },
+          {
+            "name": "danger",
+            "cssVar": "--r9-danger",
+            "type": "color",
+            "value": "#FF6B4A",
+            "ref": "color.red.400"
+          },
+          {
+            "name": "dot",
+            "cssVar": "--r9-dot",
+            "type": "color",
+            "value": "#F4F4F621"
+          },
+          {
+            "name": "scan",
+            "cssVar": "--r9-scan",
+            "type": "color",
+            "value": "#FFFFFF08"
+          },
+          {
+            "name": "sheen",
+            "cssVar": "--r9-sheen",
+            "type": "color",
+            "value": "#1FE0FF0D"
+          },
+          {
+            "name": "selection",
+            "cssVar": "--r9-selection",
+            "type": "color",
+            "value": "#FF1F9A4D"
+          }
+        ]
+      }
+    },
+    {
+      "id": "acid",
+      "label": "Acid",
+      "description": "Lime accent, violet signal.",
+      "default": false,
+      "colors": [
+        {
+          "name": "color-accent-300",
+          "cssVar": "--r9-color-accent-300",
+          "type": "color",
+          "value": "#C4FB56"
+        },
+        {
+          "name": "color-accent-400",
+          "cssVar": "--r9-color-accent-400",
+          "type": "color",
+          "value": "#ABF910"
+        },
+        {
+          "name": "color-accent-500",
+          "cssVar": "--r9-color-accent-500",
+          "type": "color",
+          "value": "#649404"
+        },
+        {
+          "name": "color-accent-600",
+          "cssVar": "--r9-color-accent-600",
+          "type": "color",
+          "value": "#567F03"
+        },
+        {
+          "name": "color-accent-700",
+          "cssVar": "--r9-color-accent-700",
+          "type": "color",
+          "value": "#4D7103"
+        },
+        {
+          "name": "color-accent-800",
+          "cssVar": "--r9-color-accent-800",
+          "type": "color",
+          "value": "#3C5902"
+        },
+        {
+          "name": "color-signal-300",
+          "cssVar": "--r9-color-signal-300",
+          "type": "color",
+          "value": "#BC8CFC"
+        },
+        {
+          "name": "color-signal-500",
+          "cssVar": "--r9-color-signal-500",
+          "type": "color",
+          "value": "#AB6EFB"
+        },
+        {
+          "name": "color-signal-700",
+          "cssVar": "--r9-color-signal-700",
+          "type": "color",
+          "value": "#8831FA"
+        }
+      ],
+      "schemes": {
+        "light": [
+          {
+            "name": "bg",
+            "cssVar": "--r9-bg",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Page background"
+          },
+          {
+            "name": "surface",
+            "cssVar": "--r9-surface",
+            "type": "color",
+            "value": "#F5F5F7",
+            "ref": "color.gray.25",
+            "description": "Cards, panels, inputs"
+          },
+          {
+            "name": "surface-raised",
+            "cssVar": "--r9-surface-raised",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Menus, popovers, toasts"
+          },
+          {
+            "name": "glass",
+            "cssVar": "--r9-glass",
+            "type": "color",
+            "value": "#FFFFFFD1",
+            "description": "Translucent surface for UI floating over the dot field (panels, dock, HUD), with a backdrop blur"
+          },
+          {
+            "name": "fg",
+            "cssVar": "--r9-fg",
+            "type": "color",
+            "value": "#0A0A0C",
+            "ref": "color.gray.950",
+            "description": "Main text and icons"
+          },
+          {
+            "name": "fg-muted",
+            "cssVar": "--r9-fg-muted",
+            "type": "color",
+            "value": "#4E4F57",
+            "ref": "color.gray.600",
+            "description": "Secondary text"
+          },
+          {
+            "name": "fg-subtle",
+            "cssVar": "--r9-fg-subtle",
+            "type": "color",
+            "value": "#6E6F7A",
+            "ref": "color.gray.500",
+            "description": "Placeholders, disabled text (large text only)"
+          },
+          {
+            "name": "line",
+            "cssVar": "--r9-line",
+            "type": "color",
+            "value": "#DBDBE1",
+            "ref": "color.gray.100",
+            "description": "Hairline borders and dividers"
+          },
+          {
+            "name": "line-strong",
+            "cssVar": "--r9-line-strong",
+            "type": "color",
+            "value": "#A2A2AD",
+            "ref": "color.gray.300",
+            "description": "Input borders, hovered hairlines"
+          },
+          {
+            "name": "accent",
+            "cssVar": "--r9-accent",
+            "type": "color",
+            "value": "#567F03",
+            "ref": "color.accent.600",
+            "description": "Magenta: primary actions, the one mark on every component"
+          },
+          {
+            "name": "accent-hover",
+            "cssVar": "--r9-accent-hover",
+            "type": "color",
+            "value": "#4D7103",
+            "ref": "color.accent.700",
+            "description": "Hovered and pressed accent fills"
+          },
+          {
+            "name": "accent-text",
+            "cssVar": "--r9-accent-text",
+            "type": "color",
+            "value": "#4D7103",
+            "ref": "color.accent.700",
+            "description": "Magenta text and icons on bg or surface"
+          },
+          {
+            "name": "on-accent",
+            "cssVar": "--r9-on-accent",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Text on accent fills"
+          },
+          {
+            "name": "accent-soft",
+            "cssVar": "--r9-accent-soft",
+            "type": "color",
+            "value": "#567F031F"
+          },
+          {
+            "name": "signal",
+            "cssVar": "--r9-signal",
+            "type": "color",
+            "value": "#AB6EFB",
+            "ref": "color.signal.500",
+            "description": "Cyan: live states, cursor light, data. Never a second brand color"
+          },
+          {
+            "name": "signal-text",
+            "cssVar": "--r9-signal-text",
+            "type": "color",
+            "value": "#8831FA",
+            "ref": "color.signal.700",
+            "description": "Cyan text on bg or surface"
+          },
+          {
+            "name": "inverse-bg",
+            "cssVar": "--r9-inverse-bg",
+            "type": "color",
+            "value": "#0A0A0C",
+            "ref": "color.gray.950",
+            "description": "Index chips, inverted tags"
+          },
+          {
+            "name": "inverse-fg",
+            "cssVar": "--r9-inverse-fg",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Text on inverse-bg"
+          },
+          {
+            "name": "success",
+            "cssVar": "--r9-success",
+            "type": "color",
+            "value": "#14804A",
+            "ref": "color.green.700",
+            "description": "Success status text and icons. Always with an icon or a word, never color alone"
+          },
+          {
+            "name": "warning",
+            "cssVar": "--r9-warning",
+            "type": "color",
+            "value": "#9A5B00",
+            "ref": "color.amber.700",
+            "description": "Warning status text and icons. Always with an icon or a word"
+          },
+          {
+            "name": "danger",
+            "cssVar": "--r9-danger",
+            "type": "color",
+            "value": "#C2361A",
+            "ref": "color.red.700",
+            "description": "Errors and destructive actions. Always with an icon or a word"
+          },
+          {
+            "name": "dot",
+            "cssVar": "--r9-dot",
+            "type": "color",
+            "value": "#0A0A0C29",
+            "description": "Dot field and dotted grid"
+          },
+          {
+            "name": "scan",
+            "cssVar": "--r9-scan",
+            "type": "color",
+            "value": "#00000000",
+            "description": "Scanlines (off in Clear)"
+          },
+          {
+            "name": "sheen",
+            "cssVar": "--r9-sheen",
+            "type": "color",
+            "value": "#AB6EFB12"
+          },
+          {
+            "name": "selection",
+            "cssVar": "--r9-selection",
+            "type": "color",
+            "value": "#567F0333"
+          }
+        ],
+        "dark": [
+          {
+            "name": "bg",
+            "cssVar": "--r9-bg",
+            "type": "color",
+            "value": "#050506",
+            "ref": "color.gray.975"
+          },
+          {
+            "name": "surface",
+            "cssVar": "--r9-surface",
+            "type": "color",
+            "value": "#111114",
+            "ref": "color.gray.900"
+          },
+          {
+            "name": "surface-raised",
+            "cssVar": "--r9-surface-raised",
+            "type": "color",
+            "value": "#18181C",
+            "ref": "color.gray.850"
+          },
+          {
+            "name": "glass",
+            "cssVar": "--r9-glass",
+            "type": "color",
+            "value": "#050506C7"
+          },
+          {
+            "name": "fg",
+            "cssVar": "--r9-fg",
+            "type": "color",
+            "value": "#F4F4F6",
+            "ref": "color.gray.10"
+          },
+          {
+            "name": "fg-muted",
+            "cssVar": "--r9-fg-muted",
+            "type": "color",
+            "value": "#A2A2AD",
+            "ref": "color.gray.300"
+          },
+          {
+            "name": "fg-subtle",
+            "cssVar": "--r9-fg-subtle",
+            "type": "color",
+            "value": "#6E6F7A",
+            "ref": "color.gray.500"
+          },
+          {
+            "name": "line",
+            "cssVar": "--r9-line",
+            "type": "color",
+            "value": "#26262C",
+            "ref": "color.gray.800"
+          },
+          {
+            "name": "line-strong",
+            "cssVar": "--r9-line-strong",
+            "type": "color",
+            "value": "#4E4F57",
+            "ref": "color.gray.600"
+          },
+          {
+            "name": "accent",
+            "cssVar": "--r9-accent",
+            "type": "color",
+            "value": "#ABF910",
+            "ref": "color.accent.400"
+          },
+          {
+            "name": "accent-hover",
+            "cssVar": "--r9-accent-hover",
+            "type": "color",
+            "value": "#C4FB56",
+            "ref": "color.accent.300"
+          },
+          {
+            "name": "accent-text",
+            "cssVar": "--r9-accent-text",
+            "type": "color",
+            "value": "#C4FB56",
+            "ref": "color.accent.300"
+          },
+          {
+            "name": "on-accent",
+            "cssVar": "--r9-on-accent",
+            "type": "color",
+            "value": "#050506",
+            "ref": "color.gray.975"
+          },
+          {
+            "name": "accent-soft",
+            "cssVar": "--r9-accent-soft",
+            "type": "color",
+            "value": "#ABF91029"
+          },
+          {
+            "name": "signal",
+            "cssVar": "--r9-signal",
+            "type": "color",
+            "value": "#BC8CFC",
+            "ref": "color.signal.300"
+          },
+          {
+            "name": "signal-text",
+            "cssVar": "--r9-signal-text",
+            "type": "color",
+            "value": "#BC8CFC",
+            "ref": "color.signal.300"
+          },
+          {
+            "name": "inverse-bg",
+            "cssVar": "--r9-inverse-bg",
+            "type": "color",
+            "value": "#F4F4F6",
+            "ref": "color.gray.10"
+          },
+          {
+            "name": "inverse-fg",
+            "cssVar": "--r9-inverse-fg",
+            "type": "color",
+            "value": "#050506",
+            "ref": "color.gray.975"
+          },
+          {
+            "name": "success",
+            "cssVar": "--r9-success",
+            "type": "color",
+            "value": "#3DDC84",
+            "ref": "color.green.400"
+          },
+          {
+            "name": "warning",
+            "cssVar": "--r9-warning",
+            "type": "color",
+            "value": "#FFB020",
+            "ref": "color.amber.400"
+          },
+          {
+            "name": "danger",
+            "cssVar": "--r9-danger",
+            "type": "color",
+            "value": "#FF6B4A",
+            "ref": "color.red.400"
+          },
+          {
+            "name": "dot",
+            "cssVar": "--r9-dot",
+            "type": "color",
+            "value": "#F4F4F621"
+          },
+          {
+            "name": "scan",
+            "cssVar": "--r9-scan",
+            "type": "color",
+            "value": "#FFFFFF08"
+          },
+          {
+            "name": "sheen",
+            "cssVar": "--r9-sheen",
+            "type": "color",
+            "value": "#BC8CFC0D"
+          },
+          {
+            "name": "selection",
+            "cssVar": "--r9-selection",
+            "type": "color",
+            "value": "#ABF9104D"
+          }
+        ]
+      }
+    },
+    {
+      "id": "volt",
+      "label": "Volt",
+      "description": "Cobalt accent, yellow signal.",
+      "default": false,
+      "colors": [
+        {
+          "name": "color-accent-300",
+          "cssVar": "--r9-color-accent-300",
+          "type": "color",
+          "value": "#88A4FF"
+        },
+        {
+          "name": "color-accent-400",
+          "cssVar": "--r9-color-accent-400",
+          "type": "color",
+          "value": "#6287FF"
+        },
+        {
+          "name": "color-accent-500",
+          "cssVar": "--r9-color-accent-500",
+          "type": "color",
+          "value": "#567DFF"
+        },
+        {
+          "name": "color-accent-600",
+          "cssVar": "--r9-color-accent-600",
+          "type": "color",
+          "value": "#3665FF"
+        },
+        {
+          "name": "color-accent-700",
+          "cssVar": "--r9-color-accent-700",
+          "type": "color",
+          "value": "#1D51FF"
+        },
+        {
+          "name": "color-accent-800",
+          "cssVar": "--r9-color-accent-800",
+          "type": "color",
+          "value": "#0035E3"
+        },
+        {
+          "name": "color-signal-300",
+          "cssVar": "--r9-color-signal-300",
+          "type": "color",
+          "value": "#FFF71A"
+        },
+        {
+          "name": "color-signal-500",
+          "cssVar": "--r9-color-signal-500",
+          "type": "color",
+          "value": "#969100"
+        },
+        {
+          "name": "color-signal-700",
+          "cssVar": "--r9-color-signal-700",
+          "type": "color",
+          "value": "#706C00"
+        }
+      ],
+      "schemes": {
+        "light": [
+          {
+            "name": "bg",
+            "cssVar": "--r9-bg",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Page background"
+          },
+          {
+            "name": "surface",
+            "cssVar": "--r9-surface",
+            "type": "color",
+            "value": "#F5F5F7",
+            "ref": "color.gray.25",
+            "description": "Cards, panels, inputs"
+          },
+          {
+            "name": "surface-raised",
+            "cssVar": "--r9-surface-raised",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Menus, popovers, toasts"
+          },
+          {
+            "name": "glass",
+            "cssVar": "--r9-glass",
+            "type": "color",
+            "value": "#FFFFFFD1",
+            "description": "Translucent surface for UI floating over the dot field (panels, dock, HUD), with a backdrop blur"
+          },
+          {
+            "name": "fg",
+            "cssVar": "--r9-fg",
+            "type": "color",
+            "value": "#0A0A0C",
+            "ref": "color.gray.950",
+            "description": "Main text and icons"
+          },
+          {
+            "name": "fg-muted",
+            "cssVar": "--r9-fg-muted",
+            "type": "color",
+            "value": "#4E4F57",
+            "ref": "color.gray.600",
+            "description": "Secondary text"
+          },
+          {
+            "name": "fg-subtle",
+            "cssVar": "--r9-fg-subtle",
+            "type": "color",
+            "value": "#6E6F7A",
+            "ref": "color.gray.500",
+            "description": "Placeholders, disabled text (large text only)"
+          },
+          {
+            "name": "line",
+            "cssVar": "--r9-line",
+            "type": "color",
+            "value": "#DBDBE1",
+            "ref": "color.gray.100",
+            "description": "Hairline borders and dividers"
+          },
+          {
+            "name": "line-strong",
+            "cssVar": "--r9-line-strong",
+            "type": "color",
+            "value": "#A2A2AD",
+            "ref": "color.gray.300",
+            "description": "Input borders, hovered hairlines"
+          },
+          {
+            "name": "accent",
+            "cssVar": "--r9-accent",
+            "type": "color",
+            "value": "#3665FF",
+            "ref": "color.accent.600",
+            "description": "Magenta: primary actions, the one mark on every component"
+          },
+          {
+            "name": "accent-hover",
+            "cssVar": "--r9-accent-hover",
+            "type": "color",
+            "value": "#1D51FF",
+            "ref": "color.accent.700",
+            "description": "Hovered and pressed accent fills"
+          },
+          {
+            "name": "accent-text",
+            "cssVar": "--r9-accent-text",
+            "type": "color",
+            "value": "#1D51FF",
+            "ref": "color.accent.700",
+            "description": "Magenta text and icons on bg or surface"
+          },
+          {
+            "name": "on-accent",
+            "cssVar": "--r9-on-accent",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Text on accent fills"
+          },
+          {
+            "name": "accent-soft",
+            "cssVar": "--r9-accent-soft",
+            "type": "color",
+            "value": "#3665FF1F"
+          },
+          {
+            "name": "signal",
+            "cssVar": "--r9-signal",
+            "type": "color",
+            "value": "#969100",
+            "ref": "color.signal.500",
+            "description": "Cyan: live states, cursor light, data. Never a second brand color"
+          },
+          {
+            "name": "signal-text",
+            "cssVar": "--r9-signal-text",
+            "type": "color",
+            "value": "#706C00",
+            "ref": "color.signal.700",
+            "description": "Cyan text on bg or surface"
+          },
+          {
+            "name": "inverse-bg",
+            "cssVar": "--r9-inverse-bg",
+            "type": "color",
+            "value": "#0A0A0C",
+            "ref": "color.gray.950",
+            "description": "Index chips, inverted tags"
+          },
+          {
+            "name": "inverse-fg",
+            "cssVar": "--r9-inverse-fg",
+            "type": "color",
+            "value": "#FFFFFF",
+            "ref": "color.gray.0",
+            "description": "Text on inverse-bg"
+          },
+          {
+            "name": "success",
+            "cssVar": "--r9-success",
+            "type": "color",
+            "value": "#14804A",
+            "ref": "color.green.700",
+            "description": "Success status text and icons. Always with an icon or a word, never color alone"
+          },
+          {
+            "name": "warning",
+            "cssVar": "--r9-warning",
+            "type": "color",
+            "value": "#9A5B00",
+            "ref": "color.amber.700",
+            "description": "Warning status text and icons. Always with an icon or a word"
+          },
+          {
+            "name": "danger",
+            "cssVar": "--r9-danger",
+            "type": "color",
+            "value": "#C2361A",
+            "ref": "color.red.700",
+            "description": "Errors and destructive actions. Always with an icon or a word"
+          },
+          {
+            "name": "dot",
+            "cssVar": "--r9-dot",
+            "type": "color",
+            "value": "#0A0A0C29",
+            "description": "Dot field and dotted grid"
+          },
+          {
+            "name": "scan",
+            "cssVar": "--r9-scan",
+            "type": "color",
+            "value": "#00000000",
+            "description": "Scanlines (off in Clear)"
+          },
+          {
+            "name": "sheen",
+            "cssVar": "--r9-sheen",
+            "type": "color",
+            "value": "#96910012"
+          },
+          {
+            "name": "selection",
+            "cssVar": "--r9-selection",
+            "type": "color",
+            "value": "#3665FF33"
+          }
+        ],
+        "dark": [
+          {
+            "name": "bg",
+            "cssVar": "--r9-bg",
+            "type": "color",
+            "value": "#050506",
+            "ref": "color.gray.975"
+          },
+          {
+            "name": "surface",
+            "cssVar": "--r9-surface",
+            "type": "color",
+            "value": "#111114",
+            "ref": "color.gray.900"
+          },
+          {
+            "name": "surface-raised",
+            "cssVar": "--r9-surface-raised",
+            "type": "color",
+            "value": "#18181C",
+            "ref": "color.gray.850"
+          },
+          {
+            "name": "glass",
+            "cssVar": "--r9-glass",
+            "type": "color",
+            "value": "#050506C7"
+          },
+          {
+            "name": "fg",
+            "cssVar": "--r9-fg",
+            "type": "color",
+            "value": "#F4F4F6",
+            "ref": "color.gray.10"
+          },
+          {
+            "name": "fg-muted",
+            "cssVar": "--r9-fg-muted",
+            "type": "color",
+            "value": "#A2A2AD",
+            "ref": "color.gray.300"
+          },
+          {
+            "name": "fg-subtle",
+            "cssVar": "--r9-fg-subtle",
+            "type": "color",
+            "value": "#6E6F7A",
+            "ref": "color.gray.500"
+          },
+          {
+            "name": "line",
+            "cssVar": "--r9-line",
+            "type": "color",
+            "value": "#26262C",
+            "ref": "color.gray.800"
+          },
+          {
+            "name": "line-strong",
+            "cssVar": "--r9-line-strong",
+            "type": "color",
+            "value": "#4E4F57",
+            "ref": "color.gray.600"
+          },
+          {
+            "name": "accent",
+            "cssVar": "--r9-accent",
+            "type": "color",
+            "value": "#6287FF",
+            "ref": "color.accent.400"
+          },
+          {
+            "name": "accent-hover",
+            "cssVar": "--r9-accent-hover",
+            "type": "color",
+            "value": "#88A4FF",
+            "ref": "color.accent.300"
+          },
+          {
+            "name": "accent-text",
+            "cssVar": "--r9-accent-text",
+            "type": "color",
+            "value": "#88A4FF",
+            "ref": "color.accent.300"
+          },
+          {
+            "name": "on-accent",
+            "cssVar": "--r9-on-accent",
+            "type": "color",
+            "value": "#050506",
+            "ref": "color.gray.975"
+          },
+          {
+            "name": "accent-soft",
+            "cssVar": "--r9-accent-soft",
+            "type": "color",
+            "value": "#6287FF29"
+          },
+          {
+            "name": "signal",
+            "cssVar": "--r9-signal",
+            "type": "color",
+            "value": "#FFF71A",
+            "ref": "color.signal.300"
+          },
+          {
+            "name": "signal-text",
+            "cssVar": "--r9-signal-text",
+            "type": "color",
+            "value": "#FFF71A",
+            "ref": "color.signal.300"
+          },
+          {
+            "name": "inverse-bg",
+            "cssVar": "--r9-inverse-bg",
+            "type": "color",
+            "value": "#F4F4F6",
+            "ref": "color.gray.10"
+          },
+          {
+            "name": "inverse-fg",
+            "cssVar": "--r9-inverse-fg",
+            "type": "color",
+            "value": "#050506",
+            "ref": "color.gray.975"
+          },
+          {
+            "name": "success",
+            "cssVar": "--r9-success",
+            "type": "color",
+            "value": "#3DDC84",
+            "ref": "color.green.400"
+          },
+          {
+            "name": "warning",
+            "cssVar": "--r9-warning",
+            "type": "color",
+            "value": "#FFB020",
+            "ref": "color.amber.400"
+          },
+          {
+            "name": "danger",
+            "cssVar": "--r9-danger",
+            "type": "color",
+            "value": "#FF6B4A",
+            "ref": "color.red.400"
+          },
+          {
+            "name": "dot",
+            "cssVar": "--r9-dot",
+            "type": "color",
+            "value": "#F4F4F621"
+          },
+          {
+            "name": "scan",
+            "cssVar": "--r9-scan",
+            "type": "color",
+            "value": "#FFFFFF08"
+          },
+          {
+            "name": "sheen",
+            "cssVar": "--r9-sheen",
+            "type": "color",
+            "value": "#FFF71A0D"
+          },
+          {
+            "name": "selection",
+            "cssVar": "--r9-selection",
+            "type": "color",
+            "value": "#6287FF4D"
+          }
+        ]
+      }
+    }
+  ]
+};
+export default tokens;