@hanzo/design 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (147) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +57 -0
  3. package/assets/brand/hero-visualization.png +0 -0
  4. package/assets/brand/industry-cloud.png +0 -0
  5. package/assets/brand/industry-engineering.png +0 -0
  6. package/assets/brand/industry-infrastructure.png +0 -0
  7. package/assets/brand/og-image.png +0 -0
  8. package/assets/favicon.svg +8 -0
  9. package/assets/logo-dark.svg +9 -0
  10. package/assets/logo-light.svg +9 -0
  11. package/assets/logo-wordmark.png +0 -0
  12. package/assets/logo.svg +9 -0
  13. package/assets/logos/anthropic.svg +3 -0
  14. package/assets/logos/deepseek.svg +4 -0
  15. package/assets/logos/google.svg +6 -0
  16. package/assets/logos/groq.svg +3 -0
  17. package/assets/logos/huggingface.svg +3 -0
  18. package/assets/logos/mistral.svg +22 -0
  19. package/assets/logos/openai.svg +3 -0
  20. package/assets/logos/openrouter.svg +1 -0
  21. package/assets/logos/partners/aws.svg +12 -0
  22. package/assets/logos/partners/googlecloud.svg +3 -0
  23. package/assets/logos/partners/lux.svg +6 -0
  24. package/assets/logos/partners/nvidia.svg +7 -0
  25. package/assets/logos/partners/techstars.svg +1 -0
  26. package/assets/logos/partners/zoo-labs-foundation.svg +7 -0
  27. package/assets/logos/qwen.svg +1 -0
  28. package/assets/logos/replicate.svg +3 -0
  29. package/assets/logos/together.svg +6 -0
  30. package/assets/logos/xai.svg +3 -0
  31. package/assets/providers/claude.svg +3 -0
  32. package/assets/providers/codex.svg +3 -0
  33. package/assets/providers/copilot.svg +3 -0
  34. package/assets/providers/cursor.svg +3 -0
  35. package/assets/providers/gemini.svg +3 -0
  36. package/assets/providers/grok.svg +4 -0
  37. package/assets/providers/ollama.svg +7 -0
  38. package/components/core/Avatar.d.ts +5 -0
  39. package/components/core/Avatar.jsx +15 -0
  40. package/components/core/Avatar.prompt.md +8 -0
  41. package/components/core/Badge.d.ts +10 -0
  42. package/components/core/Badge.jsx +47 -0
  43. package/components/core/Badge.prompt.md +9 -0
  44. package/components/core/Button.d.ts +9 -0
  45. package/components/core/Button.jsx +48 -0
  46. package/components/core/Button.prompt.md +9 -0
  47. package/components/core/Card.d.ts +15 -0
  48. package/components/core/Card.jsx +46 -0
  49. package/components/core/Card.prompt.md +13 -0
  50. package/components/core/ChromeText.d.ts +10 -0
  51. package/components/core/ChromeText.jsx +29 -0
  52. package/components/core/ChromeText.prompt.md +8 -0
  53. package/components/core/HanzoLogo.d.ts +11 -0
  54. package/components/core/HanzoLogo.jsx +28 -0
  55. package/components/core/HanzoLogo.prompt.md +8 -0
  56. package/components/core/Icon.d.ts +10 -0
  57. package/components/core/Icon.jsx +43 -0
  58. package/components/core/Icon.prompt.md +9 -0
  59. package/components/core/Progress.d.ts +8 -0
  60. package/components/core/Progress.jsx +11 -0
  61. package/components/core/Progress.prompt.md +8 -0
  62. package/components/core/Table.d.ts +11 -0
  63. package/components/core/Table.jsx +30 -0
  64. package/components/core/Table.prompt.md +10 -0
  65. package/components/core/core.card.html +56 -0
  66. package/components/forms/Checkbox.d.ts +10 -0
  67. package/components/forms/Checkbox.jsx +33 -0
  68. package/components/forms/Checkbox.prompt.md +8 -0
  69. package/components/forms/Input.d.ts +3 -0
  70. package/components/forms/Input.jsx +21 -0
  71. package/components/forms/Input.prompt.md +8 -0
  72. package/components/forms/Label.d.ts +3 -0
  73. package/components/forms/Label.jsx +9 -0
  74. package/components/forms/Label.prompt.md +8 -0
  75. package/components/forms/Select.d.ts +9 -0
  76. package/components/forms/Select.jsx +33 -0
  77. package/components/forms/Select.prompt.md +7 -0
  78. package/components/forms/Slider.d.ts +7 -0
  79. package/components/forms/Slider.jsx +22 -0
  80. package/components/forms/Slider.prompt.md +7 -0
  81. package/components/forms/Textarea.d.ts +3 -0
  82. package/components/forms/Textarea.jsx +21 -0
  83. package/components/forms/Textarea.prompt.md +7 -0
  84. package/components/forms/forms.card.html +39 -0
  85. package/components/navigation/Accordion.d.ts +11 -0
  86. package/components/navigation/Accordion.jsx +37 -0
  87. package/components/navigation/Accordion.prompt.md +10 -0
  88. package/components/navigation/Tabs.d.ts +10 -0
  89. package/components/navigation/Tabs.jsx +47 -0
  90. package/components/navigation/Tabs.prompt.md +11 -0
  91. package/components/navigation/navigation.card.html +31 -0
  92. package/components/overlays/Dialog.d.ts +12 -0
  93. package/components/overlays/Dialog.jsx +41 -0
  94. package/components/overlays/Dialog.prompt.md +13 -0
  95. package/components/overlays/DropdownMenu.d.ts +13 -0
  96. package/components/overlays/DropdownMenu.jsx +49 -0
  97. package/components/overlays/DropdownMenu.prompt.md +11 -0
  98. package/components/overlays/Sheet.d.ts +12 -0
  99. package/components/overlays/Sheet.jsx +31 -0
  100. package/components/overlays/Sheet.prompt.md +10 -0
  101. package/components/overlays/Toaster.d.ts +12 -0
  102. package/components/overlays/Toaster.jsx +49 -0
  103. package/components/overlays/Toaster.prompt.md +9 -0
  104. package/components/overlays/overlays.card.html +44 -0
  105. package/content/README.md +13 -0
  106. package/content/taglines.md +46 -0
  107. package/content/voice.md +52 -0
  108. package/docs/README.md +44 -0
  109. package/docs/integrate.md +86 -0
  110. package/guidelines/brand-elevation.card.html +14 -0
  111. package/guidelines/brand-imagery.card.html +16 -0
  112. package/guidelines/brand-mark.card.html +21 -0
  113. package/guidelines/brand-motion.card.html +14 -0
  114. package/guidelines/brand-partner-logos.card.html +23 -0
  115. package/guidelines/brand-radii.card.html +17 -0
  116. package/guidelines/color-borders.card.html +16 -0
  117. package/guidelines/color-neutrals.card.html +24 -0
  118. package/guidelines/color-opacity-ladder.card.html +22 -0
  119. package/guidelines/color-semantic.card.html +17 -0
  120. package/guidelines/color-surfaces.card.html +17 -0
  121. package/guidelines/color-text-ranks.card.html +16 -0
  122. package/guidelines/iconography.card.html +30 -0
  123. package/guidelines/layout-containers.card.html +15 -0
  124. package/guidelines/spacing-golden.card.html +19 -0
  125. package/guidelines/spacing-scale.card.html +23 -0
  126. package/guidelines/type-body.card.html +14 -0
  127. package/guidelines/type-chrome.card.html +14 -0
  128. package/guidelines/type-display.card.html +14 -0
  129. package/guidelines/type-eyebrow.card.html +14 -0
  130. package/guidelines/type-mono.card.html +14 -0
  131. package/guidelines/type-scale.card.html +20 -0
  132. package/package.json +45 -0
  133. package/prompts/README.md +26 -0
  134. package/prompts/pages.md +53 -0
  135. package/prompts/rules.md +58 -0
  136. package/prompts/system.md +102 -0
  137. package/styles.css +11 -0
  138. package/tokens/base.css +12 -0
  139. package/tokens/colors.css +125 -0
  140. package/tokens/elevation.css +19 -0
  141. package/tokens/fonts.css +13 -0
  142. package/tokens/motion.css +24 -0
  143. package/tokens/radius.css +10 -0
  144. package/tokens/spacing.css +45 -0
  145. package/tokens/typography.css +46 -0
  146. package/tokens/z.css +14 -0
  147. package/ui_kits/hanzo_ai_site/SiteChrome.jsx +131 -0
package/guidelines/type-eyebrow.card.html ADDED
@@ -0,0 +1,14 @@
1
+ <!-- @dsCard group="Type" viewport="700x150" name="Eyebrow & label" subtitle="Uppercase category labels and sidebar section heads" -->
2
+ <!doctype html><html class="dark"><head><meta charset="utf-8"><title>Eyebrow</title><link rel="stylesheet" href="../styles.css">
3
+ <style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
4
+ .g{display:flex;gap:10px;flex-wrap:wrap}.sw{flex:1;min-width:64px}.chip{height:56px;border-radius:8px;border:1px solid var(--white-10)}
5
+ .n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
6
+ .v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
7
+ .row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
8
+ .meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
9
+ </style></head><body>
10
+ <div style="display:flex;flex-direction:column;gap:14px">
11
+ <div class="row"><span style="font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-helper)">Enso → hanzo.app → Hanzo Cloud</span><span class="meta">10px · 600 · tracking-widest</span></div>
12
+ <div class="row"><span style="font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-500)">Workspace</span><span class="meta">sidebar section · 12px · 500</span></div>
13
+ <div class="row"><span style="display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;border:1px solid var(--border-hairline);background:var(--white-05);font-size:14px;color:var(--neutral-200)">Introducing Enso · Hanzo Cloud</span><span class="meta">EyebrowBadge</span></div>
14
+ </div></body></html>
package/guidelines/type-mono.card.html ADDED
@@ -0,0 +1,14 @@
1
+ <!-- @dsCard group="Type" viewport="700x170" name="Mono" subtitle="Geist Mono — code, keys, metrics, token names" -->
2
+ <!doctype html><html class="dark"><head><meta charset="utf-8"><title>Mono</title><link rel="stylesheet" href="../styles.css">
3
+ <style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
4
+ .g{display:flex;gap:10px;flex-wrap:wrap}.sw{flex:1;min-width:64px}.chip{height:56px;border-radius:8px;border:1px solid var(--white-10)}
5
+ .n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
6
+ .v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
7
+ .row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
8
+ .meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
9
+ </style></head><body>
10
+ <div style="display:flex;flex-direction:column;gap:10px">
11
+ <pre style="margin:0;padding:14px;background:var(--card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);font-size:12px;line-height:1.7;color:var(--neutral-300)">$ curl https://api.hanzo.ai/v1/chat/completions \
12
+ -H "Authorization: Bearer $HANZO_API_KEY"</pre>
13
+ <div class="row" style="gap:18px"><span class="mono" style="font-size:13px;color:var(--neutral-200)">enso-pro</span><span class="mono" style="font-size:13px;color:var(--neutral-400)">1,284,902 tokens</span><span class="mono" style="font-size:13px;color:var(--neutral-500)">--surface-card</span></div>
14
+ </div></body></html>
package/guidelines/type-scale.card.html ADDED
@@ -0,0 +1,20 @@
1
+ <!-- @dsCard group="Type" viewport="700x210" name="Scale" subtitle="The rendered ramp, 12 → 60px" -->
2
+ <!doctype html><html class="dark"><head><meta charset="utf-8"><title>Scale</title><link rel="stylesheet" href="../styles.css">
3
+ <style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
4
+ .g{display:flex;gap:10px;flex-wrap:wrap}.sw{flex:1;min-width:64px}.chip{height:56px;border-radius:8px;border:1px solid var(--white-10)}
5
+ .n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
6
+ .v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
7
+ .row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
8
+ .meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
9
+ </style></head><body>
10
+ <div style="display:flex;flex-direction:column;gap:3px">
11
+ <div class="row"><span style="font-size:0.75rem;line-height:1.15;color:var(--neutral-200)">Aa</span><span class="meta">--text-xs · 0.75rem</span></div>
12
+ <div class="row"><span style="font-size:0.875rem;line-height:1.15;color:var(--neutral-200)">Aa</span><span class="meta">--text-sm · 0.875rem</span></div>
13
+ <div class="row"><span style="font-size:1rem;line-height:1.15;color:var(--neutral-200)">Aa</span><span class="meta">--text-base · 1rem</span></div>
14
+ <div class="row"><span style="font-size:1.125rem;line-height:1.15;color:var(--neutral-200)">Aa</span><span class="meta">--text-lg · 1.125rem</span></div>
15
+ <div class="row"><span style="font-size:1.25rem;line-height:1.15;color:var(--neutral-200)">Aa</span><span class="meta">--text-xl · 1.25rem</span></div>
16
+ <div class="row"><span style="font-size:1.5rem;line-height:1.15;color:var(--neutral-200)">Aa</span><span class="meta">--text-2xl · 1.5rem</span></div>
17
+ <div class="row"><span style="font-size:1.875rem;line-height:1.15;color:var(--neutral-200)">Aa</span><span class="meta">--text-3xl · 1.875rem</span></div>
18
+ <div class="row"><span style="font-size:2.25rem;line-height:1.15;color:var(--neutral-200)">Aa</span><span class="meta">--text-4xl · 2.25rem</span></div>
19
+ <div class="row"><span style="font-size:3rem;line-height:1.15;color:var(--neutral-200)">Aa</span><span class="meta">--text-5xl · 3rem</span></div>
20
+ </div></body></html>
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@hanzo/design",
3
+ "version": "0.1.0",
4
+ "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface.",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/hanzoai/design.git"
9
+ },
10
+ "homepage": "https://hanzo.ai",
11
+ "type": "module",
12
+ "sideEffects": [
13
+ "*.css"
14
+ ],
15
+ "exports": {
16
+ "./styles.css": "./styles.css",
17
+ "./tokens/*": "./tokens/*",
18
+ "./components/*": "./components/*",
19
+ "./prompts/*": "./prompts/*",
20
+ "./content/*": "./content/*",
21
+ "./assets/*": "./assets/*"
22
+ },
23
+ "files": [
24
+ "styles.css",
25
+ "tokens",
26
+ "components",
27
+ "prompts",
28
+ "content",
29
+ "docs",
30
+ "assets",
31
+ "guidelines",
32
+ "ui_kits"
33
+ ],
34
+ "keywords": [
35
+ "hanzo",
36
+ "design-system",
37
+ "design-tokens",
38
+ "brand",
39
+ "monochrome"
40
+ ],
41
+ "publishConfig": {
42
+ "access": "public",
43
+ "registry": "https://registry.npmjs.org/"
44
+ }
45
+ }
package/prompts/README.md ADDED
@@ -0,0 +1,26 @@
1
+ # prompts — make an AI build it Hanzo
2
+
3
+ Guidance an agent reads *before* generating a Hanzo surface. Two layers, no
4
+ overlap:
5
+
6
+ | Layer | Lives | Answers |
7
+ |-------|-------|---------|
8
+ | **System** (this folder) | `prompts/` | "How does anything Hanzo look and behave?" |
9
+ | **Component** (co-located) | `components/**/*.prompt.md` | "How do I use *this* Button / Dialog / Card?" |
10
+
11
+ Read the system layer first, then pull the per-component prompt for each part you
12
+ place.
13
+
14
+ | File | Use |
15
+ |------|-----|
16
+ | [`system.md`](system.md) | Paste as the system prompt. The whole brand, compressed to one screen. |
17
+ | [`rules.md`](rules.md) | The do / don't checklist. Grep it before you ship. |
18
+ | [`pages.md`](pages.md) | Ready prompts for full sections — hero, feature grid, pricing, CTA. |
19
+
20
+ Everything here assumes one import gives you the tokens:
21
+
22
+ ```css
23
+ @import "@hanzoai/design/styles.css";
24
+ ```
25
+
26
+ So every rule below can be obeyed with a CSS variable, never a hardcoded hex.
package/prompts/pages.md ADDED
@@ -0,0 +1,53 @@
1
+ # Page prompts
2
+
3
+ Drop-in prompts for whole sections. Each already carries the brand constraints,
4
+ so you can hand one to a model with only the specifics filled in. They assume the
5
+ system prompt (`system.md`) is already loaded and `styles.css` is imported.
6
+
7
+ ## Hero
8
+
9
+ > Build a hero section for **{product}**. Dark, `--background`. Centered column,
10
+ > `--container-prose`, vertical rhythm `--hero-y`/`--hero-y-lg`. One `--type-hero`
11
+ > `h1` (≤ 7 words, scaling to `--text-7xl` on lg), one `--type-lead` subline
12
+ > (≤ 140 chars), one primary `<Button pill>` plus one `outline` secondary.
13
+ > Behind the column, a single `--glow-hero` radial — nothing else. Entry:
14
+ > `hanzo-fade-up`, `--duration-slow`, `--stagger` between the three elements.
15
+
16
+ ## Feature grid
17
+
18
+ > Build a 3-column feature grid (1 column on mobile). Each cell: a `lucide-react`
19
+ > icon at h-6 in `--foreground` at 80%, a `--type-h3` title, a `--type-body`
20
+ > `--text-secondary` description. Cells use `--surface-card`, `--radius-lg`,
21
+ > `--border-card`. No shadows. Constrain to `--container-max`, gutters
22
+ > `--gutter*`. Stagger the cells in on scroll with `hanzo-slide-up-fade`.
23
+
24
+ ## Pricing
25
+
26
+ > Build a 3-tier pricing row. Monochrome cards, `--surface-card`; emphasize the
27
+ > recommended tier with `--surface-card-emphasis` and a `--brand` hairline — not
28
+ > a colored fill. Price in `--type-h2`, cadence in `--text-helper`. "Free" and
29
+ > "Save N%" are the only colored text, `--state-success`. One primary CTA per
30
+ > card, the rest `outline`.
31
+
32
+ ## CTA / resources block (every product page ends with this)
33
+
34
+ > Build the closing section: a top hairline (`--border-hairline`), centered
35
+ > `--container-prose`, a `--type-h2` "Get started", and a row of two or three
36
+ > links — "Read the docs", "View on GitHub", "Talk to us" — as `--text-primary`
37
+ > with underline-on-hover. No new color, no new component.
38
+
39
+ ## Navigation + footer
40
+
41
+ > Build a fixed header: `--surface-header` with backdrop blur, `--header-height`
42
+ > tall, `--z-header`. Left: the H mark from `assets/logo.svg`. Right: text nav
43
+ > links at `--text-secondary`, hover `--text-primary`, and one primary
44
+ > `<Button pill size="sm">`. Footer: `--container-max`, columns of quiet
45
+ > `--text-tertiary` links over `--background`, a hairline on top.
46
+
47
+ ## Rules that still apply
48
+
49
+ - One primary action per view.
50
+ - No hue outside the reserved semantics.
51
+ - Everything Tab-reachable, focus visible, reduced-motion honored.
52
+
53
+ After generating, run `prompts/rules.md` against the output.
package/prompts/rules.md ADDED
@@ -0,0 +1,58 @@
1
+ # Rules — do / don't
2
+
3
+ The checklist. Grep it before you ship a Hanzo surface. Every "don't" maps to a
4
+ token or pattern that makes the "do" trivial.
5
+
6
+ ## Color
7
+
8
+ | Do | Don't |
9
+ |----|-------|
10
+ | Use `--background`, `--foreground`, `--surface-card`, the `--white-*` ladder. | Write a raw hex, `rgb()`, or `hsl()` in a component. |
11
+ | Rank by opacity (`--white-80` > `--white-40`). | Invent an off-ladder step (12%, 37%). |
12
+ | Add a hue **only** for `--state-error`, `--state-online`, `--state-success`, chrome dots, or a third-party logo. | Color a button, gradient, or hero for decoration. |
13
+ | Design the dark surface first. | Treat light as primary. |
14
+
15
+ ## Type
16
+
17
+ | Do | Don't |
18
+ |----|-------|
19
+ | Use `--font-sans` / `--font-mono` and the `--type-*` roles. | Add a third typeface or a raw `font-size` in px. |
20
+ | Sentence case for headings and buttons. | ALL CAPS bodies or Title Case Buttons (eyebrows excepted). |
21
+
22
+ ## Layout & spacing
23
+
24
+ | Do | Don't |
25
+ |----|-------|
26
+ | Constrain to `--container-max` / `--container-prose`; pad with `--gutter*`. | Let content run full-bleed edge to edge. |
27
+ | Space on the `--space-*` ramp. | Hardcode `padding: 13px`. |
28
+ | Remove an element when it feels crowded. | Shrink the spacing to cram more in. |
29
+
30
+ ## Components
31
+
32
+ | Do | Don't |
33
+ |----|-------|
34
+ | One primary (white) action per view; everything else outline or ghost. | Two competing primary buttons. |
35
+ | Plain `<a>` / `<Link>` with className, or the shipped `<Button>`. | `<Button asChild>` — it breaks the build under React 18 strict children. |
36
+ | Elevation as a hairline border + `--shadow-floating` only when floating. | Drop shadows on flat, in-flow cards. |
37
+
38
+ ## Motion
39
+
40
+ | Do | Don't |
41
+ |----|-------|
42
+ | Fade + `--entry-rise`, `hanzo-fade-up`, CSS-only hovers. | Springs, bounce, parallax, autoplay carousels. |
43
+ | Honor `prefers-reduced-motion`. | Animate a transform on hover. |
44
+
45
+ ## Accessibility (non-negotiable)
46
+
47
+ | Do | Don't |
48
+ |----|-------|
49
+ | Keep every body/background pair at WCAG AA, 16px. | Ship `--white-30` text as body copy. |
50
+ | Keep focus visible via `--ring`. | `outline: none` without a replacement ring. |
51
+ | Make dialogs/menus Tab-reachable and Escape-closable. | Trap keyboard users. |
52
+ | Give every `<img>` alt text; mark decorative SVG `aria-hidden`. | Leave images unlabeled. |
53
+
54
+ ## The one test
55
+
56
+ Monochrome, true black, white type, color only as state. If the screenshot
57
+ would look at home on hanzo.ai, it passes. If it looks like a generic SaaS
58
+ template, it fails.
package/prompts/system.md ADDED
@@ -0,0 +1,102 @@
1
+ # The "make it look Hanzo" system prompt
2
+
3
+ Paste everything below the line as a system prompt when you ask a model to
4
+ generate a Hanzo page, component, or screen. It is self-contained.
5
+
6
+ ---
7
+
8
+ You design and build Hanzo interfaces. Hanzo builds enterprise AI infrastructure
9
+ and frontier models. Every surface you produce obeys one atom:
10
+
11
+ **Monochrome. True black. White type. Color only as state, never as decoration.**
12
+
13
+ ## Foundation
14
+
15
+ - **Import once.** `@import "@hanzoai/design/styles.css";` gives you every token
16
+ as a CSS custom property. Use the variables. Never write a raw hex, rgb, px
17
+ font-size, or magic z-index — if you reach for a literal, there is a token for
18
+ it and you are doing it wrong.
19
+ - **Dark is the default.** Mount dark. Light is the rare override, reached by a
20
+ `.light` class on an ancestor. Design the dark surface first and well.
21
+ - **The palette is a ladder, not a wheel.** The entire non-semantic palette is
22
+ the neutral ramp (`--neutral-50` … `--neutral-950`, `--pure-black`,
23
+ `--pure-white`) expressed through an opacity ladder of white on black:
24
+ `--white-05 --white-10 --white-15 --white-20 --white-30 --white-40 --white-60
25
+ --white-80`. Rank reads as opacity. Higher = more important. Never invent an
26
+ in-between step like 12% or 37%.
27
+
28
+ ## Color roles (use these, not raw values)
29
+
30
+ - Page: `--background`. Text: `--foreground`, then `--text-secondary`,
31
+ `--text-tertiary`, `--text-helper` down the rank.
32
+ - Cards / panels: `--surface-card` (`neutral-900/50`), `--surface-card-emphasis`
33
+ for the featured tile, hairline via `--border-card` or `--border-hairline`.
34
+ - The one accent, used sparingly, for a live/active state: `--brand`
35
+ (`#e4e4e7`), hover `--brand-muted`.
36
+ - Focus is always visible: `--ring` (`--ring-focus` shadow).
37
+
38
+ ## The only colored pixels allowed
39
+
40
+ Reserved semantics from DESIGN.md §2.4 — nothing else gets a hue:
41
+
42
+ - `--state-error` (red-500) — destructive or blocking error.
43
+ - `--state-online` (green-400) — live-status dot.
44
+ - `--state-success` (green-500) — "Free" / "Save N%" positive callout.
45
+ - The macOS window-chrome dot trio (`--chrome-dot-*`) at 60%.
46
+ - Third-party brand logos (in `assets/logos`, `assets/providers`) in their own hex.
47
+
48
+ If your design wants a blue button, a purple gradient, or a colored hero — stop.
49
+ That is not Hanzo. Make it white-on-black and let the content carry it.
50
+
51
+ ## Type
52
+
53
+ - Two faces, both loaded by the import: `--font-sans` (Geist),
54
+ `--font-mono` (Geist Mono). Never a third.
55
+ - Reach for a named role before a raw size: `--type-hero`, `--type-h2`,
56
+ `--type-h3`, `--type-lead`, `--type-body`, `--type-caption`, `--type-eyebrow`,
57
+ `--type-code`. Scale steps (`--text-5xl` … `--text-xs`) exist when you need one.
58
+ - Hero `h1`: `--type-hero` (600 weight, `--text-5xl`, tight leading), scaling to
59
+ `--text-7xl` on large screens. Eyebrows are small uppercase with
60
+ `--tracking-widest`.
61
+
62
+ ## Layout
63
+
64
+ - Grids max out at `--container-max` (max-w-7xl, 1280px); centered prose at
65
+ `--container-prose` (max-w-3xl, 768px).
66
+ - Gutters: `--gutter` → `--gutter-sm` → `--gutter-lg` (px-4 / sm:px-6 / lg:px-8).
67
+ - Vertical rhythm: `--hero-y`/`--hero-y-lg` for heroes, `--section-y`/
68
+ `--section-y-lg` for content sections.
69
+ - Density is generous. If a section feels crowded, remove an element before you
70
+ tighten spacing.
71
+
72
+ ## Radius & elevation
73
+
74
+ - `--radius-sm` on buttons/inputs, `--radius-lg` on cards, `--radius-full` on
75
+ pills and avatars. `--radius-composer` (28px) only for the chat composer.
76
+ - Hanzo barely uses shadow. On black, elevation is a hairline border plus, for
77
+ truly floating surfaces, `--shadow-floating`. Heroes get one ambient
78
+ `--glow-hero` radial, nothing more.
79
+
80
+ ## Motion
81
+
82
+ - Restrained. Entry is a fade plus a small rise (`--entry-rise`), `--duration-slow`,
83
+ staggered by `--stagger`. Keyframes ship: `hanzo-fade-up`, `hanzo-slide-up-fade`,
84
+ `hanzo-glow`, `hanzo-pulse-dot`.
85
+ - Hover is a pure CSS opacity or background shift — **never a transform**, never a
86
+ bounce, spring, parallax, or autoplay carousel.
87
+ - Always honor `prefers-reduced-motion` (the token layer already does).
88
+
89
+ ## Icons
90
+
91
+ - `lucide-react`, one set, no other. Sizes h-3/h-4/h-6/h-10.
92
+
93
+ ## Voice (if you write copy)
94
+
95
+ Direct, technical, understated. Numbers over adjectives. No exclamation marks,
96
+ no emoji. Sentence case for headings and buttons. See `content/voice.md`.
97
+
98
+ ## Before you output
99
+
100
+ Run the checklist in `prompts/rules.md`. If any "don't" is present, fix it
101
+ before returning. When in doubt, return to the atom: monochrome, true black,
102
+ white type. If your work does not reinforce it, change your work — not the atom.
package/styles.css ADDED
@@ -0,0 +1,11 @@
1
+ /* Hanzo Design System — global entry point. Import THIS one file.
2
+ Source of truth: hanzo-apps/hanzo.ai (app/globals.css, tailwind.config.ts, DESIGN.md). */
3
+ @import url("tokens/fonts.css");
4
+ @import url("tokens/colors.css");
5
+ @import url("tokens/typography.css");
6
+ @import url("tokens/spacing.css");
7
+ @import url("tokens/radius.css");
8
+ @import url("tokens/elevation.css");
9
+ @import url("tokens/motion.css");
10
+ @import url("tokens/z.css");
11
+ @import url("tokens/base.css");
package/tokens/base.css ADDED
@@ -0,0 +1,12 @@
1
+ /* Minimal element defaults so specimen cards and kits inherit the brand without
2
+ a utility framework. Components carry their own styles inline. */
3
+ *{box-sizing:border-box;border-color:var(--border)}
4
+ html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
5
+ 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)}
6
+ h1,h2,h3,h4{margin:0;font-family:var(--font-display);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
7
+ p{margin:0;text-wrap:pretty}
8
+ code,pre,kbd{font-family:var(--font-mono)}
9
+ a{color:var(--text-primary);text-decoration:none;text-underline-offset:4px;transition:color var(--duration-fast) var(--ease-out)}
10
+ a:hover{color:var(--text-primary);text-decoration:underline}
11
+ :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
12
+ ::selection{background:var(--white-20);color:#fff}
package/tokens/colors.css ADDED
@@ -0,0 +1,125 @@
1
+ /* Hanzo is monochrome. One hue rendered through an opacity ladder.
2
+ Base ladder = Tailwind neutral (tailwind.config.ts). Semantic names match
3
+ hanzo.ai's CSS variables exactly, so code copies over 1:1.
4
+ DARK IS THE DEFAULT THEME (hanzo.ai mounts ThemeProvider defaultTheme="dark"). */
5
+
6
+ :root{
7
+ /* ——— base neutral ladder ——— */
8
+ --neutral-50:#FAFAFA;
9
+ --neutral-100:#F5F5F5;
10
+ --neutral-200:#E5E5E5;
11
+ --neutral-300:#D4D4D4;
12
+ --neutral-400:#A3A3A3;
13
+ --neutral-500:#737373;
14
+ --neutral-600:#525252;
15
+ --neutral-700:#404040;
16
+ --neutral-800:#262626;
17
+ --neutral-900:#171717;
18
+ --neutral-950:#0A0A0A;
19
+ --pure-black:#000000;
20
+ --pure-white:#FFFFFF;
21
+ /* Press-kit brand constants (public/press/hanzo/README.md). */
22
+ --hanzo-black:#0A0A0B;
23
+ --hanzo-white:#FFFFFF;
24
+
25
+ /* ——— the opacity ladder: the real palette ——— */
26
+ --white-05:rgb(255 255 255 / .05);
27
+ --white-10:rgb(255 255 255 / .10);
28
+ --white-15:rgb(255 255 255 / .15);
29
+ --white-20:rgb(255 255 255 / .20);
30
+ --white-30:rgb(255 255 255 / .30);
31
+ --white-40:rgb(255 255 255 / .40);
32
+ --white-60:rgb(255 255 255 / .60);
33
+ --white-80:rgb(255 255 255 / .80);
34
+
35
+ /* ——— semantic aliases (dark, the default) ——— */
36
+ --background:#000000;
37
+ --foreground:#ededed;
38
+ --card:#0a0a0a;
39
+ --card-foreground:#f5f5f5;
40
+ --popover:#0a0a0a;
41
+ --popover-foreground:#f5f5f5;
42
+ --primary:#ffffff;
43
+ --primary-foreground:#000000;
44
+ --secondary:#1a1a1a;
45
+ --secondary-foreground:#f5f5f5;
46
+ --muted:#101010;
47
+ --muted-foreground:#888888;
48
+ --accent:#1a1a1a;
49
+ --accent-foreground:#f5f5f5;
50
+ --destructive:#666666;
51
+ --destructive-foreground:#f5f5f5;
52
+ --border:#1f1f1f;
53
+ --input:#1f1f1f;
54
+ --ring:#333333;
55
+ --brand:#e4e4e7;
56
+ --brand-foreground:#09090b;
57
+ --brand-muted:#a3a3a3;
58
+ --black:#000000;
59
+ --white:#f5f5f5;
60
+
61
+ /* ——— surface recipes (card fills used across hanzo.ai) ——— */
62
+ --surface-page:var(--background);
63
+ --surface-card:rgb(23 23 23 / .5); /* bg-neutral-900/50 — grid tiles */
64
+ --surface-card-emphasis:rgb(23 23 23 / .8);/* bg-neutral-900/80 — featured */
65
+ --surface-card-quiet:rgb(23 23 23 / .4); /* bg-neutral-900/40 — story cards */
66
+ --surface-overlay:rgb(10 10 10 / .95); /* dropdown / popover panels */
67
+ --surface-header:rgb(0 0 0 / .7); /* fixed nav, with backdrop blur */
68
+ --border-hairline:var(--neutral-800);
69
+ --border-card:var(--white-10);
70
+ --border-strong:var(--neutral-700);
71
+
72
+ /* ——— text ranks ——— */
73
+ --text-primary:var(--pure-white);
74
+ --text-secondary:var(--white-80);
75
+ --text-tertiary:var(--white-60);
76
+ --text-helper:var(--muted-foreground);
77
+ --text-disabled:var(--white-30);
78
+
79
+ /* ——— the ONLY permitted hues (DESIGN.md §2.4) ——— */
80
+ --state-error:#ef4444; /* red-500 — destructive / blocking error */
81
+ --state-error-text:#fca5a5; /* red-300 */
82
+ --state-error-bg:rgb(239 68 68 / .1);
83
+ --state-online:#4ade80; /* green-400 — live status dot */
84
+ --state-success:#22c55e; /* green-500 — "Free" / "Save N%" callouts */
85
+ --chrome-dot-red:rgb(239 68 68 / .6);
86
+ --chrome-dot-yellow:rgb(234 179 8 / .6);
87
+ --chrome-dot-green:rgb(34 197 94 / .6);
88
+ }
89
+
90
+ /* Light theme — the same tokens, inverted. Rare: only /brand-style docs pages. */
91
+ .light{
92
+ --background:#ffffff;
93
+ --foreground:#0a0a0a;
94
+ --card:#f5f5f5;
95
+ --card-foreground:#0a0a0a;
96
+ --popover:#ffffff;
97
+ --popover-foreground:#0a0a0a;
98
+ --primary:#0a0a0a;
99
+ --primary-foreground:#ffffff;
100
+ --secondary:#f5f5f5;
101
+ --secondary-foreground:#0a0a0a;
102
+ --muted:#f5f5f5;
103
+ --muted-foreground:#525252;
104
+ --accent:#f5f5f5;
105
+ --accent-foreground:#0a0a0a;
106
+ --destructive:#999999;
107
+ --destructive-foreground:#ffffff;
108
+ --border:#e5e5e5;
109
+ --input:#e5e5e5;
110
+ --ring:#d4d4d4;
111
+ --black:#0a0a0a;
112
+ --white:#ffffff;
113
+ --surface-card:#f5f5f5;
114
+ --surface-card-emphasis:#ffffff;
115
+ --surface-card-quiet:#fafafa;
116
+ --surface-overlay:rgb(255 255 255 / .95);
117
+ --surface-header:rgb(255 255 255 / .8);
118
+ --border-hairline:var(--neutral-200);
119
+ --border-card:rgb(0 0 0 / .1);
120
+ --border-strong:var(--neutral-300);
121
+ --text-primary:var(--neutral-950);
122
+ --text-secondary:rgb(10 10 10 / .8);
123
+ --text-tertiary:rgb(10 10 10 / .6);
124
+ --text-disabled:rgb(10 10 10 / .3);
125
+ }
package/tokens/elevation.css ADDED
@@ -0,0 +1,19 @@
1
+ /* Hanzo barely uses shadow: on black, elevation reads as a hairline border plus
2
+ a wide, very dark drop. Only two levels ship (Tailwind's shadow-2xl for
3
+ floating surfaces) plus the ambient radial glow used behind heroes. */
4
+ :root{
5
+ --shadow-none:none;
6
+ --shadow-floating:0 25px 50px -12px rgb(0 0 0 / .25); /* shadow-2xl: composer, dropdowns, mega panel */
7
+ --shadow-inset-hairline:inset 0 0 0 1px var(--white-10);
8
+ --ring-focus:0 0 0 2px var(--ring);
9
+ /* Ambient hero glow — a single white radial, blurred 120px, low opacity. */
10
+ --glow-hero:radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%); /* @kind color */
11
+ --glow-hero-blur:120px;
12
+ /* Card top-corner sheen used on the story cards. */
13
+ --sheen-card:radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%); /* @kind color */
14
+ /* Chrome text: the canonical headline gradient. Never a saturated rainbow. */
15
+ --gradient-chrome:linear-gradient(to right,#ffffff,var(--white-80),var(--white-60));
16
+ --gradient-chrome-2:linear-gradient(to right,#ffffff,var(--neutral-500));
17
+ /* Section-top protection gradient (hero overlays). */
18
+ --gradient-protect:linear-gradient(to bottom,var(--white-10),transparent);
19
+ }
package/tokens/fonts.css ADDED
@@ -0,0 +1,13 @@
1
+ /* Geist Sans + Geist Mono — the only two faces on Hanzo surfaces.
2
+ hanzo.ai loads them via next/font/google (Geist, Geist_Mono); here they come
3
+ from the same Google Fonts source, so the rendered face is identical. */
4
+ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");
5
+
6
+ :root{
7
+ --font-sans:"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif;
8
+ --font-display:var(--font-sans);
9
+ --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
10
+ --font-serif:Georgia,serif;
11
+ /* hanzo.ai sets these OpenType features on <body>. */
12
+ --font-feature-settings:"ss01","ss02","cv01","cv02","cv03";
13
+ }
package/tokens/motion.css ADDED
@@ -0,0 +1,24 @@
1
+ /* Motion is restrained: fade + small rise, CSS-only hovers, one breathing glow.
2
+ No springs, no bounce, no parallax, no autoplay carousels. */
3
+ :root{
4
+ --duration-fast:150ms; /* @kind other */ /* dropdown / panel open */
5
+ --duration-base:300ms; /* @kind other */ /* slide-up-fade */
6
+ --duration-slow:400ms; /* @kind other */ /* hero element entry */
7
+ --duration-slower:500ms; /* @kind other */ /* section entry */
8
+ --duration-glow:9s; /* @kind other */ /* ambient radial breathe */
9
+ --ease-out:cubic-bezier(0,0,0.2,1); /* @kind other */
10
+ --ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
11
+ --stagger:60ms; /* @kind other */ /* per-element delay in a group */
12
+ --entry-rise:16px; /* hero y-offset */
13
+ --entry-rise-lg:24px; /* card y-offset */
14
+ }
15
+
16
+ @keyframes hanzo-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
17
+ @keyframes hanzo-fade-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
18
+ @keyframes hanzo-slide-up-fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
19
+ @keyframes hanzo-glow{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.08);opacity:.65}}
20
+ @keyframes hanzo-pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
21
+
22
+ @media (prefers-reduced-motion:reduce){
23
+ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
24
+ }
package/tokens/radius.css ADDED
@@ -0,0 +1,10 @@
1
+ :root{
2
+ --radius:0.5rem; /* the base token (globals.css) */
3
+ --radius-sm:0.375rem; /* rounded-md — buttons, inputs */
4
+ --radius-md:0.5rem;
5
+ --radius-lg:0.75rem; /* rounded-xl — cards */
6
+ --radius-xl:1rem; /* rounded-2xl — dropdown panels */
7
+ --radius-2xl:1.5rem; /* rounded-3xl — story / hero cards */
8
+ --radius-composer:28px; /* the chat composer, exactly 28px */
9
+ --radius-full:9999px; /* pills, CTAs, avatars, badges */
10
+ }
package/tokens/spacing.css ADDED
@@ -0,0 +1,45 @@
1
+ /* Spacing: the 4px Tailwind ramp is what ships. The golden-ratio ramp below is
2
+ declared in hanzo.ai's tailwind.config.ts (legacy v3 config, kept for
3
+ reference) — use it for editorial layouts, not for component padding. */
4
+ :root{
5
+ --space-0:0;
6
+ --space-1:0.25rem;
7
+ --space-2:0.5rem;
8
+ --space-3:0.75rem;
9
+ --space-4:1rem;
10
+ --space-5:1.25rem;
11
+ --space-6:1.5rem;
12
+ --space-8:2rem;
13
+ --space-10:2.5rem;
14
+ --space-12:3rem;
15
+ --space-14:3.5rem;
16
+ --space-16:4rem;
17
+ --space-20:5rem;
18
+ --space-24:6rem;
19
+ --space-32:8rem;
20
+
21
+ /* golden ramp (φ) — hanzo.ai tailwind.config.ts */
22
+ --golden-1:0.25rem;
23
+ --golden-2:0.405rem;
24
+ --golden-3:0.654rem;
25
+ --golden-4:1.059rem;
26
+ --golden-5:1.713rem;
27
+ --golden-6:2.772rem;
28
+ --golden-7:4.487rem;
29
+ --golden-8:7.26rem;
30
+ --golden-9:11.749rem;
31
+ --golden-split:38.2% 61.8%; /* @kind other */
32
+
33
+ /* layout rules (DESIGN.md §1.3) */
34
+ --container-max:80rem; /* max-w-7xl — grids */
35
+ --container-prose:48rem; /* max-w-3xl — centered text */
36
+ --container-wide:72rem; /* max-w-6xl — landing sections */
37
+ --gutter:1rem; /* px-4 */
38
+ --gutter-sm:1.5rem; /* sm:px-6 */
39
+ --gutter-lg:2rem; /* lg:px-8 */
40
+ --section-y:4rem; /* py-16 — content sections */
41
+ --section-y-lg:6rem; /* py-24 — landing sections */
42
+ --hero-y:5rem; /* py-20 … */
43
+ --hero-y-lg:8rem; /* … lg:py-32 */
44
+ --header-height:4rem;
45
+ }