@hanzo/design 0.1.0

package/content/voice.md

@@ -0,0 +1,52 @@
+# Voice
+
+Direct, technical, understated. Hanzo builds enterprise AI infrastructure and
+frontier models; the writing sounds like the people who build it, not the people
+who market it.
+
+## The five rules
+
+1. **Numbers over adjectives.** "92.9% on GPQA" beats "incredibly smart."
+   "40ms p50" beats "blazing fast." If you cannot measure it, question whether
+   it belongs.
+2. **Say the thing, then stop.** Lead with the claim. Cut the throat-clearing
+   ("We're excited to announce…", "In today's world…"). The reader is busy.
+3. **No exclamation marks. No emoji.** Enthusiasm is carried by substance, not
+   punctuation. This is a hard rule, the same way monochrome is a hard rule.
+4. **Verbs, active, present.** "Deploy a model in one command." Not "Models can
+   be deployed."
+5. **Concrete nouns.** "inference," "agents," "the C-Chain," "an SQLite
+   database" — name the real thing rather than "solutions," "offerings," or
+   "capabilities."
+
+## Before / after
+
+| Instead of | Write |
+|------------|-------|
+| "Blazing-fast, next-gen AI cloud!" | "The AI cloud. Inference at 40ms p50." |
+| "We're thrilled to introduce our new models 🚀" | "New frontier models. Available today." |
+| "Leverage our powerful suite of solutions" | "Run models, agents, and search on one platform." |
+| "Sign up now and get started on your journey!" | "Start free. No card." |
+| "Revolutionary paradigm-shifting technology" | (delete — show the benchmark instead) |
+
+## Words
+
+- **Product names, capitalized:** Hanzo, Hanzo Cloud, Enso, Base, KMS, IAM.
+- **Lowercase the plumbing:** inference, agents, models, tokens, endpoints.
+- **One space, one period.** Sentence case for headings and buttons — "Get
+  started," not "Get Started" or "GET STARTED." Eyebrows are the one exception:
+  small uppercase category labels (see `--type-eyebrow`).
+- **Never** "revolutionary," "cutting-edge," "game-changing," "seamless,"
+  "unleash," "supercharge," "delve," "in today's fast-paced world."
+
+## Length
+
+- **Hero headline:** ≤ 7 words.
+- **Hero subline / tagline:** ≤ 140 characters, one sentence.
+- **Body:** short paragraphs, two to four sentences. If a paragraph needs a
+  scrollbar, split it.
+
+## The test
+
+Read it aloud. If it sounds like a person explaining their work to a smart
+colleague, keep it. If it sounds like a press release, rewrite it.

package/docs/README.md

@@ -0,0 +1,44 @@
+# docs — how to use the system
+
+The design system is one idea applied without exception: **Hanzo is monochrome,
+true black, white type, and color is a signal — never a decoration.** Everything
+else is machinery in service of that idea.
+
+If you remember one thing: **import one file, then reach for a token instead of a
+literal.** Do that and your surface is already 90% on-brand.
+
+```css
+@import "@hanzoai/design/styles.css";
+```
+
+## The map
+
+| You want | Go to |
+|----------|-------|
+| To wire the tokens into an app | [`integrate.md`](integrate.md) |
+| The raw values (color, type, space, radius, motion, z, elevation) | [`../tokens/`](../tokens/) |
+| A component and how to use it | [`../components/`](../components/) + its `*.prompt.md` |
+| To *see* a rule rendered | [`../guidelines/`](../guidelines/) specimen cards |
+| An AI to generate an on-brand screen | [`../prompts/`](../prompts/) |
+| The words — voice, taglines | [`../content/`](../content/) |
+| The mark, wordmark, logos | [`../assets/`](../assets/) |
+
+## Why it is built this way
+
+- **One import.** A single `styles.css` pulls the whole token layer in a fixed
+  order. There is no partial setup to get wrong.
+- **Tokens, not literals.** Every value is a CSS custom property whose name
+  matches hanzo.ai's own variables. Code copies between the app and this system
+  1:1, because they speak the same names.
+- **Dark by construction.** Surfaces mount dark. Light is a `.light` override for
+  the few brand and docs pages that need it.
+- **Opacity is the palette.** One neutral ladder plus an opacity ladder is the
+  entire non-semantic color system. Rank reads as opacity. This is why Hanzo
+  looks like Hanzo and not like a theme.
+- **The parts are self-contained.** Components carry their own inline styles, so
+  one drops into Next, Vite, Tamagui, or nothing and renders identically.
+
+## The one rule that overrides the rest
+
+When a decision is unclear, return to the atom. Monochrome, true black, white
+type. If the work reinforces it, keep the work. If it doesn't, change the work.

package/docs/integrate.md

@@ -0,0 +1,86 @@
+# Integrate
+
+## 1. Install
+
+```bash
+pnpm add @hanzoai/design
+```
+
+## 2. Import the tokens — once
+
+```css
+/* app/globals.css, or the root of your styles */
+@import "@hanzoai/design/styles.css";
+```
+
+That one file pulls in, in order: fonts (Geist + Geist Mono), color, typography,
+spacing, radius, elevation, motion, z, and base element defaults. After it,
+every token below is a live CSS custom property.
+
+## 3. Build with tokens, not literals
+
+```css
+.panel{
+  background: var(--surface-card);
+  border: 1px solid var(--border-card);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  color: var(--text-secondary);
+  font: var(--type-body);
+}
+.panel h3{ font: var(--type-h3); color: var(--text-primary); }
+```
+
+There is a token for color, type, space, radius, elevation, motion, and stacking
+order. If you find yourself typing a hex, a px font-size, or a bare z-index,
+there is a variable for it — use that instead.
+
+## 4. Theme
+
+Dark is the default; the tokens are already the dark values at `:root`. To render
+a subtree light, add `.light` to an ancestor:
+
+```html
+<body>            <!-- dark: the Hanzo default -->
+  <article class="light"> … </article>   <!-- inverted, for brand/docs pages -->
+</body>
+```
+
+Nothing else changes — the same token names resolve to inverted values.
+
+## 5. Use a component
+
+Each part ships as `.jsx` + `.d.ts` + a `.prompt.md` usage guide. They are
+self-contained (inline styles), so they need no framework:
+
+```jsx
+import { Button } from "@hanzoai/design/components/core/Button.jsx";
+import { HanzoLogo } from "@hanzoai/design/components/core/HanzoLogo.jsx";
+
+<HanzoLogo />
+<Button pill>Get started</Button>
+```
+
+Read the neighboring `Button.prompt.md` for variants and rules before you place
+one.
+
+## 6. Extend without breaking the brand
+
+- Add a new component? Consume the tokens; do not introduce a value that is not
+  already one. Ship it with a `.prompt.md`.
+- Need a color the ladder does not have? You almost certainly don't. The only
+  new hues allowed are the reserved semantics in `prompts/rules.md`.
+- Building on Tamagui / `@hanzo/gui`? Map these CSS custom properties to your
+  Tamagui tokens 1:1 — same names, same values — so the two layers never drift.
+
+## 7. Generate with AI
+
+Give a model `prompts/system.md` as its system prompt, hand it the relevant
+`prompts/pages.md` block, and check the result against `prompts/rules.md`. The
+constraints are written so an agent can satisfy every one of them with a token.
+
+## Reference
+
+- Values: [`../tokens/`](../tokens/)
+- Rendered specimens: [`../guidelines/`](../guidelines/)
+- Voice: [`../content/voice.md`](../content/voice.md)

package/guidelines/brand-elevation.card.html

@@ -0,0 +1,14 @@
+<!-- @dsCard group="Brand" viewport="700x180" name="Elevation & glow" subtitle="A hairline, one deep shadow, and the ambient hero radial" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Elevation</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;gap:16px;align-items:stretch">
+  <div style="flex:1;padding:14px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);font-size:12px;color:var(--neutral-400)">flat — hairline only<div class="n" style="margin-top:8px">--shadow-none</div></div>
+  <div style="flex:1;padding:14px;background:var(--surface-overlay);border:1px solid var(--border-hairline);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);font-size:12px;color:var(--neutral-400)">floating — menu, dialog, composer<div class="n" style="margin-top:8px">--shadow-floating</div></div>
+  <div style="flex:1;position:relative;overflow:hidden;background:#000;border:1px solid var(--border-hairline);border-radius:var(--radius-lg)"><div style="position:absolute;left:50%;top:50%;width:220px;height:220px;transform:translate(-50%,-50%);background:var(--glow-hero);filter:blur(60px)"></div><div style="position:relative;padding:14px;font-size:12px;color:var(--neutral-300)">ambient glow<div class="n" style="margin-top:8px">--glow-hero</div></div></div>
+</div></body></html>

package/guidelines/brand-imagery.card.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Brand" viewport="700x200" name="Imagery" subtitle="Cool, near-black renders — imagery is rare and never decorative" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Imagery</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;gap:10px">
+  <img src="../assets/brand/hero-visualization.png" alt="" style="width:33%;height:150px;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border-hairline)">
+  <img src="../assets/brand/industry-cloud.png" alt="" style="width:33%;height:150px;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border-hairline)">
+  <img src="../assets/brand/industry-infrastructure.png" alt="" style="width:33%;height:150px;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border-hairline)">
+</div>
+<div class="meta" style="margin-top:10px">assets/brand/* · cool-toned, low-key, no warm gradients, no illustration style</div>
+</body></html>

package/guidelines/brand-mark.card.html

@@ -0,0 +1,21 @@
+<!-- @dsCard group="Brand" viewport="700x170" name="The mark" subtitle="Press-kit logo, its sizes and the wordmark lockup" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Mark</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;align-items:center;gap:34px">
+  <div style="text-align:center"><img src="../assets/logo.svg" width="56" height="56" alt="Hanzo mark" style="filter:invert(1) brightness(2)"><div class="n" style="margin-top:8px">assets/logo.svg</div></div>
+  <div style="display:flex;align-items:center;gap:8px"><img src="../assets/logo.svg" width="22" height="22" alt="" style="filter:invert(1) brightness(2)"><span style="font-size:15px;font-weight:600;letter-spacing:-.02em">Hanzo AI</span><span class="meta" style="margin-left:10px">nav lockup · 22px</span></div>
+  <div style="display:flex;align-items:flex-end;gap:14px">
+    <img src="../assets/logo.svg" width="16" height="16" alt="" style="filter:invert(1) brightness(2)">
+    <img src="../assets/logo.svg" width="22" height="22" alt="" style="filter:invert(1) brightness(2)">
+    <img src="../assets/logo.svg" width="32" height="32" alt="" style="filter:invert(1) brightness(2)">
+    <span class="meta">16 · 22 · 32</span>
+  </div>
+</div>
+<div class="meta" style="margin-top:14px">Hanzo Black #0A0A0B · Hanzo White #FFFFFF · monochrome only, never stretched or re-hued</div>
+</body></html>

package/guidelines/brand-motion.card.html

@@ -0,0 +1,14 @@
+<!-- @dsCard group="Brand" viewport="700x160" name="Motion" subtitle="Fade + small rise. No springs, no bounce, no parallax" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Motion</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+.dm{animation:hanzo-slide-up-fade 1.6s var(--ease-out) infinite}.dg{animation:hanzo-glow 9s var(--ease-in-out) infinite}</style></head><body>
+<div style="display:flex;gap:16px;align-items:stretch">
+  <div style="flex:1;padding:14px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);overflow:hidden"><div class="dm" style="font-size:12px;color:var(--neutral-200)">entry: opacity 0→1, y 20→0</div><div class="n" style="margin-top:10px">500ms · ease-out · 60ms stagger</div></div>
+  <div style="flex:1;padding:14px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);position:relative;overflow:hidden"><div class="dg" style="position:absolute;inset:-40px;background:var(--glow-hero);filter:blur(50px)"></div><div style="position:relative;font-size:12px;color:var(--neutral-200)">ambient glow breathe</div><div class="n" style="position:relative;margin-top:10px">9s · scale 1→1.08</div></div>
+  <div style="flex:1;padding:14px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg)"><div style="font-size:12px;color:var(--neutral-200)">hover: colour only</div><div class="n" style="margin-top:10px">150ms · transition-colors</div></div>
+</div></body></html>

package/guidelines/brand-partner-logos.card.html

@@ -0,0 +1,23 @@
+<!-- @dsCard group="Brand" viewport="700x160" name="Third-party logos" subtitle="Provider and partner marks keep their own identity" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Third-party logos</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+img{filter:invert(1) brightness(2);opacity:.75}</style></head><body>
+<div style="display:flex;flex-wrap:wrap;align-items:center;gap:22px">
+  <img src="../assets/logos/openai.svg" alt="OpenAI" height="20">
+  <img src="../assets/logos/anthropic.svg" alt="Anthropic" height="20">
+  <img src="../assets/logos/google.svg" alt="Google" height="20">
+  <img src="../assets/logos/mistral.svg" alt="Mistral" height="20">
+  <img src="../assets/logos/deepseek.svg" alt="DeepSeek" height="20">
+  <img src="../assets/logos/qwen.svg" alt="Qwen" height="20">
+  <img src="../assets/logos/groq.svg" alt="Groq" height="20">
+  <img src="../assets/logos/partners/nvidia.svg" alt="NVIDIA" height="20">
+  <img src="../assets/logos/partners/aws.svg" alt="AWS" height="22">
+  <img src="../assets/logos/partners/techstars.svg" alt="Techstars" height="18">
+</div>
+<div class="meta" style="margin-top:14px">assets/logos · assets/providers — rendered mono at 75% on dark; official colour only when recognition demands it</div>
+</body></html>

package/guidelines/brand-radii.card.html

@@ -0,0 +1,17 @@
+<!-- @dsCard group="Brand" viewport="700x150" name="Radii" subtitle="Six steps, from the 6px button to the 28px composer" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Radii</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div class="g">
+  <div class="sw"><div style="height:48px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:6px"></div><div class="n">6px</div><div class="v">button · input</div></div>
+  <div class="sw"><div style="height:48px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:12px"></div><div class="n">12px</div><div class="v">card</div></div>
+  <div class="sw"><div style="height:48px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:16px"></div><div class="n">16px</div><div class="v">panel</div></div>
+  <div class="sw"><div style="height:48px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:24px"></div><div class="n">24px</div><div class="v">story card</div></div>
+  <div class="sw"><div style="height:48px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:28px"></div><div class="n">28px</div><div class="v">composer</div></div>
+  <div class="sw"><div style="height:48px;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:999px"></div><div class="n">999px</div><div class="v">pill · avatar</div></div>
+</div></body></html>

package/guidelines/color-borders.card.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Colors" viewport="700x150" name="Borders" subtitle="Three hairline weights carry all the structure" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Borders</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div class="g">
+  <div class="sw"><div class="chip" style="background:var(--card);border:1px solid var(--border)"></div><div class="n">--border</div><div class="v">#1f1f1f</div></div>
+  <div class="sw"><div class="chip" style="background:var(--card);border:1px solid var(--border-hairline)"></div><div class="n">--border-hairline</div><div class="v">neutral-800</div></div>
+  <div class="sw"><div class="chip" style="background:var(--card);border:1px solid var(--border-card)"></div><div class="n">--border-card</div><div class="v">white/10</div></div>
+  <div class="sw"><div class="chip" style="background:var(--card);border:1px solid var(--border-strong)"></div><div class="n">--border-strong</div><div class="v">neutral-700 · hover</div></div>
+  <div class="sw"><div class="chip" style="background:var(--card);border:1px solid var(--ring)"></div><div class="n">--ring</div><div class="v">#333 · focus</div></div>
+</div></body></html>

package/guidelines/color-neutrals.card.html

@@ -0,0 +1,24 @@
+<!-- @dsCard group="Colors" viewport="700x150" name="Neutral ladder" subtitle="Tailwind neutral 50–950, the only base ramp" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Neutrals</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div class="g" style="gap:6px">
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#FAFAFA"></div><div class="n">50</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#F5F5F5"></div><div class="n">100</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#E5E5E5"></div><div class="n">200</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#D4D4D4"></div><div class="n">300</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#A3A3A3"></div><div class="n">400</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#737373"></div><div class="n">500</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#525252"></div><div class="n">600</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#404040"></div><div class="n">700</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#262626"></div><div class="n">800</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#171717"></div><div class="n">900</div></div>
+  <div class="sw" style="min-width:38px"><div class="chip" style="background:#0A0A0A"></div><div class="n">950</div></div>
+</div>
+<div class="meta" style="margin-top:10px">700 = strong border · 800 = hairline border · 900 = card fill · 950 = card base</div>
+</body></html>

package/guidelines/color-opacity-ladder.card.html

@@ -0,0 +1,22 @@
+<!-- @dsCard group="Colors" viewport="700x150" name="Opacity ladder" subtitle="The real palette: one hue, nine steps. Rank = opacity" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Opacity ladder</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div class="g">
+  <div class="sw" style="min-width:44px"><div class="chip" style="background:rgb(255 255 255 / 0.05)"></div><div class="n">/5</div></div>
+  <div class="sw" style="min-width:44px"><div class="chip" style="background:rgb(255 255 255 / 0.1)"></div><div class="n">/10</div></div>
+  <div class="sw" style="min-width:44px"><div class="chip" style="background:rgb(255 255 255 / 0.15)"></div><div class="n">/15</div></div>
+  <div class="sw" style="min-width:44px"><div class="chip" style="background:rgb(255 255 255 / 0.2)"></div><div class="n">/20</div></div>
+  <div class="sw" style="min-width:44px"><div class="chip" style="background:rgb(255 255 255 / 0.3)"></div><div class="n">/30</div></div>
+  <div class="sw" style="min-width:44px"><div class="chip" style="background:rgb(255 255 255 / 0.4)"></div><div class="n">/40</div></div>
+  <div class="sw" style="min-width:44px"><div class="chip" style="background:rgb(255 255 255 / 0.6)"></div><div class="n">/60</div></div>
+  <div class="sw" style="min-width:44px"><div class="chip" style="background:rgb(255 255 255 / 0.8)"></div><div class="n">/80</div></div>
+  <div class="sw" style="min-width:44px"><div class="chip" style="background:rgb(255 255 255 / 1)"></div><div class="n">white</div></div>
+</div>
+<div class="meta" style="margin-top:10px">tier badges: /5 edge · /15 pro · /20 ultra — never hue</div>
+</body></html>

package/guidelines/color-semantic.card.html

@@ -0,0 +1,17 @@
+<!-- @dsCard group="Colors" viewport="700x150" name="Semantic hues" subtitle="The only places hue is permitted" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Semantic hues</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div class="g">
+  <div class="sw"><div class="chip" style="background:var(--state-error-bg);border-color:var(--state-error);display:flex;align-items:center;justify-content:center;color:var(--state-error-text);font-size:11px">Error</div><div class="n">--state-error</div><div class="v">red-500 / red-300</div></div>
+  <div class="sw"><div class="chip" style="background:#000;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--state-online);font-size:11px"><span style="width:8px;height:8px;border-radius:99px;background:var(--state-online)"></span>Online</div><div class="n">--state-online</div><div class="v">green-400</div></div>
+  <div class="sw"><div class="chip" style="background:#000;display:flex;align-items:center;justify-content:center;color:var(--state-success);font-size:11px">Save 20%</div><div class="n">--state-success</div><div class="v">green-500</div></div>
+  <div class="sw"><div class="chip" style="background:var(--card);display:flex;align-items:center;gap:5px;padding-left:10px"><span style="width:9px;height:9px;border-radius:99px;background:var(--chrome-dot-red)"></span><span style="width:9px;height:9px;border-radius:99px;background:var(--chrome-dot-yellow)"></span><span style="width:9px;height:9px;border-radius:99px;background:var(--chrome-dot-green)"></span></div><div class="n">--chrome-dot-*</div><div class="v">window mocks only</div></div>
+</div>
+<div class="meta" style="margin-top:10px">everything else — tiers, categories, accents — uses the opacity ladder</div>
+</body></html>

package/guidelines/color-surfaces.card.html

@@ -0,0 +1,17 @@
+<!-- @dsCard group="Colors" viewport="700x150" name="Surfaces" subtitle="Page, card fills and overlay — the whole brand lives here" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Surfaces</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div class="g">
+  <div class="sw"><div class="chip" style="background:var(--background)"></div><div class="n">--background</div><div class="v">#000000</div></div>
+  <div class="sw"><div class="chip" style="background:var(--card)"></div><div class="n">--card</div><div class="v">#0a0a0a</div></div>
+  <div class="sw"><div class="chip" style="background:var(--surface-card)"></div><div class="n">--surface-card</div><div class="v">n-900 / 50%</div></div>
+  <div class="sw"><div class="chip" style="background:var(--surface-card-emphasis)"></div><div class="n">--surface-card-emphasis</div><div class="v">n-900 / 80%</div></div>
+  <div class="sw"><div class="chip" style="background:var(--secondary)"></div><div class="n">--secondary</div><div class="v">#1a1a1a</div></div>
+  <div class="sw"><div class="chip" style="background:var(--muted)"></div><div class="n">--muted</div><div class="v">#101010</div></div>
+</div></body></html>

package/guidelines/color-text-ranks.card.html

@@ -0,0 +1,16 @@
+<!-- @dsCard group="Colors" viewport="700x150" name="Text ranks" subtitle="Four ranks of white, plus helper grey" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Text ranks</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;flex-direction:column;gap:7px">
+  <div class="row"><span style="color:var(--text-primary);font-size:15px;font-weight:600">Primary — headings and key copy</span><span class="meta">--text-primary · white</span></div>
+  <div class="row"><span style="color:var(--text-secondary);font-size:15px">Secondary — body copy</span><span class="meta">--text-secondary · white/80</span></div>
+  <div class="row"><span style="color:var(--text-tertiary);font-size:15px">Tertiary — captions</span><span class="meta">--text-tertiary · white/60</span></div>
+  <div class="row"><span style="color:var(--text-helper);font-size:15px">Helper — labels, hints, meta</span><span class="meta">--text-helper · #888888</span></div>
+  <div class="row"><span style="color:var(--text-disabled);font-size:15px">Disabled</span><span class="meta">--text-disabled · white/30</span></div>
+</div></body></html>

package/guidelines/iconography.card.html

@@ -0,0 +1,30 @@
+<!-- @dsCard group="Brand" viewport="700x180" name="Iconography" subtitle="lucide-react 0.462.0, default stroke, four sizes" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Iconography</title><link rel="stylesheet" href="../styles.css">
+<script src="https://unpkg.com/lucide@0.462.0/dist/umd/lucide.js"></script>
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--neutral-300)}
+.set{display:flex;flex-wrap:wrap;gap:20px;align-items:center}.i{display:flex;flex-direction:column;align-items:center;gap:7px;width:64px}
+.n{font-size:9px;font-family:var(--font-mono);color:var(--neutral-600)}
+.meta{margin-top:16px;font-size:10px;font-family:var(--font-mono);color:var(--neutral-600)}
+[data-lucide]{stroke:currentColor}</style></head><body>
+<div class="set">
+  <div class="i"><i data-lucide="arrow-right" style="width:22px;height:22px"></i><span class="n">arrow-right</span></div>
+  <div class="i"><i data-lucide="arrow-up-right" style="width:22px;height:22px"></i><span class="n">arrow-up-right</span></div>
+  <div class="i"><i data-lucide="terminal" style="width:22px;height:22px"></i><span class="n">terminal</span></div>
+  <div class="i"><i data-lucide="code" style="width:22px;height:22px"></i><span class="n">code</span></div>
+  <div class="i"><i data-lucide="file-text" style="width:22px;height:22px"></i><span class="n">file-text</span></div>
+  <div class="i"><i data-lucide="settings" style="width:22px;height:22px"></i><span class="n">settings</span></div>
+  <div class="i"><i data-lucide="user-check" style="width:22px;height:22px"></i><span class="n">user-check</span></div>
+  <div class="i"><i data-lucide="shield-check" style="width:22px;height:22px"></i><span class="n">shield-check</span></div>
+  <div class="i"><i data-lucide="lock" style="width:22px;height:22px"></i><span class="n">lock</span></div>
+  <div class="i"><i data-lucide="key-round" style="width:22px;height:22px"></i><span class="n">key-round</span></div>
+  <div class="i"><i data-lucide="cloud" style="width:22px;height:22px"></i><span class="n">cloud</span></div>
+  <div class="i"><i data-lucide="database" style="width:22px;height:22px"></i><span class="n">database</span></div>
+  <div class="i"><i data-lucide="bot" style="width:22px;height:22px"></i><span class="n">bot</span></div>
+  <div class="i"><i data-lucide="boxes" style="width:22px;height:22px"></i><span class="n">boxes</span></div>
+  <div class="i"><i data-lucide="message-square" style="width:22px;height:22px"></i><span class="n">message-square</span></div>
+  <div class="i"><i data-lucide="search" style="width:22px;height:22px"></i><span class="n">search</span></div>
+  <div class="i"><i data-lucide="chevron-down" style="width:22px;height:22px"></i><span class="n">chevron-down</span></div>
+  <div class="i"><i data-lucide="zap" style="width:22px;height:22px"></i><span class="n">zap</span></div>
+</div>
+<div class="meta">sizes 12 inline · 16 CTA · 24 card eyebrow · 40 section accent — stroke stays default, colour inherits</div>
+<script>lucide.createIcons()</script></body></html>

package/guidelines/layout-containers.card.html

@@ -0,0 +1,15 @@
+<!-- @dsCard group="Spacing" viewport="700x170" name="Containers" subtitle="1280 grid, 768 prose, and the section rhythm" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Containers</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;flex-direction:column;gap:8px">
+  <div><div style="height:22px;background:var(--white-10);border:1px solid var(--white-20);border-radius:4px;width:100%"></div><div class="meta" style="margin-top:4px">--container-max · max-w-7xl · 1280px — grids and nav</div></div>
+  <div><div style="height:22px;background:var(--white-15);border:1px solid var(--white-20);border-radius:4px;width:90%"></div><div class="meta" style="margin-top:4px">--container-wide · max-w-6xl · 1152px — landing sections</div></div>
+  <div><div style="height:22px;background:var(--white-20);border:1px solid var(--white-30);border-radius:4px;width:60%"></div><div class="meta" style="margin-top:4px">--container-prose · max-w-3xl · 768px — centred copy</div></div>
+  <div class="meta">gutters px-4 → sm:px-6 → lg:px-8 · sections py-16/py-24 · heroes py-20 → lg:py-32</div>
+</div></body></html>

package/guidelines/spacing-golden.card.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Spacing" viewport="700x150" name="Golden ramp" subtitle="φ ramp from tailwind.config.ts — editorial layouts only" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Golden ramp</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;align-items:flex-end;gap:10px">
+  <div style="text-align:center"><div style="width:0.25rem;height:0.25rem;background:var(--white-10);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">1</div></div>
+  <div style="text-align:center"><div style="width:0.405rem;height:0.405rem;background:var(--white-10);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">2</div></div>
+  <div style="text-align:center"><div style="width:0.654rem;height:0.654rem;background:var(--white-10);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">3</div></div>
+  <div style="text-align:center"><div style="width:1.059rem;height:1.059rem;background:var(--white-10);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">4</div></div>
+  <div style="text-align:center"><div style="width:1.713rem;height:1.713rem;background:var(--white-10);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">5</div></div>
+  <div style="text-align:center"><div style="width:2.772rem;height:2.772rem;background:var(--white-10);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">6</div></div>
+  <div style="text-align:center"><div style="width:4.487rem;height:4.487rem;background:var(--white-10);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">7</div></div>
+  <div style="margin-left:14px"><div style="display:grid;grid-template-columns:38.2% 61.8%;gap:4px;width:200px"><div style="height:28px;background:var(--white-10);border-radius:3px"></div><div style="height:28px;background:var(--white-20);border-radius:3px"></div></div><div class="n" style="margin-top:6px">--golden-split</div></div>
+</div></body></html>

package/guidelines/spacing-scale.card.html

@@ -0,0 +1,23 @@
+<!-- @dsCard group="Spacing" viewport="700x150" name="Spacing ramp" subtitle="The 4px ramp that ships" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Spacing ramp</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;align-items:flex-end;gap:10px">
+  <div style="text-align:center"><div style="width:4px;height:4px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">4</div></div>
+  <div style="text-align:center"><div style="width:8px;height:8px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">8</div></div>
+  <div style="text-align:center"><div style="width:12px;height:12px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">12</div></div>
+  <div style="text-align:center"><div style="width:16px;height:16px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">16</div></div>
+  <div style="text-align:center"><div style="width:24px;height:24px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">24</div></div>
+  <div style="text-align:center"><div style="width:32px;height:32px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">32</div></div>
+  <div style="text-align:center"><div style="width:48px;height:48px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">48</div></div>
+  <div style="text-align:center"><div style="width:64px;height:64px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">64</div></div>
+  <div style="text-align:center"><div style="width:80px;height:80px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">80</div></div>
+  <div style="text-align:center"><div style="width:96px;height:96px;background:var(--white-15);border:1px solid var(--white-20);border-radius:3px"></div><div class="n" style="margin-top:6px">96</div></div>
+</div>
+<div class="meta" style="margin-top:8px">--space-1 … --space-24 · component padding always lands on this ramp</div>
+</body></html>

package/guidelines/type-body.card.html

@@ -0,0 +1,14 @@
+<!-- @dsCard group="Type" viewport="700x200" name="Body & lead" subtitle="Lead 18px, body 14px, caption 12px" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Body type</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;flex-direction:column;gap:12px;max-width:62ch">
+  <div><p style="font-size:var(--text-lg);color:var(--neutral-300);line-height:var(--leading-relaxed)">Build, deploy, and govern AI agents with unified access to models, tools, memory, and audit logs.</p><span class="meta">lead · 18px / relaxed · neutral-300</span></div>
+  <div><p style="font-size:var(--text-sm);color:var(--text-helper);line-height:var(--leading-sm)">Every request is scoped to the caller's org. A teammate in your org sees the row; other orgs cannot.</p><span class="meta">body · 14px · --text-helper</span></div>
+  <div><p style="font-size:var(--text-xs);color:var(--text-helper)">Pay-as-you-go. No minimums.</p><span class="meta">caption · 12px</span></div>
+</div></body></html>

package/guidelines/type-chrome.card.html

@@ -0,0 +1,14 @@
+<!-- @dsCard group="Type" viewport="700x180" name="Chrome headline" subtitle="The one permitted gradient — white to white/60" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Chrome headline</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;flex-direction:column;gap:12px">
+  <span style="font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-helper)">AI cloud</span>
+  <span style="font-size:var(--text-5xl);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1.05;background-image:var(--gradient-chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent">From model to shipped product</span>
+  <span class="meta">--gradient-chrome · ChromeText · never a saturated or rainbow gradient</span>
+</div></body></html>

package/guidelines/type-display.card.html

@@ -0,0 +1,14 @@
+<!-- @dsCard group="Type" viewport="700x220" name="Display" subtitle="Geist Sans, hero and section headlines" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Display type</title><link rel="stylesheet" href="../styles.css">
+<style>body{margin:0;padding:16px 20px;background:#000;font-family:var(--font-sans);color:var(--foreground)}
+.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)}
+.n{margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--neutral-300);font-family:var(--font-mono)}
+.v{font-size:9px;color:var(--neutral-600);font-family:var(--font-mono)}
+.row{display:flex;align-items:baseline;gap:14px}.mono{font-family:var(--font-mono)}
+.meta{font-size:10px;color:var(--neutral-600);font-family:var(--font-mono);white-space:nowrap}
+</style></head><body>
+<div style="display:flex;flex-direction:column;gap:10px">
+  <div class="row"><span style="font-size:var(--text-6xl);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1">Enso</span><span class="meta">6xl / 60px · 700 · tracking-tight</span></div>
+  <div class="row"><span style="font-size:var(--text-4xl);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1.1">The AI cloud for agents</span><span class="meta">4xl / 36px · 700</span></div>
+  <div class="row"><span style="font-size:var(--text-2xl);font-weight:600">Section subhead</span><span class="meta">2xl / 24px · 600</span></div>
+</div></body></html>