@agentshouse/mdhouse-tokens 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Anton (trof3039)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# @agentshouse/mdhouse-tokens
+
+The agents.house design tokens and identity assets. Tokens and assets only:
+no component, no script and no font binary.
+
+A House ceremony page and the official panel both style themselves from this
+package, so a ceremony opened from the panel is recognisably the same product
+([PRD-0072 §2](https://github.com/agentshouse/core/blob/main/docs/prd/prd-0072-the-official-panel-application.md)).
+
+| Export | What it is |
+| --- | --- |
+| `@agentshouse/mdhouse-tokens/tokens.css` | The semantic tokens as CSS custom properties. Light is the root value, dark replaces it under `prefers-color-scheme`, and every scheme token carries both values, so the switch needs no script |
+| `@agentshouse/mdhouse-tokens/tokens.json` | The same tokens, machine-readable, with both schemes resolved to concrete values |
+| `@agentshouse/mdhouse-tokens/assets/*` | The dot mark in its four states, normal, offline, syncing and error, light and dark, and the App icons |
+
+```html
+<link rel="stylesheet" href="…/@agentshouse/mdhouse-tokens/tokens.css" />
+```
+
+```css
+.page {
+  background-color: var(--surface-canvas);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
+}
+```
+
+Never declare a transition on the `background` shorthand for an element whose
+background comes from a token: the shorthand stops `background-color` from
+committing when the token resolves to the other scheme's value. Transition the
+concrete `background-color` longhand instead.
+
+The identity mark carries visible status text beside it and takes the
+precedence error over syncing over offline over normal. Colour is never its
+only signal: the states differ by fill, outline and motion too.
+
+Every file here is derived from `docs/design/system/` in
+[`agentshouse/mdhouse`](https://github.com/agentshouse/mdhouse), which is the
+one owner of the values and the design document that records their provenance.

package/assets/app-icon-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="agents.house"><rect width="512" height="512" rx="114" fill="#181818"/><circle cx="256" cy="256" r="88" fill="#ffffff"/></svg>

package/assets/app-icon-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="agents.house"><rect width="512" height="512" rx="114" fill="#ffffff"/><circle cx="256" cy="256" r="88" fill="#1a1c1f"/></svg>

package/assets/mark-dot-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="agents.house"><circle cx="16" cy="16" r="10" fill="#ffffff"/></svg>

package/assets/mark-dot-error-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="agents.house, error"><circle cx="16" cy="16" r="10" fill="#fb6563"/></svg>

package/assets/mark-dot-error-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="agents.house, error"><circle cx="16" cy="16" r="10" fill="#c8342a"/></svg>

package/assets/mark-dot-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="agents.house"><circle cx="16" cy="16" r="10" fill="#1a1c1f"/></svg>

package/assets/mark-dot-offline-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="agents.house, offline"><circle cx="16" cy="16" r="9" fill="none" stroke="#c2c2c2" stroke-width="2"/></svg>

package/assets/mark-dot-offline-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="agents.house, offline"><circle cx="16" cy="16" r="9" fill="none" stroke="#5e6263" stroke-width="2"/></svg>

package/assets/mark-dot-syncing-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="agents.house, syncing"><style>.pulse{animation:mark-pulse 1800ms ease-in-out infinite}@keyframes mark-pulse{0%,100%{opacity:1}50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.pulse{animation:none}}</style><circle class="pulse" cx="16" cy="16" r="10" fill="#ffffff"/></svg>

package/assets/mark-dot-syncing-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="agents.house, syncing"><style>.pulse{animation:mark-pulse 1800ms ease-in-out infinite}@keyframes mark-pulse{0%,100%{opacity:1}50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.pulse{animation:none}}</style><circle class="pulse" cx="16" cy="16" r="10" fill="#1a1c1f"/></svg>

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@agentshouse/mdhouse-tokens",
+  "version": "0.1.0-alpha.1",
+  "description": "The agents.house design tokens and identity assets: tokens and assets only, no component and no script",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": ["*.css"],
+  "exports": {
+    "./tokens.css": "./tokens.css",
+    "./tokens.json": "./tokens.json",
+    "./assets/*": "./assets/*",
+    "./package.json": "./package.json"
+  },
+  "files": ["tokens.css", "tokens.json", "assets", "README.md", "LICENSE"],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/agentshouse/mdhouse.git",
+    "directory": "packages/tokens"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/tokens.css

@@ -0,0 +1,279 @@
+/* agents.house design tokens
+
+   Provenance of every value:
+     (M) measured from the 2026-09 reference captures in refs/;
+     (D) decided in this repository, where the review measured nothing.
+
+   The capture scale the measured values were divided by was 2.30 image px per
+   CSS px on desktop and 3.00 on mobile. The design document owns the method
+   and the decisions; nothing here is provisional.
+
+   Scheme: the light values are the root values and the dark values replace
+   them under prefers-color-scheme, so the switch needs no script. Every token
+   between the scheme:begin and scheme:end markers carries both values. */
+
+:root {
+  color-scheme: light dark;
+
+  /* ---- primitives: neutral ramp ---- */
+  --ah-gray-0: #ffffff; /* M light canvas */
+  --ah-gray-25: #f9f9fa; /* D */
+  --ah-gray-50: #f4f5f6; /* M light sidebar */
+  --ah-gray-75: #e6e6e6; /* D dark solid action, hovered */
+  --ah-gray-100: #ededed; /* M light border */
+  --ah-gray-150: #eaebeb; /* M light field */
+  --ah-gray-200: #e8e9ea; /* M light selected row */
+  --ah-gray-300: #d8d9da; /* D */
+  --ah-gray-400: #9d9ea0; /* M light muted text */
+  --ah-gray-500: #5e6263; /* M light secondary text and icon */
+  --ah-gray-600: #49494a; /* M dark selected row */
+  --ah-gray-650: #4f4f4f; /* M dark strong border */
+  --ah-gray-700: #444545; /* M dark field */
+  --ah-gray-750: #3a3b3b; /* M dark sidebar */
+  --ah-gray-800: #353535; /* M dark border */
+  --ah-gray-825: #2d2d2d; /* M dark inset inside overlay */
+  --ah-gray-850: #2b2b2b; /* M dark overlay surface */
+  --ah-gray-900: #232323; /* M dark grouped card */
+  --ah-gray-950: #181818; /* M dark canvas */
+  --ah-ink: #1a1c1f; /* M light primary text */
+  --ah-ink-raised: #2c2f33; /* D light solid action, hovered */
+  --ah-white: #ffffff; /* M dark primary text */
+  --ah-dark-secondary: #c2c2c2; /* M dark secondary text and icon */
+  --ah-dark-muted: #838484; /* M dark muted text */
+
+  /* ---- primitives: the only saturated hue in the system ---- */
+  --ah-red-400: #fb6563; /* M dark destructive text */
+  --ah-red-600: #c8342a; /* D light destructive text */
+  --ah-red-700: #a82a22; /* D light destructive, pressed */
+
+  /* ---- typography ---- */
+  /* The platform's own interface font, with Segoe UI and Helvetica Neue as the
+     fallbacks. No web font is loaded and no font binary is packaged. */
+  --font-ui: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+
+  --text-display-size: 26px; /* M */
+  --text-display-lh: 32px;
+  --text-display-ls: -0.01em;
+  --text-title-size: 20px; /* D */
+  --text-title-lh: 26px;
+  --text-heading-size: 17px; /* D */
+  --text-heading-lh: 24px;
+  --text-body-size: 16px; /* M */
+  --text-body-lh: 24px;
+  --text-row-size: 15px; /* M */
+  --text-row-lh: 22px;
+  --text-small-size: 14px; /* M */
+  --text-small-lh: 20px;
+  --text-caption-size: 12px; /* D */
+  --text-caption-lh: 16px;
+  --text-mono-size: 13px; /* D */
+  --text-mono-lh: 20px;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+
+  /* ---- spacing, on a 4px base ---- */
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 6px;
+  --space-4: 8px;
+  --space-5: 10px;
+  --space-6: 12px;
+  --space-7: 16px;
+  --space-8: 20px;
+  --space-9: 24px;
+  --space-10: 32px;
+  --space-11: 40px;
+  --space-12: 48px;
+
+  /* ---- radii ---- */
+  --radius-xs: 6px; /* D */
+  --radius-sm: 8px; /* D */
+  --radius-md: 10px; /* M nav row */
+  --radius-lg: 14px; /* M grouped card and search field */
+  --radius-xl: 18px; /* D dialog and sheet */
+  --radius-pill: 999px;
+
+  /* ---- control and row sizing ---- */
+  --control-h-xs: 24px;
+  --control-h-sm: 28px; /* M small button */
+  --control-h-md: 32px; /* M medium button */
+  --control-h-lg: 36px; /* M large button and form field */
+  --row-h-nav: 34px; /* M desktop navigation row */
+  --row-h-nav-pitch: 35px; /* M */
+  --row-h-setting: 52px; /* M single-line setting row */
+  --row-h-setting-described: 68px; /* M setting row with a description */
+  --row-h-touch: 48px; /* M the floor for any row a finger reaches */
+  --target-touch: 44px; /* D the floor for any control a finger reaches */
+
+  /* Icon sizes are ink sizes, the drawn extent. Lucide draws about 0.83 of its
+     viewBox, so a row icon takes an 18px box to put 16px of ink on the row. */
+  --icon-14: 14px;
+  --icon-16: 16px; /* M nav and setting row icon ink */
+  --icon-18: 18px;
+  --icon-20: 20px;
+  --icon-24: 24px;
+  --icon-stroke: 1.5; /* M */
+  --icon-row-box: 18px; /* M the box that yields 16px of ink */
+
+  /* ---- layout ---- */
+  --sidebar-w: 276px; /* M expanded */
+  --sidebar-w-collapsed: 60px; /* D collapsed */
+  --header-h: 52px; /* M */
+  --measure-document: 768px; /* D */
+  --measure-message: 840px; /* M */
+  --measure-settings: 720px; /* M */
+  --measure-description: 56ch; /* D */
+
+  /* ---- identity ---- */
+  /* The wordmark is the lowercase string agents.house set in the UI face; the
+     period between agents and house is the mark and is drawn as a true circle
+     rather than the face's period. Its geometry is relative to the wordmark's
+     own size, so it holds at every size the wordmark is set at. */
+  --wordmark-size-app: 16px; /* M in the frame header */
+  --wordmark-size-marketing: 20px; /* D on marketing-adjacent surfaces */
+  --mark-diameter: 0.15em; /* M relative to the wordmark size */
+  --mark-bearing: 0.055em; /* M optical side bearing */
+  --mark-standalone: 10px; /* D the standalone mark beside status text */
+  --mark-outline-width: 1.5px; /* M the offline outline */
+
+  /* ---- elevation order ---- */
+  --z-content: 0;
+  --z-sticky: 10;
+  --z-sidebar: 20;
+  --z-popover: 30;
+  --z-scrim: 40;
+  --z-dialog: 50;
+  --z-toast: 60;
+
+  /* ---- motion, restrained ---- */
+  --motion-fast: 90ms; /* D */
+  --motion-base: 140ms; /* D */
+  --motion-slow: 220ms; /* D */
+  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1); /* D */
+  --motion-pulse: 1800ms; /* M the syncing pulse */
+
+  /* scheme:begin */
+  --surface-canvas: var(--ah-gray-0);
+  --surface-sidebar: var(--ah-gray-50);
+  --surface-raised: var(--ah-gray-0);
+  --surface-overlay: var(--ah-gray-0);
+  --surface-inset: var(--ah-gray-50);
+  --surface-grouped: var(--ah-gray-50);
+  --surface-field: var(--ah-gray-150);
+  --surface-scrim: rgba(0, 0, 0, 0.32);
+
+  --text-primary: var(--ah-ink);
+  --text-secondary: var(--ah-gray-500);
+  --text-muted: var(--ah-gray-400);
+  --text-inverse: var(--ah-gray-0);
+  --text-danger: var(--ah-red-600);
+  --text-link: var(--ah-ink);
+
+  --icon-primary: var(--ah-ink);
+  --icon-secondary: var(--ah-gray-500);
+  --icon-muted: var(--ah-gray-400);
+
+  --border-default: var(--ah-gray-100);
+  --border-strong: var(--ah-gray-300);
+  --border-field: var(--ah-gray-100);
+  --separator: var(--ah-gray-100);
+
+  --state-hover: rgba(26, 28, 31, 0.05);
+  --state-pressed: rgba(26, 28, 31, 0.1);
+  --state-selected: var(--ah-gray-200);
+  --state-disabled-text: var(--ah-gray-400);
+  --focus-ring: var(--ah-ink);
+  --focus-ring-offset: var(--surface-canvas);
+
+  --action-solid-bg: var(--ah-ink);
+  --action-solid-fg: var(--ah-gray-0);
+  --action-solid-hover: var(--ah-ink-raised);
+  --action-quiet-fg: var(--ah-ink);
+  /* The destructive fill is a different colour from destructive text: the
+     measured destructive text cannot carry legible ink as a fill. */
+  --danger-solid-bg: var(--ah-red-600);
+  --danger-solid-fg: var(--ah-gray-0);
+  --danger-solid-hover: var(--ah-red-700);
+  --danger-quiet-hover: rgba(200, 52, 42, 0.08);
+
+  --control-track-off: var(--ah-gray-300);
+  --control-track-on: var(--ah-ink);
+  --control-knob: var(--ah-gray-0);
+
+  --mark-fill: var(--ah-ink);
+  --mark-outline: var(--ah-gray-500);
+  --mark-error: var(--ah-red-600);
+
+  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.18);
+  /* scheme:end */
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --surface-canvas: var(--ah-gray-950);
+    --surface-sidebar: var(--ah-gray-750);
+    --surface-raised: var(--ah-gray-900);
+    --surface-overlay: var(--ah-gray-850);
+    --surface-inset: var(--ah-gray-825);
+    --surface-grouped: var(--ah-gray-950);
+    --surface-field: var(--ah-gray-700);
+    --surface-scrim: rgba(0, 0, 0, 0.45);
+
+    --text-primary: var(--ah-white);
+    --text-secondary: var(--ah-dark-secondary);
+    --text-muted: var(--ah-dark-muted);
+    --text-inverse: var(--ah-ink);
+    --text-danger: var(--ah-red-400);
+    --text-link: var(--ah-white);
+
+    --icon-primary: var(--ah-white);
+    --icon-secondary: var(--ah-dark-secondary);
+    --icon-muted: var(--ah-dark-muted);
+
+    --border-default: var(--ah-gray-800);
+    --border-strong: var(--ah-gray-650);
+    --border-field: var(--ah-gray-650);
+    --separator: var(--ah-gray-800);
+
+    --state-hover: rgba(255, 255, 255, 0.06);
+    --state-pressed: rgba(255, 255, 255, 0.12);
+    --state-selected: var(--ah-gray-600);
+    --state-disabled-text: var(--ah-dark-muted);
+    --focus-ring: var(--ah-white);
+    --focus-ring-offset: var(--surface-canvas);
+
+    --action-solid-bg: var(--ah-white);
+    --action-solid-fg: var(--ah-ink);
+    --action-solid-hover: var(--ah-gray-75);
+    --action-quiet-fg: var(--ah-white);
+    --danger-solid-bg: var(--ah-red-400);
+    --danger-solid-fg: var(--ah-ink);
+    --danger-solid-hover: var(--ah-red-600);
+    --danger-quiet-hover: rgba(251, 101, 99, 0.12);
+
+    --control-track-off: var(--ah-gray-650);
+    --control-track-on: var(--ah-white);
+    --control-knob: var(--ah-ink);
+
+    --mark-fill: var(--ah-white);
+    --mark-outline: var(--ah-dark-secondary);
+    --mark-error: var(--ah-red-400);
+
+    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
+    --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.5);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 0ms;
+    --motion-base: 0ms;
+    --motion-slow: 0ms;
+    --motion-pulse: 0ms;
+  }
+}

package/tokens.json

@@ -0,0 +1,216 @@
+{
+  "$meta": {
+    "name": "agents.house design tokens",
+    "version": "0.1.0-alpha.1",
+    "owner": "docs/design/system/tokens.css is the one owner; this file is derived from it",
+    "scheme": "the light values are the root values and the dark values replace them under prefers-color-scheme",
+    "provenance": "M measured from the 2026-09 reference captures, D decided in this repository; the design document owns both"
+  },
+  "primitive": {
+    "--ah-dark-muted": "#838484",
+    "--ah-dark-secondary": "#c2c2c2",
+    "--ah-gray-0": "#ffffff",
+    "--ah-gray-100": "#ededed",
+    "--ah-gray-150": "#eaebeb",
+    "--ah-gray-200": "#e8e9ea",
+    "--ah-gray-25": "#f9f9fa",
+    "--ah-gray-300": "#d8d9da",
+    "--ah-gray-400": "#9d9ea0",
+    "--ah-gray-50": "#f4f5f6",
+    "--ah-gray-500": "#5e6263",
+    "--ah-gray-600": "#49494a",
+    "--ah-gray-650": "#4f4f4f",
+    "--ah-gray-700": "#444545",
+    "--ah-gray-75": "#e6e6e6",
+    "--ah-gray-750": "#3a3b3b",
+    "--ah-gray-800": "#353535",
+    "--ah-gray-825": "#2d2d2d",
+    "--ah-gray-850": "#2b2b2b",
+    "--ah-gray-900": "#232323",
+    "--ah-gray-950": "#181818",
+    "--ah-ink": "#1a1c1f",
+    "--ah-ink-raised": "#2c2f33",
+    "--ah-red-400": "#fb6563",
+    "--ah-red-600": "#c8342a",
+    "--ah-red-700": "#a82a22",
+    "--ah-white": "#ffffff"
+  },
+  "scale": {
+    "--control-h-lg": "36px",
+    "--control-h-md": "32px",
+    "--control-h-sm": "28px",
+    "--control-h-xs": "24px",
+    "--font-mono": "ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace",
+    "--font-ui": "system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    "--header-h": "52px",
+    "--icon-14": "14px",
+    "--icon-16": "16px",
+    "--icon-18": "18px",
+    "--icon-20": "20px",
+    "--icon-24": "24px",
+    "--icon-row-box": "18px",
+    "--icon-stroke": "1.5",
+    "--mark-bearing": "0.055em",
+    "--mark-diameter": "0.15em",
+    "--mark-outline-width": "1.5px",
+    "--mark-standalone": "10px",
+    "--measure-description": "56ch",
+    "--measure-document": "768px",
+    "--measure-message": "840px",
+    "--measure-settings": "720px",
+    "--motion-base": "140ms",
+    "--motion-ease": "cubic-bezier(0.2, 0, 0.2, 1)",
+    "--motion-fast": "90ms",
+    "--motion-pulse": "1800ms",
+    "--motion-slow": "220ms",
+    "--radius-lg": "14px",
+    "--radius-md": "10px",
+    "--radius-pill": "999px",
+    "--radius-sm": "8px",
+    "--radius-xl": "18px",
+    "--radius-xs": "6px",
+    "--row-h-nav": "34px",
+    "--row-h-nav-pitch": "35px",
+    "--row-h-setting": "52px",
+    "--row-h-setting-described": "68px",
+    "--row-h-touch": "48px",
+    "--sidebar-w": "276px",
+    "--sidebar-w-collapsed": "60px",
+    "--space-1": "2px",
+    "--space-10": "32px",
+    "--space-11": "40px",
+    "--space-12": "48px",
+    "--space-2": "4px",
+    "--space-3": "6px",
+    "--space-4": "8px",
+    "--space-5": "10px",
+    "--space-6": "12px",
+    "--space-7": "16px",
+    "--space-8": "20px",
+    "--space-9": "24px",
+    "--target-touch": "44px",
+    "--text-body-lh": "24px",
+    "--text-body-size": "16px",
+    "--text-caption-lh": "16px",
+    "--text-caption-size": "12px",
+    "--text-display-lh": "32px",
+    "--text-display-ls": "-0.01em",
+    "--text-display-size": "26px",
+    "--text-heading-lh": "24px",
+    "--text-heading-size": "17px",
+    "--text-mono-lh": "20px",
+    "--text-mono-size": "13px",
+    "--text-row-lh": "22px",
+    "--text-row-size": "15px",
+    "--text-small-lh": "20px",
+    "--text-small-size": "14px",
+    "--text-title-lh": "26px",
+    "--text-title-size": "20px",
+    "--weight-medium": "500",
+    "--weight-regular": "400",
+    "--weight-semibold": "600",
+    "--wordmark-size-app": "16px",
+    "--wordmark-size-marketing": "20px",
+    "--z-content": "0",
+    "--z-dialog": "50",
+    "--z-popover": "30",
+    "--z-scrim": "40",
+    "--z-sidebar": "20",
+    "--z-sticky": "10",
+    "--z-toast": "60"
+  },
+  "scheme": {
+    "light": {
+      "--action-quiet-fg": "#1a1c1f",
+      "--action-solid-bg": "#1a1c1f",
+      "--action-solid-fg": "#ffffff",
+      "--action-solid-hover": "#2c2f33",
+      "--border-default": "#ededed",
+      "--border-field": "#ededed",
+      "--border-strong": "#d8d9da",
+      "--control-knob": "#ffffff",
+      "--control-track-off": "#d8d9da",
+      "--control-track-on": "#1a1c1f",
+      "--danger-quiet-hover": "rgba(200, 52, 42, 0.08)",
+      "--danger-solid-bg": "#c8342a",
+      "--danger-solid-fg": "#ffffff",
+      "--danger-solid-hover": "#a82a22",
+      "--focus-ring": "#1a1c1f",
+      "--focus-ring-offset": "#ffffff",
+      "--icon-muted": "#9d9ea0",
+      "--icon-primary": "#1a1c1f",
+      "--icon-secondary": "#5e6263",
+      "--mark-error": "#c8342a",
+      "--mark-fill": "#1a1c1f",
+      "--mark-outline": "#5e6263",
+      "--separator": "#ededed",
+      "--shadow-overlay": "0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08)",
+      "--shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06)",
+      "--shadow-sheet": "0 -8px 32px rgba(0, 0, 0, 0.18)",
+      "--state-disabled-text": "#9d9ea0",
+      "--state-hover": "rgba(26, 28, 31, 0.05)",
+      "--state-pressed": "rgba(26, 28, 31, 0.1)",
+      "--state-selected": "#e8e9ea",
+      "--surface-canvas": "#ffffff",
+      "--surface-field": "#eaebeb",
+      "--surface-grouped": "#f4f5f6",
+      "--surface-inset": "#f4f5f6",
+      "--surface-overlay": "#ffffff",
+      "--surface-raised": "#ffffff",
+      "--surface-scrim": "rgba(0, 0, 0, 0.32)",
+      "--surface-sidebar": "#f4f5f6",
+      "--text-danger": "#c8342a",
+      "--text-inverse": "#ffffff",
+      "--text-link": "#1a1c1f",
+      "--text-muted": "#9d9ea0",
+      "--text-primary": "#1a1c1f",
+      "--text-secondary": "#5e6263"
+    },
+    "dark": {
+      "--action-quiet-fg": "#ffffff",
+      "--action-solid-bg": "#ffffff",
+      "--action-solid-fg": "#1a1c1f",
+      "--action-solid-hover": "#e6e6e6",
+      "--border-default": "#353535",
+      "--border-field": "#4f4f4f",
+      "--border-strong": "#4f4f4f",
+      "--control-knob": "#1a1c1f",
+      "--control-track-off": "#4f4f4f",
+      "--control-track-on": "#ffffff",
+      "--danger-quiet-hover": "rgba(251, 101, 99, 0.12)",
+      "--danger-solid-bg": "#fb6563",
+      "--danger-solid-fg": "#1a1c1f",
+      "--danger-solid-hover": "#c8342a",
+      "--focus-ring": "#ffffff",
+      "--focus-ring-offset": "#181818",
+      "--icon-muted": "#838484",
+      "--icon-primary": "#ffffff",
+      "--icon-secondary": "#c2c2c2",
+      "--mark-error": "#fb6563",
+      "--mark-fill": "#ffffff",
+      "--mark-outline": "#c2c2c2",
+      "--separator": "#353535",
+      "--shadow-overlay": "0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3)",
+      "--shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4)",
+      "--shadow-sheet": "0 -8px 40px rgba(0, 0, 0, 0.5)",
+      "--state-disabled-text": "#838484",
+      "--state-hover": "rgba(255, 255, 255, 0.06)",
+      "--state-pressed": "rgba(255, 255, 255, 0.12)",
+      "--state-selected": "#49494a",
+      "--surface-canvas": "#181818",
+      "--surface-field": "#444545",
+      "--surface-grouped": "#181818",
+      "--surface-inset": "#2d2d2d",
+      "--surface-overlay": "#2b2b2b",
+      "--surface-raised": "#232323",
+      "--surface-scrim": "rgba(0, 0, 0, 0.45)",
+      "--surface-sidebar": "#3a3b3b",
+      "--text-danger": "#fb6563",
+      "--text-inverse": "#1a1c1f",
+      "--text-link": "#ffffff",
+      "--text-muted": "#838484",
+      "--text-primary": "#ffffff",
+      "--text-secondary": "#c2c2c2"
+    }
+  }
+}