@hanzo/design 0.1.0 → 0.3.0

package/prompts/studio-designer.md

@@ -0,0 +1,41 @@
+# Hanzo Studio — Design System Designer (agentic prompt)
+
+The system prompt the Studio "Design System" designer hands to the Hanzo agent
+stack. The agent generates/edits the design-system file tree in **hanzoai/design**
+using its file tools (write/edit/tree), grounded in the canon.
+
+---
+
+You are the **Hanzo Design System designer**, an agent operating on the
+`hanzoai/design` repository. You produce and maintain a complete, coherent design
+system as real files, using your file tools (read, write, edit, tree).
+
+## The canon (never contradict)
+- **Typography:** Basel Grotesk (`sans`, weights 400 Book / 500 Medium, self-hosted
+  woff2) + Geist Mono (`mono`). No Inter/Roboto/DM Sans as defaults.
+- **Palette:** true-black OLED. Page `#000`, surface `#0a0a0a`, press `#050505`,
+  elevated `#171717`, border `rgba(255,255,255,.10)`, text `#ededf1`. **Monochrome —
+  no colored accents.** Semantic color only for live/error/warning.
+- **Sidebar:** 256px expanded / 48px rail; lucide `PanelLeft` toggle; `white/5` hover,
+  `white/10` active.
+- Full source: `guidelines/DESIGN.md`.
+
+## Structure you own
+`tokens/` (base·colors·fonts·spacing·radius·elevation·motion.css + TS modules) ·
+`guidelines/` · `assets/{brand,logos,providers,fonts}` · `components/` · `ui_kits/`.
+
+## How you work
+1. **Read before writing.** `tree` the repo + read `guidelines/DESIGN.md` and the
+   relevant `tokens/*` so every new value stays consistent with what exists.
+2. **Tokens are the source.** A component reads token vars (`var(--hz-*)`), never a
+   hardcoded hex/px. If a needed token is missing, add it to `tokens/` first, then use it.
+3. **One and one way.** One place per value. Don't duplicate a color/space/font.
+4. **Generate real, coherent files** — a request like "add a Card component" writes
+   `components/card.{css,tsx,md}` referencing the tokens + a usage note, not a mock.
+5. **Honor the request scope.** "Generate a design system" → the full tree from the
+   canon. "Add elevation tokens" → just `tokens/elevation.css` + wire into `base.css`.
+6. **Never fabricate brand assets.** Reference real files in `assets/`; if a logo/font
+   is missing, note it as a TODO, don't invent bytes.
+7. **Explain what you wrote** (files + why) so the review is legible.
+
+Output: the files, written to the repo, plus a one-paragraph summary of the change.

package/src/index.ts

@@ -0,0 +1,64 @@
+// @hanzo/design — the ONE programmatic control plane for Hanzo's look & feel.
+//
+// The look/feel is authored ONCE as CSS custom properties in tokens/*.css
+// (monochrome, dark-default — "one hue through an opacity ladder"). This module
+// exposes those exact tokens to code, generated from the CSS so the two can
+// never drift. Change a token in the CSS → the stylesheet AND every code
+// consumer (the @hanzogui/shell theme, Tamagui, any TS surface) update together.
+//
+//   import '@hanzo/design/styles.css'                 // the CSS layer (unchanged)
+//   import { colors, spacing, radius, cssVar } from '@hanzo/design'  // the code layer
+//
+export * from './tokens.gen.js'
+import { cssVars, type CssVarName } from './tokens.gen.js'
+
+/** A token name with the leading `--` omitted: `'background'` for `'--background'`. */
+export type TokenName = CssVarName extends `--${infer N}` ? N : never
+
+/**
+ * A `var(--name, <authored literal>)` reference to a token — the ONE way code
+ * should reach a token, so it resolves through the live CSS cascade (honoring
+ * the viewer's light/dark theme and any brand fork) rather than baking a value.
+ *
+ *   background: cssVar('--background')      // → "var(--background, #000000)"
+ *   color:      cssVar('foreground', '#fff')// → "var(--foreground, #fff)"
+ *
+ * The name is checked AGAINST THE STYLESHEET at compile time. That check used to
+ * be opted out of with `| (string & {})`, which is how `cssVar('surface-1')`
+ * shipped: the token did not exist, `var(--surface-1)` resolved to nothing, and
+ * a menu painted transparent with no error anywhere. An undefined custom
+ * property fails SILENTLY, so the type is the only place it can be caught.
+ *
+ * When no explicit fallback is given the token's own authored literal is used,
+ * so the reference still paints on a host that has not loaded the CSS layer.
+ */
+export function cssVar(name: CssVarName | TokenName, fallback?: string): string {
+  const n = (name.startsWith('--') ? name : `--${name}`) as CssVarName
+  const lit = fallback ?? (cssVars as Record<string, string>)[n]
+  return lit ? `var(${n}, ${lit})` : `var(${n})`
+}
+
+/** The raw authored value of a token (the literal from the CSS), or `undefined`. */
+export function tokenValue(name: CssVarName): string | undefined {
+  return (cssVars as Record<string, string>)[name]
+}
+
+/**
+ * Inject the design-system stylesheet from code (idempotent) for surfaces that
+ * cannot use a bundler CSS import (e.g. a runtime-mounted island). Prefer the
+ * static `import '@hanzo/design/styles.css'` where a bundler is available.
+ * No-op outside the browser.
+ *
+ * `href` is REQUIRED: this used to default to esm.sh, which silently made a
+ * third-party CDN the origin of the entire token layer for anyone who called it
+ * bare. Pass a URL you serve.
+ */
+export function injectDesignCss(href: string): void {
+  if (typeof document === 'undefined') return
+  if (document.querySelector('link[data-hanzo-design]')) return
+  const l = document.createElement('link')
+  l.rel = 'stylesheet'
+  l.href = href
+  l.setAttribute('data-hanzo-design', '')
+  document.head.appendChild(l)
+}

package/src/tokens.gen.ts

@@ -0,0 +1,486 @@
+// AUTO-GENERATED by scripts/gen-tokens.mjs from tokens/*.css — DO NOT EDIT.
+// Edit the token in tokens/<group>.css and re-run `npm run gen`.
+/* eslint-disable */
+
+/** colors tokens (from tokens/colors.css). Values are raw CSS. */
+export const colors = {
+  'neutral-50': '#FAFAFA',
+  'neutral-100': '#F5F5F5',
+  'neutral-200': '#E5E5E5',
+  'neutral-300': '#D4D4D4',
+  'neutral-400': '#A3A3A3',
+  'neutral-500': '#737373',
+  'neutral-600': '#525252',
+  'neutral-700': '#404040',
+  'neutral-800': '#262626',
+  'neutral-900': '#171717',
+  'neutral-950': '#0A0A0A',
+  'pure-black': '#000000',
+  'pure-white': '#FFFFFF',
+  'hanzo-black': '#0A0A0B',
+  'hanzo-white': '#FFFFFF',
+  'white-05': 'rgb(255 255 255 / .05)',
+  'white-10': 'rgb(255 255 255 / .10)',
+  'white-15': 'rgb(255 255 255 / .15)',
+  'white-20': 'rgb(255 255 255 / .20)',
+  'white-30': 'rgb(255 255 255 / .30)',
+  'white-40': 'rgb(255 255 255 / .40)',
+  'white-60': 'rgb(255 255 255 / .60)',
+  'white-80': 'rgb(255 255 255 / .80)',
+  'background': '#000000',
+  'foreground': '#ededed',
+  'card': '#0a0a0a',
+  'card-foreground': '#f5f5f5',
+  'popover': '#0a0a0a',
+  'popover-foreground': '#f5f5f5',
+  'primary': '#ffffff',
+  'primary-foreground': '#000000',
+  'secondary': '#1a1a1a',
+  'secondary-foreground': '#f5f5f5',
+  'muted': '#101010',
+  'muted-foreground': '#888888',
+  'accent': '#1a1a1a',
+  'accent-foreground': '#f5f5f5',
+  'destructive': '#666666',
+  'destructive-foreground': '#f5f5f5',
+  'border': '#1f1f1f',
+  'input': '#1f1f1f',
+  'ring': 'var(--neutral-500)',
+  'brand': '#e4e4e7',
+  'brand-foreground': '#09090b',
+  'brand-muted': '#a3a3a3',
+  'black': '#000000',
+  'white': '#f5f5f5',
+  'surface-page': 'var(--background)',
+  'surface-card': 'rgb(23 23 23 / .5)',
+  'surface-card-emphasis': 'rgb(23 23 23 / .8)',
+  'surface-card-quiet': 'rgb(23 23 23 / .4)',
+  'surface-overlay': 'rgb(10 10 10 / .95)',
+  'surface-header': 'rgb(0 0 0 / .7)',
+  'border-hairline': 'var(--neutral-800)',
+  'border-card': 'var(--white-10)',
+  'border-strong': 'var(--neutral-500)',
+  'surface-0': 'var(--background)',
+  'surface-1': 'var(--card)',
+  'surface-2': 'var(--muted)',
+  'surface-3': 'var(--secondary)',
+  'text-primary': 'var(--pure-white)',
+  'text-secondary': 'var(--white-80)',
+  'text-tertiary': 'var(--white-60)',
+  'text-helper': 'var(--muted-foreground)',
+  'text-disabled': 'var(--white-30)',
+  'state-error': '#ef4444',
+  'state-error-text': '#fca5a5',
+  'state-error-bg': 'rgb(239 68 68 / .1)',
+  'state-online': '#4ade80',
+  'state-success': '#22c55e',
+  'chrome-dot-red': 'rgb(239 68 68 / .6)',
+  'chrome-dot-yellow': 'rgb(234 179 8 / .6)',
+  'chrome-dot-green': 'rgb(34 197 94 / .6)',
+} as const
+
+/** typography tokens (from tokens/typography.css). Values are raw CSS. */
+export const typography = {
+  'text-xs': '0.6875rem',
+  'leading-xs': '1rem',
+  'text-sm': '0.8125rem',
+  'leading-sm': '1.15rem',
+  'text-base': '0.875rem',
+  'leading-base': '1.35rem',
+  'text-lg': '0.9375rem',
+  'leading-lg': '1.4rem',
+  'text-xl': '1.0625rem',
+  'leading-xl': '1.55rem',
+  'text-2xl': '1.3125rem',
+  'leading-2xl': '1.7rem',
+  'text-3xl': '1.625rem',
+  'leading-3xl': '1.95rem',
+  'text-4xl': '2rem',
+  'leading-4xl': '2.25rem',
+  'text-5xl': '2.5rem',
+  'leading-5xl': '1.05',
+  'text-6xl': '3.25rem',
+  'leading-6xl': '1',
+  'text-7xl': '4rem',
+  'leading-7xl': '1',
+  'text-8xl': '5.25rem',
+  'leading-8xl': '1',
+  'text-9xl': '7rem',
+  'leading-9xl': '1',
+  'font-size-xs': 'var(--text-xs)',
+  'font-size-sm': 'var(--text-sm)',
+  'font-size-base': 'var(--text-base)',
+  'font-size-lg': 'var(--text-lg)',
+  'font-size-xl': 'var(--text-xl)',
+  'font-size-2xl': 'var(--text-2xl)',
+  'font-size-3xl': 'var(--text-3xl)',
+  'font-size-4xl': 'var(--text-4xl)',
+  'font-size-5xl': 'var(--text-5xl)',
+  'font-size-6xl': 'var(--text-6xl)',
+  'font-size-7xl': 'var(--text-7xl)',
+  'font-size-8xl': 'var(--text-8xl)',
+  'font-size-9xl': 'var(--text-9xl)',
+  'weight-normal': '400',
+  'weight-medium': '500',
+  'weight-semibold': '600',
+  'weight-bold': '700',
+  'tracking-tight': '-0.025em',
+  'tracking-normal': '0em',
+  'tracking-wide': '0.025em',
+  'tracking-widest': '0.1em',
+  'leading-none': '1',
+  'leading-tight': '1.25',
+  'leading-snug': '1.375',
+  'leading-normal': '1.5',
+  'leading-relaxed': '1.625',
+  'leading-golden': '1.618',
+  'type-hero': '600 var(--text-5xl)/1.05 var(--font-display)',
+  'type-h2': '700 var(--text-4xl)/var(--leading-4xl) var(--font-display)',
+  'type-h3': '600 var(--text-xl)/var(--leading-xl) var(--font-display)',
+  'type-lead': '400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)',
+  'type-body': '400 var(--text-sm)/var(--leading-sm) var(--font-sans)',
+  'type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
+  'type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
+  'type-eyebrow': '600 0.625rem/1 var(--font-sans)',
+} as const
+
+/** spacing tokens (from tokens/spacing.css). Values are raw CSS. */
+export const spacing = {
+  'space-0': '0',
+  'space-1': '0.25rem',
+  'space-2': '0.5rem',
+  'space-3': '0.75rem',
+  'space-4': '1rem',
+  'space-5': '1.25rem',
+  'space-6': '1.5rem',
+  'space-8': '2rem',
+  'space-10': '2.5rem',
+  'space-12': '3rem',
+  'space-14': '3.5rem',
+  'space-16': '4rem',
+  'space-20': '5rem',
+  'space-24': '6rem',
+  'space-32': '8rem',
+  'golden-1': '0.25rem',
+  'golden-2': '0.405rem',
+  'golden-3': '0.654rem',
+  'golden-4': '1.059rem',
+  'golden-5': '1.713rem',
+  'golden-6': '2.772rem',
+  'golden-7': '4.487rem',
+  'golden-8': '7.26rem',
+  'golden-9': '11.749rem',
+  'golden-split': '38.2% 61.8%',
+  'container-max': '80rem',
+  'container-prose': '48rem',
+  'container-wide': '72rem',
+  'gutter': '1rem',
+  'gutter-sm': '1.5rem',
+  'gutter-lg': '2rem',
+  'section-y': '4rem',
+  'section-y-lg': '6rem',
+  'hero-y': '5rem',
+  'hero-y-lg': '8rem',
+  'header-height': '4rem',
+} as const
+
+/** radius tokens (from tokens/radius.css). Values are raw CSS. */
+export const radius = {
+  'radius': '0.5rem',
+  'radius-sm': '0.375rem',
+  'radius-md': '0.5rem',
+  'radius-lg': '0.75rem',
+  'radius-xl': '1rem',
+  'radius-2xl': '1.5rem',
+  'radius-composer': '28px',
+  'radius-full': '9999px',
+} as const
+
+/** elevation tokens (from tokens/elevation.css). Values are raw CSS. */
+export const elevation = {
+  'shadow-none': 'none',
+  'shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
+  'shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
+  'ring-focus': '0 0 0 2px var(--ring)',
+  'shadow-sm': '0 1px 2px 0 rgb(0 0 0 / .40)',
+  'shadow': '0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)',
+  'shadow-md': '0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)',
+  'shadow-lg': '0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)',
+  'shadow-xl': '0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60)',
+  'shadow-2xl': 'var(--shadow-floating)',
+  'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
+  'glow-hero-blur': '120px',
+  'sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+  'gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
+  'gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
+  'gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
+} as const
+
+/** motion tokens (from tokens/motion.css). Values are raw CSS. */
+export const motion = {
+  'duration-fast': '150ms',
+  'duration-base': '300ms',
+  'duration-slow': '400ms',
+  'duration-slower': '500ms',
+  'duration-glow': '9s',
+  'ease-out': 'cubic-bezier(0,0,0.2,1)',
+  'ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+  'stagger': '60ms',
+  'entry-rise': '16px',
+  'entry-rise-lg': '24px',
+} as const
+
+/** zIndex tokens (from tokens/z.css). Values are raw CSS. */
+export const zIndex = {
+  'z-base': '0',
+  'z-raised': '10',
+  'z-sticky': '200',
+  'z-header': '300',
+  'z-dropdown': '400',
+  'z-overlay': '500',
+  'z-modal': '600',
+  'z-popover': '700',
+  'z-toast': '800',
+  'z-tooltip': 'var(--z-popover)',
+  'z-notification': 'var(--z-toast)',
+} as const
+
+/** fonts tokens (from tokens/fonts.css). Values are raw CSS. */
+export const fonts = {
+  'font-sans': '"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif',
+  'font-display': 'var(--font-sans)',
+  'font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
+  'font-serif': 'Georgia,serif',
+  'font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+} as const
+
+/** base tokens (from tokens/base.css). Values are raw CSS. */
+export const base = {
+
+} as const
+
+/** Every token, keyed by its literal CSS custom-property name ('--background', …). */
+export const cssVars = {
+  '--neutral-50': '#FAFAFA',
+  '--neutral-100': '#F5F5F5',
+  '--neutral-200': '#E5E5E5',
+  '--neutral-300': '#D4D4D4',
+  '--neutral-400': '#A3A3A3',
+  '--neutral-500': '#737373',
+  '--neutral-600': '#525252',
+  '--neutral-700': '#404040',
+  '--neutral-800': '#262626',
+  '--neutral-900': '#171717',
+  '--neutral-950': '#0A0A0A',
+  '--pure-black': '#000000',
+  '--pure-white': '#FFFFFF',
+  '--hanzo-black': '#0A0A0B',
+  '--hanzo-white': '#FFFFFF',
+  '--white-05': 'rgb(255 255 255 / .05)',
+  '--white-10': 'rgb(255 255 255 / .10)',
+  '--white-15': 'rgb(255 255 255 / .15)',
+  '--white-20': 'rgb(255 255 255 / .20)',
+  '--white-30': 'rgb(255 255 255 / .30)',
+  '--white-40': 'rgb(255 255 255 / .40)',
+  '--white-60': 'rgb(255 255 255 / .60)',
+  '--white-80': 'rgb(255 255 255 / .80)',
+  '--background': '#000000',
+  '--foreground': '#ededed',
+  '--card': '#0a0a0a',
+  '--card-foreground': '#f5f5f5',
+  '--popover': '#0a0a0a',
+  '--popover-foreground': '#f5f5f5',
+  '--primary': '#ffffff',
+  '--primary-foreground': '#000000',
+  '--secondary': '#1a1a1a',
+  '--secondary-foreground': '#f5f5f5',
+  '--muted': '#101010',
+  '--muted-foreground': '#888888',
+  '--accent': '#1a1a1a',
+  '--accent-foreground': '#f5f5f5',
+  '--destructive': '#666666',
+  '--destructive-foreground': '#f5f5f5',
+  '--border': '#1f1f1f',
+  '--input': '#1f1f1f',
+  '--ring': 'var(--neutral-500)',
+  '--brand': '#e4e4e7',
+  '--brand-foreground': '#09090b',
+  '--brand-muted': '#a3a3a3',
+  '--black': '#000000',
+  '--white': '#f5f5f5',
+  '--surface-page': 'var(--background)',
+  '--surface-card': 'rgb(23 23 23 / .5)',
+  '--surface-card-emphasis': 'rgb(23 23 23 / .8)',
+  '--surface-card-quiet': 'rgb(23 23 23 / .4)',
+  '--surface-overlay': 'rgb(10 10 10 / .95)',
+  '--surface-header': 'rgb(0 0 0 / .7)',
+  '--border-hairline': 'var(--neutral-800)',
+  '--border-card': 'var(--white-10)',
+  '--border-strong': 'var(--neutral-500)',
+  '--surface-0': 'var(--background)',
+  '--surface-1': 'var(--card)',
+  '--surface-2': 'var(--muted)',
+  '--surface-3': 'var(--secondary)',
+  '--text-primary': 'var(--pure-white)',
+  '--text-secondary': 'var(--white-80)',
+  '--text-tertiary': 'var(--white-60)',
+  '--text-helper': 'var(--muted-foreground)',
+  '--text-disabled': 'var(--white-30)',
+  '--state-error': '#ef4444',
+  '--state-error-text': '#fca5a5',
+  '--state-error-bg': 'rgb(239 68 68 / .1)',
+  '--state-online': '#4ade80',
+  '--state-success': '#22c55e',
+  '--chrome-dot-red': 'rgb(239 68 68 / .6)',
+  '--chrome-dot-yellow': 'rgb(234 179 8 / .6)',
+  '--chrome-dot-green': 'rgb(34 197 94 / .6)',
+  '--text-xs': '0.6875rem',
+  '--leading-xs': '1rem',
+  '--text-sm': '0.8125rem',
+  '--leading-sm': '1.15rem',
+  '--text-base': '0.875rem',
+  '--leading-base': '1.35rem',
+  '--text-lg': '0.9375rem',
+  '--leading-lg': '1.4rem',
+  '--text-xl': '1.0625rem',
+  '--leading-xl': '1.55rem',
+  '--text-2xl': '1.3125rem',
+  '--leading-2xl': '1.7rem',
+  '--text-3xl': '1.625rem',
+  '--leading-3xl': '1.95rem',
+  '--text-4xl': '2rem',
+  '--leading-4xl': '2.25rem',
+  '--text-5xl': '2.5rem',
+  '--leading-5xl': '1.05',
+  '--text-6xl': '3.25rem',
+  '--leading-6xl': '1',
+  '--text-7xl': '4rem',
+  '--leading-7xl': '1',
+  '--text-8xl': '5.25rem',
+  '--leading-8xl': '1',
+  '--text-9xl': '7rem',
+  '--leading-9xl': '1',
+  '--font-size-xs': 'var(--text-xs)',
+  '--font-size-sm': 'var(--text-sm)',
+  '--font-size-base': 'var(--text-base)',
+  '--font-size-lg': 'var(--text-lg)',
+  '--font-size-xl': 'var(--text-xl)',
+  '--font-size-2xl': 'var(--text-2xl)',
+  '--font-size-3xl': 'var(--text-3xl)',
+  '--font-size-4xl': 'var(--text-4xl)',
+  '--font-size-5xl': 'var(--text-5xl)',
+  '--font-size-6xl': 'var(--text-6xl)',
+  '--font-size-7xl': 'var(--text-7xl)',
+  '--font-size-8xl': 'var(--text-8xl)',
+  '--font-size-9xl': 'var(--text-9xl)',
+  '--weight-normal': '400',
+  '--weight-medium': '500',
+  '--weight-semibold': '600',
+  '--weight-bold': '700',
+  '--tracking-tight': '-0.025em',
+  '--tracking-normal': '0em',
+  '--tracking-wide': '0.025em',
+  '--tracking-widest': '0.1em',
+  '--leading-none': '1',
+  '--leading-tight': '1.25',
+  '--leading-snug': '1.375',
+  '--leading-normal': '1.5',
+  '--leading-relaxed': '1.625',
+  '--leading-golden': '1.618',
+  '--type-hero': '600 var(--text-5xl)/1.05 var(--font-display)',
+  '--type-h2': '700 var(--text-4xl)/var(--leading-4xl) var(--font-display)',
+  '--type-h3': '600 var(--text-xl)/var(--leading-xl) var(--font-display)',
+  '--type-lead': '400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)',
+  '--type-body': '400 var(--text-sm)/var(--leading-sm) var(--font-sans)',
+  '--type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
+  '--type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
+  '--type-eyebrow': '600 0.625rem/1 var(--font-sans)',
+  '--space-0': '0',
+  '--space-1': '0.25rem',
+  '--space-2': '0.5rem',
+  '--space-3': '0.75rem',
+  '--space-4': '1rem',
+  '--space-5': '1.25rem',
+  '--space-6': '1.5rem',
+  '--space-8': '2rem',
+  '--space-10': '2.5rem',
+  '--space-12': '3rem',
+  '--space-14': '3.5rem',
+  '--space-16': '4rem',
+  '--space-20': '5rem',
+  '--space-24': '6rem',
+  '--space-32': '8rem',
+  '--golden-1': '0.25rem',
+  '--golden-2': '0.405rem',
+  '--golden-3': '0.654rem',
+  '--golden-4': '1.059rem',
+  '--golden-5': '1.713rem',
+  '--golden-6': '2.772rem',
+  '--golden-7': '4.487rem',
+  '--golden-8': '7.26rem',
+  '--golden-9': '11.749rem',
+  '--golden-split': '38.2% 61.8%',
+  '--container-max': '80rem',
+  '--container-prose': '48rem',
+  '--container-wide': '72rem',
+  '--gutter': '1rem',
+  '--gutter-sm': '1.5rem',
+  '--gutter-lg': '2rem',
+  '--section-y': '4rem',
+  '--section-y-lg': '6rem',
+  '--hero-y': '5rem',
+  '--hero-y-lg': '8rem',
+  '--header-height': '4rem',
+  '--radius': '0.5rem',
+  '--radius-sm': '0.375rem',
+  '--radius-md': '0.5rem',
+  '--radius-lg': '0.75rem',
+  '--radius-xl': '1rem',
+  '--radius-2xl': '1.5rem',
+  '--radius-composer': '28px',
+  '--radius-full': '9999px',
+  '--shadow-none': 'none',
+  '--shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
+  '--shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
+  '--ring-focus': '0 0 0 2px var(--ring)',
+  '--shadow-sm': '0 1px 2px 0 rgb(0 0 0 / .40)',
+  '--shadow': '0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .45)',
+  '--shadow-md': '0 4px 6px -1px rgb(0 0 0 / .50), 0 2px 4px -2px rgb(0 0 0 / .50)',
+  '--shadow-lg': '0 10px 15px -3px rgb(0 0 0 / .55), 0 4px 6px -4px rgb(0 0 0 / .55)',
+  '--shadow-xl': '0 20px 25px -5px rgb(0 0 0 / .60), 0 8px 10px -6px rgb(0 0 0 / .60)',
+  '--shadow-2xl': 'var(--shadow-floating)',
+  '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
+  '--glow-hero-blur': '120px',
+  '--sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+  '--gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
+  '--gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
+  '--gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
+  '--duration-fast': '150ms',
+  '--duration-base': '300ms',
+  '--duration-slow': '400ms',
+  '--duration-slower': '500ms',
+  '--duration-glow': '9s',
+  '--ease-out': 'cubic-bezier(0,0,0.2,1)',
+  '--ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+  '--stagger': '60ms',
+  '--entry-rise': '16px',
+  '--entry-rise-lg': '24px',
+  '--z-base': '0',
+  '--z-raised': '10',
+  '--z-sticky': '200',
+  '--z-header': '300',
+  '--z-dropdown': '400',
+  '--z-overlay': '500',
+  '--z-modal': '600',
+  '--z-popover': '700',
+  '--z-toast': '800',
+  '--z-tooltip': 'var(--z-popover)',
+  '--z-notification': 'var(--z-toast)',
+  '--font-sans': '"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif',
+  '--font-display': 'var(--font-sans)',
+  '--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
+  '--font-serif': 'Georgia,serif',
+  '--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+} as const
+
+export type CssVarName = keyof typeof cssVars

package/styles.css

@@ -1,5 +1,8 @@
 /* Hanzo Design System — global entry point. Import THIS one file.
-   Source of truth: hanzo-apps/hanzo.ai (app/globals.css, tailwind.config.ts, DESIGN.md). */
+   Every token group is served here; nothing is authored but left unimported.
+   (`tokens/z.css` went missing from this list once and the whole ladder stopped
+   resolving while still type-checking — see scripts/check-tokens.mjs, which now
+   fails the build if any tokens/*.css is not imported below.) */
 @import url("tokens/fonts.css");
 @import url("tokens/colors.css");
 @import url("tokens/typography.css");

package/tokens/base.css

@@ -2,10 +2,14 @@
    a utility framework. Components carry their own styles inline. */
 *{box-sizing:border-box;border-color:var(--border)}
 html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
-body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-base);font-feature-settings:var(--font-feature-settings)}
-h1,h2,h3,h4{margin:0;font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
+/* Each font-family carries the stack as a literal fallback. --font-sans lives in
+   tokens/fonts.css, which a surface may legitimately import separately; without
+   the fallback an unresolved var() makes font-family invalid and the UA drops to
+   its SERIF default — the whole console silently rendered in Times. */
+body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);font-size:var(--text-base);line-height:var(--leading-base);font-feature-settings:var(--font-feature-settings)}
+h1,h2,h3,h4{margin:0;font-family:var(--font-display,var(--font-sans,ui-sans-serif,system-ui,sans-serif));letter-spacing:var(--tracking-tight);color:var(--text-primary)}
 p{margin:0;text-wrap:pretty}
-code,pre,kbd{font-family:var(--font-mono)}
+code,pre,kbd{font-family:var(--font-mono,ui-monospace,SFMono-Regular,monospace)}
 a{color:var(--text-primary);text-decoration:none;text-underline-offset:4px;transition:color var(--duration-fast) var(--ease-out)}
 a:hover{color:var(--text-primary);text-decoration:underline}
 :focus-visible{outline:2px solid var(--ring);outline-offset:2px}