Voltagent is an AI agent engineering platform built for developers, and the brand wears that audience proudly: a near-black `{colors.canvas}` (`#101010`) page background that runs edge-to-edge with no light-mode counterpart, a single electric-green accent (`{colors.primary}` `#00d992`) reserved for CTAs, status pills, and the brand lightning glyph, and a typography system that pairs sentence-case Inter with SF Mono for inline code and command snippets. The whole page reads like polished documentation that decided to also sell something.

The decorative system is restrained. There is no gradient mesh, no atmospheric backdrop, no illustration suite. Instead, the brand uses small typographic moments — a green code chip (`npx voltagent ...`), a 3-px outlined feature card sitting against the same near-black canvas, a green hairline divider between section bands — to mark its identity. The result is a page that feels engineered: every card has a hairline border, every snippet has a copy-to-clipboard button, every metric is rendered in a numeric monospace.

Type stays calm. Hero display sits at 60 px in regular weight with `-0.65 px` tracking — not a billboard headline, more like a documentation H1. Section headings step down to 36 px / 24 px in similar weights. Body copy is 16 px Inter at line-height 1.65 for the kind of legibility long-form devs expect. Uppercase eyebrows are common — `EVERYTHING YOU NEED` style mono-cap labels above section headlines — and they use Inter at weight 600 with wide positive tracking (`2.52 px` at 14 px).

**Key Characteristics:**

The brand doesn't surface a separate error / warning palette in its public marketing pages — the underlying Docusaurus default semantic palette exists in the design system but is reserved for in-product / docs contexts. Validation cues on the marketing surface use the primary green for success and a muted body grey for missing states.

Two faces carry the system:

1. **Inter** for every display, body, button, and link role. Weights 400 / 500 / 600 / 700 are the working set. Used with OpenType features `"calt"` and `"rlig"` enabled across the page so the geometric Inter ligatures and contextual alternates render correctly.

2. **SF Mono** (`SFMono-Regular` with Menlo / Monaco / Consolas / Liberation Mono fallbacks) for inline code, command snippets, terminal mockups, and the brand's numeric counters. Weights 400 / 549 / 550 / 700 are present — the unusual 549 / 550 sub-bold weight gives the mono a "slightly heavier than regular" voice for emphasis.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 60px | 400 | 60px | -0.65px | Hero headline ("AI Agent Engineering Platform"). |

| `{typography.display-lg}` | 36px | 400 | 40px | -0.9px | Section headlines. |

| `{typography.display-md}` | 24px | 700 | 32px | -0.6px | Sub-section / card-title displays. |

| `{typography.display-sm}` | 20px | 600 | 28px | 0 | Card titles in dense grids. |

| `{typography.eyebrow-mono}` | 14px | 600 | 20px | 2.52px | UPPERCASE eyebrow tags ("EVERYTHING YOU NEED"). |

| `{typography.eyebrow-uppercase}` | 18px | 600 | 28px | 0.45px | Larger uppercase eyebrows above hero subsections. |

| `{typography.body-lg}` | 18px | 400 | 28px | 0 | Lead paragraphs. |

| `{typography.body-md}` | 16px | 400 | 26px | 0 | Default body paragraph. |

| `{typography.body-md-strong}` | 16px | 600 | 24px | 0 | Bolded inline body. |

| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary body. |

| `{typography.body-sm-strong}` | 14px | 600 | 23px | 0 | Bold caption / pill-tag labels. |

| `{typography.caption}` | 12px | 400 | 16px | 0 | Fine print. |

| `{typography.caption-strong}` | 12px | 500 | 16px | 0 | Bold caption. |

| `{typography.code}` | 13px | 400 | 18px | 0 | Code blocks, inline command snippets. |

| `{typography.code-strong}` | 13px | 550 | 16px | 0 | Emphasised inline code (the SF Mono "almost-bold" weight). |

| `{typography.button-md}` | 16px | 600 | 24px | 0 | Button labels. |

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hero 60→32 px; cards 1-up; nav hamburger. |

| Tablet | 768–1023px | Cards 2-up; nav stays horizontal. |

| Desktop | ≥ 1024px | Full 3-up card grids. |

Buttons render at ~44 px tall (12 px vertical padding + 24 px line-height). Meet WCAG AAA at all breakpoints.

Nav collapses to hamburger at mobile; the menu overlay keeps the same green CTA pinned at the bottom. Feature-card grids drop to 1-up; hero typography scales fluidly.

Code-editor mockups render as image-like cards with copy-to-clipboard affordances. No photography in the brand's marketing surface.

| Level | Treatment | Use |

|---|---|---|

| Level 0 — Flat | No shadow, no border. | Full-bleed bands. |

| Level 1 — Hairline | 1 px solid `{colors.hairline}` border on `{colors.canvas}`. | Default for every feature card and button. |

| Level 2 — Inset Glow | `0 0 15px rgba(92, 88, 85, 0.2)` subtle outer glow. | Hovering / featured cards. |

| Level 3 — Modal Stack | `0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(148,163,184,0.1) inset` heavy drop + inset ring. | Modal / dialog surfaces in-product. |

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Full-bleed bands. |

| `{rounded.xs}` | 4px | Smallest inline pills, code inline chips. |

| `{rounded.sm}` | 6px | Default button and input radius. |

| `{rounded.md}` | 8px | Card chrome, code-block chrome. |

| `{rounded.pill}` | 9999px | Inline status tags ("Live", "Beta"). |

| `{rounded.full}` | 9999px | Circular icon containers. |

**`button-primary`** — the electric-green CTA.

**`button-outline-on-dark`** — the hairline-on-dark secondary button.

**`button-ghost-green`** — text-only with green label, for tertiary actions.

**`button-pill-tag`** — the inline pill for category tags / status labels.

**`card-feature`** — the default feature card.

**`card-feature-emphasized`** — the same card with a 3 px hairline border for emphasis.

**`code-mockup`** — the dark code-editor card with copy-to-clipboard affordance.

**`code-inline-chip`** — the inline command snippet pill.

**`text-input`** — the standard text input on dark.

**`nav-bar`** — the sticky top nav on dark.

**`nav-link`** — link items in nav.

**`footer`** — the dark footer band.

**`hero-band`** — the dark hero band with the 60-px Inter headline.

**`content-band`** — the standard content band hosting feature grids.

**`green-divider-band`** — a thin green-glow band that occasionally separates major sections.

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

**`ex-empty-state-card`** — Empty-state illustration frame.

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.