@hanzo/design 0.1.0 → 0.3.0

package/dist/tokens.gen.js

@@ -0,0 +1,472 @@
+// 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)',
+};
+/** 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)',
+};
+/** 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',
+};
+/** 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',
+};
+/** 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)',
+};
+/** 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',
+};
+/** 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)',
+};
+/** 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"',
+};
+/** base tokens (from tokens/base.css). Values are raw CSS. */
+export const base = {};
+/** 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"',
+};

package/guidelines/DESIGN.md

@@ -0,0 +1,106 @@
+# Hanzo Design System — Canonical Tokens
+
+`@hanzo/ui` is the single source of truth for the shared Hanzo product look across
+the **Tailwind** apps (hanzo.chat, hanzo.app, hanzo console, commerce, hanzo-desktop).
+Change a value here; apps converge on it. This file is that source of truth for the
+three things that must read as **one product**: typography, the sidebar/panel system,
+and the dark-black palette.
+
+> One library: **`@hanzo/ui@8`** (`pkg/ui`, on **`@hanzo/gui`**) IS the component
+> library — the cross-platform product/record layer every surface consumes.
+> **`@hanzo/ui-shadcn`** (`pkgs/ui`) is the legacy shadcn/Tailwind/Radix kit, kept
+> only for existing v5 consumers (pin `@hanzo/ui-shadcn@^5`; no new adoptions).
+> This file stays the source of truth for the *token values* (fonts, dark palette,
+> the sidebar glyph) both render.
+
+---
+
+## 1. Typography — Basel Grotesk + Geist Mono
+
+| Role | Family | Notes |
+|------|--------|-------|
+| UI / body / display / heading (`sans`) | **Basel Grotesk** | Self-hosted. Book = weight **400**, Medium = weight **500**. |
+| code / data / mono (`mono`) | **Geist Mono** | `next/font/google` (`Geist_Mono`) or the geist CDN. |
+| Arabic / Hebrew (`--font-ar` / `--font-he`) | unchanged | i18n only — keep. |
+
+**Dropped as defaults:** Geist Sans, DM Sans, Figtree, Inter, PT Sans, Roboto Mono.
+
+Basel is a **licensed, non-Google** face — **self-host** the woff2/woff, do NOT use
+`next/font/google` for it. Canonical files (mirror lux.exchange):
+`Basel-Grotesk-Book.woff2/.woff` (400), `Basel-Grotesk-Medium.woff2/.woff` (500).
+
+`@font-face` (weights 400/500, `font-display: swap`, `font-style: normal`):
+
+```css
+@font-face {
+  font-family: 'Basel';
+  font-style: normal;
+  font-weight: 400; /* Book; 500 = Medium */
+  font-display: swap;
+  src: url('.../Basel-Grotesk-Book.woff2') format('woff2'),
+       url('.../Basel-Grotesk-Book.woff') format('woff');
+}
+```
+
+Per-app adoption (converge the value, keep each app's own mechanism):
+- **@hanzo/ui / Next apps** → `next/font/local` for Basel (`--font-basel-sans`) +
+  `next/font/google` `Geist_Mono` (`--font-geist-mono`). See `app/lib/fonts.ts`;
+  tailwind `sans → var(--font-basel-sans)`, `mono → var(--font-geist-mono)`.
+- **Vite + Tailwind apps** (chat, launcher, desktop) → self-host Basel `@font-face`
+  + geist-mono CDN import; tailwind `fontFamily.sans = ['Basel', …]`,
+  `mono = ['Geist Mono', …]`.
+- **Tamagui (console)** → Basel `@font-face` in globals + override the Tamagui
+  `body`/`heading` font `family` to Basel; Geist Mono for `code`/`pre`.
+
+---
+
+## 2. Sidebar toggle icon — lucide `PanelLeft`
+
+One glyph everywhere: lucide **`PanelLeft`** (the shadcn `SidebarTrigger` default).
+Where a directional open/close affordance is wanted, use the pair
+**`PanelLeftClose`** (expanded) / **`PanelLeft`** (collapsed). Never a hamburger,
+a magnifier, a directional arrow, or a bespoke panel SVG for the sidebar toggle.
+
+- Icon: stroke-2, ~16–20px, `currentColor`.
+- Button: ghost/outline, square (`size-7`/`h-6 w-6`), subtle hover.
+
+---
+
+## 3. Sidebar + panels
+
+| Spec | Value |
+|------|-------|
+| Sidebar width (expanded) | **16rem / 256px** (`SIDEBAR_WIDTH`) |
+| Sidebar width (collapsed / icon rail) | **3rem / 48px** (apps vary 48–70px) |
+| Sidebar / panel surface | resting **#0a0a0a** over the true-black page |
+| Border / separation | `border-border` — subtle white-alpha ~10% in dark (`border-r` / `border-l`) |
+| Item hover | subtle `white/5` |
+| Item active | monochrome `white/10` — **no colored accent** (the house style is monochrome) |
+| Right panel rail | `border-l border-border`, same surface, collapsible |
+
+Prefer the `@hanzo/ui` `Sidebar` primitive (`pkgs/ui/primitives/sidebar.tsx`,
+`SidebarTrigger` → `PanelLeft`) where the app can consume it; otherwise match these
+classes/tokens.
+
+---
+
+## 4. Dark-black palette (true-black OLED)
+
+The house dark theme is a **true-black** canvas (matches hanzo.ai marketing +
+hanzo.chat OLED), with a shallow surface-depth ladder for cards/panels and quiet
+hairline borders — never harsh pure-white on pure-black.
+
+| Token | Value | Use |
+|-------|-------|-----|
+| Page background | **#000000** (`oklch(0 0 0)`) | body / canvas |
+| Surface / sidebar / panel (resting) | **#0a0a0a** | sidebars, panels, cards |
+| Press | **#050505** | pressed surface |
+| Elevated / hover | **#171717** | hover, raised card |
+| Border / divider | **rgba(255,255,255,0.10)** (≈ `#171717` opaque on black) | hairlines |
+| Foreground (primary text) | near-white **#ededf1** (`oklch(0.985)`) — not pure `#fff` | body text |
+| Muted / secondary text | `white/70` (≈ `#a1a1aa`) | secondary |
+
+Keep each app's theme-token engine (CSS vars / Tailwind tokens / Tamagui `$color*`);
+converge the **values/usage** to the table above, don't rip the engine.
+
+Reference: `pkgs/ui/style/hanzo-default-colors.css` (`.dark` / `.hanzo-ui-dark-theme`).

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@hanzo/design",
-  "version": "0.1.0",
-  "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface.",
-  "license": "MIT",
+  "version": "0.3.0",
+  "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
+  "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
     "url": "https://github.com/hanzoai/design.git"
@@ -12,7 +12,14 @@
   "sideEffects": [
     "*.css"
   ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./styles.css": "./styles.css",
     "./tokens/*": "./tokens/*",
     "./components/*": "./components/*",
@@ -20,7 +27,18 @@
     "./content/*": "./content/*",
     "./assets/*": "./assets/*"
   },
+  "scripts": {
+    "gen": "node scripts/gen-tokens.mjs",
+    "test": "node scripts/check-tokens.mjs",
+    "build": "npm run gen && npm test && tsc -p tsconfig.json",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
   "files": [
+    "dist",
+    "src",
     "styles.css",
     "tokens",
     "components",

package/prompts/README.md

@@ -24,3 +24,10 @@ Everything here assumes one import gives you the tokens:
 ```
 
 So every rule below can be obeyed with a CSS variable, never a hardcoded hex.
+
+## The two prompts (one and one way)
+- **`system.md`** — the design LANGUAGE prompt: paste as a system prompt to make any
+  model generate Hanzo-looking output (monochrome, true-black, token-only).
+- **`studio-designer.md`** — the AGENTIC prompt Hanzo Studio's Design System designer
+  hands the Hanzo agent stack to GENERATE/EDIT this repo's file tree with its file
+  tools, grounded in `guidelines/DESIGN.md`. Uses `system.md`'s language rules.