voltagent.dev

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: voltagent.dev
description: "Dark-canvas product system built on #050507 with #101010 as the single brand accent. Type anchored in system-ui at 60px / weight 400. Extracted automatically from https://voltagent.dev/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  voltagent.dev is built on a near-black canvas (rgb(5, 5, 7)).
  The system uses rgb(16, 16, 16) as the singular interactive color.
  System-ui as the primary typeface.
  A layered elevation system (12 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 27 keyframe animations plus transition-driven interactions.

colors:
  canvas: "#050507"
  surface-1: "#262626"
  ink: "#f2f2f2"
  ink-muted: "#bdbdbd"
  ink-subtle: "#c8c9cc"
  primary: "#101010"
  on-primary: "#ffffff"
  primary-hover: "#ffffff"
  hairline: "#4b5563"
  semantic-error: "#fd9c9f"
  semantic-success: "#008b00"
  semantic-warning: "#ffdd80"
  semantic-info: "#4cb3d4"

typography:
  display-xl:
    fontFamily: "IBM Plex Mono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.65px
  display-lg:
    fontFamily: "Ubuntu, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.65px
  display-md:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0
  body:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0
  button:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.56
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 9999px
  lg: 10007px
  xl: 10015px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 7px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 40px
  xxl: 64px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#00d992"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 8px
  button-outline:
    backgroundColor: "transparent"
    textColor: "#eeeeee"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 12px 16px
  button-dark--solid:
    backgroundColor: "{colors.primary}"
    textColor: "#2fd6a1"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 12px 16px

extracted_at: "2026-06-11T05:02:58.488Z"
completeness: 81
scoreVersion: "v2"

---

# Design System — voltagent.dev
> Extracted automatically by Prism from https://voltagent.dev
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: moderate  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: dark-premium

| Dimension | Value | Signal |
|---|---|---|
| Canvas | dark | `#050507` |
| Type posture | sans-led (Inter) | "AI Agent Engineering" |
| Color assertion | dual-accent | #101010 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 27 keyframes, 12 transitions |
| Radius language | 8px-rounded | from token scale |

**Prism fingerprint**: `dark-canvas · sans-display · dual-accent · 8px-rounded · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(5, 5, 7)` is the page background. Every component composits against this.
> - **Accent**: `rgb(16, 16, 16)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 32px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

voltagent.dev commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is an inky black surface (`#050507`) where elevation is communicated through subtle white-opacity gradations rather than traditional shadows — semi-transparent white borders act as the primary depth indicator, like wireframes etched in moonlight. 

Headlines are set in **system-ui**, a sans-serif display face (the dominant type signature, e.g. "AI Agent Engineering" at 60px). A second display voice — **Inter** (sans) — appears in lower bands (e.g. "voltagent"), used for editorial accent. Body text is set in **Inter**, deployed with OpenType features enabled globally (`"calt", "rlig"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. Negative letter-spacing at display sizes (-0.65px at 60px) compresses headlines into engineered blocks, dense and authoritative. 

Body text reads in Off-White (`#f2f2f2`) (contrast ratio 14.2:1, well above WCAG AA). **Near-Black** (`#101010`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (12 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. The site uses a variable font with SLNT axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Pure Black (`#050507`)
- Primary typeface: IBM Plex Mono
- Primary text: Whitesmoke (`#e3e3e3`)
- Accent: Near-Black (`#101010`)
- Display: 60px weight 400, letter-spacing -0.65px
- Shadow system: 12 distinct elevation levels
- Custom fonts loaded: IBM Plex Mono, IBM Plex Sans, Inter

## 2. Color Palette & Roles

### Background & Surface
- **Pure Black** (`#050507`): Page background (primary)
- **Near-Black** (`#262626`): Surface / elevated background
- **Black** (`#000000`): Surface / elevated background
- **Near-Black** (`#242526`): Surface / elevated background
- **Pure Black** (`#020202`): Surface / elevated background

### Text & Content
- **Off-White** (`#f2f2f2`): Primary body text
- **Translucent #21c45d (50%)** (`rgba(33, 196, 93, 0.5)`): Secondary text
- **#00d992** (`#00d992`): Secondary text
- **Light Grey** (`#bdbdbd`): Secondary text
- **Grey** (`#b8b3b0`): Secondary text

### Accent & Interactive
- **Accent** (`#10b981`): Accent / interactive (CSS var)
- **Slate** (`#4b5563`): Interactive / accent
- **Translucent Dark Gray (30%)** (`rgba(55, 65, 81, 0.3)`): Interactive / accent
- **Translucent #34d399 (10%)** (`rgba(52, 211, 153, 0.1)`): Interactive / accent
- **Gold** (`#facc15`): Interactive / accent
- **Brand Indigo** (`#5865f2`): Interactive / accent
- **#2fd6a1** (`#2fd6a1`): Interactive / accent

### Border & Divider
- **Near-Black** (`#101010`): Borders / dividers
- **Charcoal** (`#3d3a39`): Borders / dividers
- **Near-Black** (`#1a1a1a`): Borders / dividers
- **Near-Black** (`#1e1e1e`): Borders / dividers

### Full Extracted Palette
**110 colors rendered on the page** + **85** more declared in design tokens (CSS custom properties — not necessarily painted). (21 categorized above + 174 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#e3e3e3` — Whitesmoke
- `#f5f6f7` — Off-White
- `#8a8380` — Slate Grey
- `#dcdcdc` — Whitesmoke
- `#eeeeee` — Off-White
- `#f5f5f5` — Off-White
- `#9ca3af` — Cool Gray
- `#ffffff` — White
- `rgba(79, 93, 117, 0.4)` — Translucent Slate (40%)
- `#fcb400` — Amber
- `#18bfff` — #18bfff
- `#f82b60` — Warm Rose
- `#ba1e45` — #ba1e45
- `#d1d5db` — Light Grey
- `#39c5ef` — #39c5ef
- `#2fb77e` — Emerald
- `#ebb22d` — #ebb22d
- `#e0225b` — Ruby
- `#ef463d` — Vermillion
- `#427cbf` — Steel Blue
- `#00af59` — #00af59
- `#dc2226` — M Tricolor Red
- `#fdb716` — Amber
- `#3178c6` — Steel Blue
- `#010409` — Pure Black
- `#f0f6fc` — Ghost White
- `#ff7b72` — Coral
- `#a5d6ff` — Light Blue
- `#d2a8ff` — Lavender
- `#8b949e` — Cool Gray
- `#5c5855` — Slate Grey
- `#6ee7b7` — #6ee7b7
- *…+142 more in `raw-css.json` (`desktop.allColors`).*

### Gradients & Decorative Fills

- `linear-gradient(-26.5deg,#565872,#31355b)` — (--docsearch-key-gradient)

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--ifm-spacing-vertical`: `1rem`
- `--typography-list-item-bullets-d-letter-spacing`: `0`
- `--typography-h1-m-letter-spacing`: `-1px`
- `--ifm-alert-padding-horizontal`: `1rem`

**Font Size Token**
- `--ifm-h2-font-size`: `1.5rem`
- `--ifm-font-size-base`: `100%`
- `--typography-body-2-m-font-size`: `12px`
- `--typography-tags-m-font-size`: `12px`

**Font Weight Token**
- `--ifm-font-weight-semibold`: `500`
- `--typography-h3-m-underline-font-weight`: `500`
- `--ifm-font-weight-base`: `400`
- `--ifm-font-weight-normal`: `400`

**Success**
- `--ifm-color-success-darker`: `#008b00`
- `--ifm-color-success-lightest`: `#80d280`
- `--ifm-color-success-darkest`: `#007300`
- `--ifm-color-success-contrast-background`: `#003100`

**Primary Brand Color**
- `--ifm-color-primary-dark`: `#306cce`
- `--ifm-color-primary-contrast-foreground`: `#ebf2fc`
- `--ifm-color-primary-darkest`: `#2554a0`
- `--ifm-color-primary`: `#10b981`

**Font Family Token**
- `--typography-body-1-d-bold-font-family`: `Inter`
- `--typography-h6-d-font-family`: `Inter`
- `--typography-h5-d-font-family`: `Inter`
- `--typography-list-item-numbers-d-font-family`: `Inter`

**Error / Destructive**
- `--ifm-color-danger-lightest`: `#fd9c9f`
- `--ifm-color-danger-light`: `#fb565b`
- `--ifm-color-danger-contrast-foreground`: `#ffebec`
- `--ifm-color-danger-contrast-background`: `#4b1113`

**Warning**
- `--ifm-color-warning-lightest`: `#ffdd80`
- `--ifm-color-warning-contrast-background`: `#4d3800`
- `--ifm-color-warning`: `#ffba00`
- `--ifm-color-warning-light`: `#ffc426`

**Secondary Color**
- `--ifm-color-secondary-darker`: `#c8c9cc`
- `--ifm-color-secondary-light`: `#eef0f2`
- `--ifm-color-secondary-contrast-foreground`: `#fdfdfe`
- `--ifm-color-secondary-dark`: `#d4d5d8`

**Shadow Token**
- `--ifm-global-shadow-tl`: `0 12px 28px 0 #0003,0 2px 4px 0 #0000001a`
- `--tw-drop-shadow`: ``
- `--ifm-global-shadow-lw`: `0 1px 2px 0 #0000001a`
- `--ifm-blockquote-shadow`: `none`

**Border Radius Token**
- `--ifm-card-border-radius`: `calc(0.4rem*2)`
- `--ifm-code-border-radius`: `0.4rem`
- `--radius`: `0.5rem`
- `--ifm-button-border-radius`: `calc(0.4rem*1)`

**Motion Token**
- `--ifm-transition-timing-default`: `cubic-bezier(0.08,0.52,0.52,1)`
- `--ifm-transition-fast`: `200ms`
- `--ifm-button-transition-duration`: `200ms`

**Background**
- `--ifm-pills-color-background-active`: `#ffffff0d`
- `--ifm-menu-color-background-hover`: `#ffffff0d`
- `--ifm-menu-color-background-active`: `#ffffff0d`

**Z-Index Token**
- `--ifm-z-index-overlay`: `400`
- `--ifm-z-index-dropdown`: `100`
- `--ifm-z-index-fixed`: `200`

**Text Color**
- `--ifm-color-content`: `#e3e3e3`
- `--ifm-color-content-inverse`: `#000`
- `--ifm-color-content-secondary`: `#fff`

**Other tokens**
- `--ifm-color-info-dark`: `#4cb3d4`
- `--typography-list-item-numbers-m-text-case`: `none`
- `--typography-tags-m-font-stretch`: `normal`
- `--typography-links-d-font-style`: `normal`
- `--ifm-heading-color`: ``
- `--ifm-scrollbar-track-background-color`: `#444`
- `--ifm-color-gray-400`: `#ccd0d5`
- `--ifm-blockquote-color`: `#ebedf0`

## 3. Typography Rules

### Font Families
- **Primary**: `Inter`
- **Secondary**: `system-ui`
- **Font 3**: `IBM Plex Mono`
- **Font 4**: `IBM Plex Sans`
- **Font 5**: `SFMono-Regular`

### Custom Fonts Loaded
- **IBM Plex Mono** weight 300 (normal)
- **IBM Plex Mono** weight 400 (normal)
- **IBM Plex Mono** weight 500 (normal)
- **IBM Plex Mono** weight 700 (normal)
- **IBM Plex Sans** weight 300 (normal)
- **IBM Plex Sans** weight 400 (normal)
- **IBM Plex Sans** weight 500 (normal)
- **IBM Plex Sans** weight 700 (normal)
- **Inter** weight 100 900 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | IBM Plex Mono | 60px | 400 | 1 | -0.65px | Main headline (h1) |
| Section Heading | Ubuntu | 60px | 400 | 1 | -0.65px | Section titles (h1) |
| Button Large | Inter | 18px | 700 | 1.56 | normal | Button label (18px) |
| Body | Inter | 16px | 400 | 1.65 | normal | Standard reading text |
| Sub-heading | Inter | 14px | 600 | 1.43 | normal | Third-level heading (h3) |
| Button | IBM Plex Mono | 13.3333px | 700 | normal | normal | Button label (13.3333px) |
| Button | IBM Plex Mono | 13.3333px | 500 | normal | normal | Button label (13.3333px) |
| Button | IBM Plex Mono | 13px | 700 | normal | normal | Button label (13px) |

### Font Weight Scale

CSS custom properties define 57 explicit weight steps:
- `--ifm-font-weight-light`: `300` — Light
- `--ifm-font-weight-base`: `400` — Regular
- `--ifm-font-weight-normal`: `400` — Regular
- `--typography-body-1-m-font-weight`: `400` — Regular
- `--typography-body-3-m-font-weight`: `400` — Regular
- `--typography-list-item-bullets-d-font-weight`: `400` — Regular
- `--typography-body-1-m-italics-font-weight`: `400` — Regular
- `--typography-body-1-d-font-weight`: `400` — Regular
- `--typography-list-item-bullets-m-font-weight`: `400` — Regular
- `--typography-breadcrumbs-d-underline-font-weight`: `400` — Regular
- `--typography-body-2-d-font-weight`: `400` — Regular
- `--typography-list-item-numbers-m-font-weight`: `400` — Regular
- `--typography-input-field-label-d-font-weight`: `400` — Regular
- `--typography-list-item-numbers-d-font-weight`: `400` — Regular
- `--typography-body-2-links-d-font-weight`: `400` — Regular
- `--typography-body-1-d-italics-font-weight`: `400` — Regular
- `--typography-input-field-label-m-font-weight`: `400` — Regular
- `--typography-body-2-m-font-weight`: `400` — Regular
- `--typography-breadcrumbs-d-font-weight`: `400` — Regular
- `--typography-body-2-links-m-font-weight`: `400` — Regular
- `--ifm-font-weight-semibold`: `500` — Medium
- `--typography-h3-m-underline-font-weight`: `500` — Medium
- `--typography-tags-d-font-weight`: `500` — Medium
- `--typography-h6-m-font-weight`: `500` — Medium
- `--typography-tags-d-underline-font-weight`: `500` — Medium
- `--typography-links-d-font-weight`: `500` — Medium
- `--typography-list-item-d-font-weight`: `500` — Medium
- `--typography-tags-m-underline-font-weight`: `500` — Medium
- `--typography-h3-d-underline-font-weight`: `500` — Medium
- `--typography-h3-d-font-weight`: `500` — Medium
- `--typography-h2-d-medium-font-weight`: `500` — Medium
- `--typography-links-m-font-weight`: `500` — Medium
- `--typography-links-m-underline-font-weight`: `500` — Medium
- `--ifm-dropdown-font-weight`: `500` — Medium
- `--typography-h6-d-font-weight`: `500` — Medium
- `--typography-h2-m-medium-font-weight`: `500` — Medium
- `--typography-list-item-m-font-weight`: `500` — Medium
- `--typography-links-d-underline-font-weight`: `500` — Medium
- `--typography-h3-m-font-weight`: `500` — Medium
- `--typography-tags-m-font-weight`: `500` — Medium
- `--typography-h1-d-font-weight`: `700` — Bold
- `--ifm-table-head-font-weight`: `700` — Bold
- `--ifm-heading-font-weight`: `700` — Bold
- `--typography-body-1-m-bold-font-weight`: `700` — Bold
- `--typography-h2-d-font-weight`: `700` — Bold
- `--typography-h5-m-font-weight`: `700` — Bold
- `--typography-h4-d-font-weight`: `700` — Bold
- `--ifm-font-weight-bold`: `700` — Bold
- `--typography-table-headers-m-font-weight`: `700` — Bold
- `--typography-h5-d-font-weight`: `700` — Bold
- `--typography-h1-t-font-weight`: `700` — Bold
- `--ifm-button-font-weight`: `700` — Bold
- `--typography-table-headers-d-font-weight`: `700` — Bold
- `--typography-h1-m-font-weight`: `700` — Bold
- `--typography-h2-m-font-weight`: `700` — Bold
- `--typography-h4-m-font-weight`: `700` — Bold
- `--typography-body-1-d-bold-font-weight`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `60px`, `36px`, `24px`, `20px`, `18px`, `16px`, `14px`, `13.33px`, `13px`, `12px`, `11px`

> 5 size(s) detected outside the sampled hierarchy (36px, 24px, 20px, 12px, 11px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **contextual alternates** (`calt`) — connections between letters refined contextually

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "calt", "rlig";
}
```

**Variable font axes:**
- SLNT axis

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#00d992`
- Padding: 8px
- Radius: 0px
- Font: 13.3333px weight 700
- Use: Subtle action, toolbar, nav button

**Outline**
- Background: `transparent`
- Text: `#eeeeee`
- Padding: 12px 16px
- Radius: 6px
- Border: 1px solid rgb(61, 58, 57)
- Font: 18px weight 700
- Use: Secondary action with border

**Dark / Solid**
- Background: `#101010` `{colors.primary}`
- Text: `#2fd6a1`
- Padding: 12px 16px
- Radius: 0px
- Font: 13.3333px weight 500
- Use: Solid dark CTA

**Ghost**
- Background: `transparent`
- Text: `#eeeeee`
- Padding: 12px 16px
- Radius: 0px
- Font: 13.3333px weight 500
- Use: Subtle action, toolbar, nav button

**Dark / Solid**
- Background: `#101010` `{colors.primary}`
- Text: `#f2f2f2` `{colors.ink}`
- Padding: 20px
- Radius: 8px
- Border: 3px solid rgb(61, 58, 57)
- Font: 16px weight 400
- Use: Solid dark CTA

**Subtle**
- Background: `rgba(0, 0, 0, 0.2)`
- Text: `#10b981`
- Padding: 48px
- Radius: 8px
- Border: 3px solid rgba(255, 255, 255, 0.1)
- Font: 16px weight 400
- Use: Quiet action against page bg

**Secondary**
- Background: `#242526`
- Text: `#f5f6f7`
- Padding: 8px 16px
- Radius: 0px
- Font: 16px weight 400
- Use: Secondary action


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **FooterLink**:
  - **hover:** text #9ca3af → #9aa3ae

*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 217, 146)"
  link:
    default:
      bg: "rgb(36, 37, 38)"
      fg: "rgb(245, 246, 247)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(16, 185, 129)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(156, 163, 175)"
    hover:
      bg: "transparent"
      fg: "rgb(154, 163, 174)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **5 shape(s)** in this system: `Ghost`, `Outline`, `Dark / Solid`, `Subtle`, `Secondary`
- **DO NOT introduce new buttons variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1440px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 7px |
| sm | 8px |
| md | 16px |
| base | 24px |
| lg | 32px |
| xl | 40px |
| 2xl | 48px |
| 3xl | 64px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 9999px | Cards, containers |
| Lg | 10007px | Large rounded elements, pill segments |
| Xl | 10015px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `0px` |
| Page Body | `0px` |
| Navigation | `0px` |

**Shape Personality**: Sharp & Angular — No rounding. Precise, editorial, enterprise feel.

**Full Radius Spectrum**: 0px, 2px, 4px, 6px, 6.4px, 8px, full/pill (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~40px internal vertical padding (up to 48px) — **standard**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `40px` | Between major bands (color change, content shift) |
| **subsection** | `32px` | Within a section, between content groups |
| **card** | `16px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `7px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** split-left-text — Split layout, text-left/media-right — heading + body in left column, image/illustration in right column. Common for product showcases.
- **Viewport coverage:** 466px tall (not full-viewport)
- **Heading:** "AI Agent EngineeringPlatform" — 60px left-aligned
- **Media:** present, positioned right
- **CTAs:** 2 (primary: "Get Started")
- **Clone instruction:** Reproduce the **split-left-text** layout. Use the heading font-size token at the documented size. Place media right of text.

### Navigation Pattern

- **Position:** sticky (stays visible during scroll)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 64px
- **Logo:** ✓ present
- **Nav links:** 4 primary items
- **CTAs in nav:** 2
- **Clone instruction:** Build a sticky logo left links left navigation. Reserve 2 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 13 cards detected
- **Columns (desktop):** 3-up grid
- **Card dimensions:** 544×451px (aspect 1.21:1)
- **Gap:** 0px between cards
- **Content:** ✗ no image + icon
- **Clone instruction:** Build a 3-column grid (desktop) with cards at ~1.21:1 aspect ratio. Text/icon-only cards (no photography).

### Footer Pattern

- **Columns:** 1
- **Links:** 17 total
- **Height:** 280px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~17 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Inset (Level 1) | <br>`rgba(0, 0, 0, 0.7) 0px 20px 60px 0px`,<br>`rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset` | Buttons, pressed-state elements |
| Layered (Level 2) | <br>`rgba(0, 217, 146, 0.3) 0px 0px 30px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.1) 0px 1px 2px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(47, 214, 161, 0.4) 0px 0px 15px 3px`,<br>`rgba(47, 214, 161, 0.15) 0px 0px 30px 6px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--ifm-transition-timing-default` | `cubic-bezier(0.08,0.52,0.52,1)` | Custom Ease — Balanced |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--ifm-button-transition-duration` | `200ms` | Normal |

### Copy-Paste Transition Snippets

**Color / Background**
```css
transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);
```

**All Props**
```css
transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
```

**Background**
```css
transition: background-color 0.2s;
```

**Transform**
```css
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `a` | Fade + Move | opacity, transform | UI transition |
| `b` | Fade | opacity | UI transition |
| `c` | Rotate / Spin | transform | UI transition |
| `d` | Fade + Move | filter, opacity, transform | UI transition |
| `e` | Fade + Move | opacity, transform | UI transition |
| `f` | Custom | background-position-x, background-position-y, content | UI transition |
| `g` | Slide | animation-timing-function, transform | UI transition |
| `h` | Fade | opacity | UI transition |
| `i` | Custom | stroke-dashoffset | UI transition |
| `j` | Rotate / Spin | transform | UI transition |
| `agentPulse` | Fade + Move | opacity, transform | Attention / status |
| `twinkle` | Fade | opacity | UI transition |
| `colorPulse` | Color Pulse | color | Attention / status |
| `colorPulseGithub` | Color Pulse | color | Attention / status |
| `colorPulseEmerald` | Color Pulse | color | Attention / status |
| `starPulse` | Fade | opacity | Attention / status |
| `fadeInOut` | Fade | opacity | Element entrance |
| `scrollLeft` | Slide | transform | UI transition |
| `scrollRight` | Slide | transform | UI transition |
| `seamlessScrollLeft` | Slide | transform | UI transition |

> *7 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `300ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 27 unique animations (27 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use dark background (`#050507`) as the foundation — this is a dark-mode-native design
- Use Inter as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-0.65px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use Near-Black (`#101010`) as the primary accent — it's the brand's signature interactive color
- Use 6px border-radius on buttons — the standard corner rounding for interactive elements
- Keep navigation sticky to the top — the design uses a persistent navigation pattern
- Maintain nav height at 64px — consistent vertical space for the navigation bar
- Build the hero as a split layout with media on the left — text and visual share equal weight
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Make the navigation sticky — it stays visible during scroll, signaling content depth
- Each card uses an icon (not photo) — the visual language is illustrative, not photographic
- Use a 3-column grid on desktop — density matters for this content type

### Don't
- Don't use light backgrounds — the dark canvas is the native medium
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(5, 5, 7)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(5, 5, 7)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(16, 16, 16)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(16, 16, 16)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 360px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 720px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 996px | Multi-column grids begin |
| Desktop | 1100px | Full feature layout |
| Desktop | 1270px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `60px` | `36px` |
| heading | line-height | `60px` | `40px` |
| button | width | `auto` | `46px` |

### Collapsing Strategy
- Headlines: 60px → 36px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 8px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Hero collapses split-left-text → centered** — the side-by-side layout stacks vertically, with media moving above the text.
- **Navigation collapses to hamburger** — 4 links visible on desktop, 1 on mobile (the rest hide behind a menu toggle).
- **Nav CTAs reduced** on mobile (2 → 1) — the design prioritizes content over conversion buttons at small sizes.
- **Card grid: 3-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Animated SVG** — path/line-draw animations.
- **Glassmorphism** — 5 frosted/blur layer(s) (e.g. `blur(4px)`).
- **Clip-path shapes** — 4 non-rectangular cut(s).
- **CSS-variable animations** (1) — animated custom properties.

> **Motion fingerprint**: SVG animations, glassmorphism (10 layers), non-rectangular shapes (4)

## 9b. Visual Tone & Photography

**Tone:** Illustration-driven

The site relies primarily on illustrations, vector art, and decorative SVG elements rather than photography. Use commissioned illustrations, icon sets, or generated graphics for clones — stock photos will feel off-brand.

**Canonical Brand Image (OG):**
- https://voltagent.dev/img/social4.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.28:1 (landscape)
- Rendered size: 767×600px
- Alt text: "framework preview"
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 1 (100%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 0 (0%)

**Media Format Mix:**
- PNG: 1 (logos, transparent UI elements, mockups)
- SVG: 25 (icons, illustrations, decorative geometry)

**Average rendered image size:** 767×600px
**Above-fold image count:** 0 / 1

**Decorative Patterns Detected:**
- 1 radial gradient — circular color blooms used for spotlight/glow effects
- 25 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** Decorative SVG accents are part of the brand — generate or source blob/illustration shapes to scatter behind content.

**Imagery Guidance for clones:**
- Use vector illustration as the primary visual language — photos will read as off-brand.
- Maintain consistent illustration style (line weight, color palette) across the site.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure Black (`#050507`)
- Primary text: Off-White (`#f2f2f2`)
- Accent: Near-Black (`#101010`)
- Border: Slate (`#4b5563`)
- Font: Inter
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure Black background (#050507). Headline at 60px Inter weight 400, line-height 1, letter-spacing -0.65px, color #f2f2f2."
- "Create the primary CTA button: `#101010` background, `#00d992` text, 9999px border-radius, 8px padding, 700 weight, Inter font."
- "Build navigation: sticky on `#050507`. Inter 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Pure Black (`#050507`) — every component is composited against this exact base.
2. **Typography**: All type in Inter, weight range 300–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: Near-Black (`#101010`) is the sole interactive color. On hover → Translucent #21c45d (50%) (`rgba(33, 196, 93, 0.5)`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.08,0.52,0.52,1)`. Timing: 200ms for micro-interactions, 200ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `6px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (7px–40px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-canvas: #050507;
  --ca-surface-1: #262626;
  --ca-ink: #f2f2f2;
  --ca-ink-muted: #bdbdbd;
  --ca-ink-subtle: #c8c9cc;
  --ca-primary: #101010;
  --ca-primary-hover: #ffffff;
  --ca-hairline: #4b5563;
  --ca-semantic-error: #fd9c9f;
  --ca-semantic-success: #008b00;
  --ca-semantic-warning: #ffdd80;
  --ca-semantic-info: #4cb3d4;
}

/* Typography */
:root {
  --ca-font-primary: "IBM Plex Mono", system-ui, sans-serif;
  --ca-text-display: 60px;
  --ca-text-heading: 60px;
  --ca-text-body: 16px;
  --ca-text-button: 18px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 7px;
  --ca-space-sm: 8px;
  --ca-space-md: 16px;
  --ca-space-base: 24px;
  --ca-space-lg: 32px;
  --ca-space-xl: 40px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 9999px;
  --ca-radius-lg: 10007px;
  --ca-radius-xl: 10015px;
  --ca-radius-full: 9999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    height: 9415px
    width: full-bleed
    layout: flex-column justify=normal
    children: 4
    bg: "rgb(5, 5, 7)"
    tone: dark
    vertical-padding: ~48px
  - section: unknown
    tag: div
    classes: ["fixed", "inset-0", "pointer-events-none", "z-[1]"]
    height: 900px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: main
    classes: ["flex-1", "relative", "overflow-hidden", "bg-[#050507]"]
    height: 9071px
    width: full-bleed
    layout: block
    children: 5
    bg: "rgb(5, 5, 7)"
    tone: dark
    vertical-padding: ~48px
  - section: feature-section
    tag: div
    classes: ["main-wrapper", "mainWrapper_z2l0"]
    height: 9071px
    width: full-bleed
    layout: flex-column justify=normal
    children: 1
    bg: "rgb(5, 5, 7)"
    tone: dark
  - section: feature-section
    tag: div
    classes: ["relative", "max-w-7xl", "xs:px-4", "lg:px-8"]
    height: 466px
    width: 1280px
    layout: block
    children: 2
    padding: "0px 32px"
  - section: content-section
    tag: div
    classes: ["w-full", "bg-[#101010]", "mt-16", "md:mt-36"]
    height: 1065px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(16, 16, 16)"
    tone: dark
    vertical-padding: ~48px
    padding: "48px 0px"
  - section: content-section
    tag: section
    classes: ["feature-showcase", "relative", "z-10", "px-4"]
    height: 699px
    width: full-bleed
    layout: block
    children: 1
    padding: "0px 24px"
  - section: content-section
    tag: div
    classes: ["companies-marquee", "relative", "max-w-7xl", "xs:px-4"]
    height: 236px
    width: 1280px
    layout: block
    children: 3
    padding: "0px 32px"
  - section: feature-section
    tag: div
    classes: ["text-white", "relative", "w-full", "overflow-hidden"]
    height: 614px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~48px
  - section: feature-section
    tag: div
    classes: ["relative", "animations-disabled"]
    height: 1037px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~40px
  - section: feature-section
    tag: div
    classes: ["relative", "w-full", "overflow-hidden"]
    height: 1790px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~40px
  - section: feature-section
    tag: div
    classes: ["relative", "w-full", "overflow-hidden"]
    height: 856px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~40px
  - section: feature-section
    tag: div
    classes: ["relative", "w-full", "overflow-hidden"]
    height: 1065px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~40px
  - section: feature-section
    tag: section
    classes: ["relative", "w-full", "overflow-hidden"]
    height: 584px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~40px
  - section: feature-section
    tag: section
    classes: ["relative", "w-full", "overflow-hidden", "z-10"]
    height: 589px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~40px
  - section: footer
    tag: footer
    classes: ["text-[#dcdcdc]", "font-['Inter']", "py-8", "md:py-12"]
    height: 280px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~48px
    padding: "48px 0px"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "The end-to-end"
    - "THE PLATFORM"
    - "USED AND TESTED BY DEVELOPERS AT"
    - "Complete toolkit for enterprise level AI agents"
  ctas:
    - "Get Started"
    - "$ npm create voltagent-app@latest"
    - "Framework"
    - "Observability"
  navigation:
    - "voltagent"
    - "Thank you! 9.5K"
    - "Discord logo"
    - "Try VoltOps"
    - "Documentation"
    - "Pricing"
  footer-links:
    - "Privacy Policy"
    - "Getting Started"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  thumbnail:
    count: 13
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "yixue-ux avatar"
      - "RealHarshPandya avatar"
      - "habergeon avatar"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Get Started
</button>
```
_Source pattern detected: padding `12px 16px` · radius `6px` · weight `700`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 2 · **cta** 2 · **pricing** 1 · **docs** 6 · **blog** 1 · **social** 9 · **legal** 2 · **footer** 7 · **other** 1

**Primary actions (conversion path):**
- Primary call-to-action — "Try VoltOps" (the conversion path) → `https://console.voltagent.dev/`
- Primary call-to-action — "Get Started" (the conversion path) → `https://voltagent.dev/docs/`

**Projects / case studies detected** (clustered by URL + featured image):

*Voltagent* — medium confidence, 4 items:

| Title | Featured image | Link |
|---|---|---|
| Thank you! 9.5K | `292635102?v=4` (ar 1) | https://github.com/voltagent/voltagent/ |
| yixue-ux avatar | `292635102?v=4` (ar 1) | https://github.com/voltagent/voltagent/stargazers/ |
| See the Repo | `292635102?v=4` (ar 1) | https://github.com/voltagent/voltagent |
| Changelog | — | https://github.com/voltagent/voltagent/blob/main/CHANGELOG.md |

**Signals:** 16/31 links carry a featured image · dominant link roles: footer-link (20), content-card (3), inline-link (3).


---
## Extraction Completeness: 81/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 21 named colors |
| Typography | 20 | 20 | 8 roles defined |
| Components | 4 | 20 | 1 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 10 | 10 | 976 vars |
| Responsive Breakpoints | 5 | 5 | 8 breakpoints |
| Variable Fonts | 5 | 5 | SLNT axes |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.
- **5 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 976 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 8 typography roles inferred |
| §4 Components | Low | 1 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 21 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 8 breakpoints detected |
| §9b Photography | High | 1 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Keyframe Animations (Intercepted from CSS)

**10 @keyframes found** — these are the real animation definitions:

```
@keyframes a { ... }
@keyframes b { ... }
@keyframes c { ... }
@keyframes d { ... }
@keyframes e { ... }
@keyframes f { ... }
@keyframes g { ... }
@keyframes h { ... }
@keyframes i { ... }
@keyframes j { ... }
```

<details><summary>Full keyframes CSS (10 animations)</summary>

```css
@keyframes a{0%{opacity:0;transform:translateY(20px)}
@keyframes b{50%{opacity:.5}}
@keyframes c{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-10deg)}40%,80%{transform:rotate(10deg)}}
@keyframes d{0%,to{filter:drop-shadow(0 0 8px rgba(250,204,21,.8));opacity:1;transform:scale(1)}50%{filter:drop-shadow(0 0 12px rgba(250,204,21,1));opacity:.6;transform:scale(1.1)}}
@keyframes e{0%{opacity:0;transform:translateX(-5px)}
@keyframes f{0%{background-position:0 0;content:var(--tw-content)}
@keyframes g{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
@keyframes h{0%{opacity:0}
@keyframes i{0%{stroke-dashoffset:10}}
@keyframes j{to{transform:rotate(1turn)}}
```
</details>

### Hover State CSS (Intercepted)

**1 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.button--outline.button--active,.button--outline:active,.button--outline:hover,:root{--ifm-button-color:var(--ifm-font-color-base-inverse)}

.menu__link:hover,a{transition:color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}

.from-\[\#00d992\]\/0,.from-\[\#00d992\]\/10,.from-\[\#00d992\]\/5,.group:hover .group-hover\:from-\[\#00d992\]\/5{--tw-gradient-to:#00d99200 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}

a:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration);text-decoration:none}

.button:hover,.text--no-decoration,.text--no-decoration:hover,a:not([href]){text-decoration:none}

.alert .close:focus,.alert .close:hover{opacity:1}

.alert a:hover{text-decoration-thickness:2px}

.breadcrumbs__link:any-link:hover,.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);text-decoration:none}

.button,.button:hover{color:var(--ifm-button-color)}

.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}

.button--link.button--active,.button--link:active,.button--link:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}

.button.button--secondary.button--outline:not(.button--active):not(:hover),.text-\[var\(--ifm-font-color-base\)\]{color:var(--ifm-font-color-base)}

:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}

:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}

:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}

:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}

:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}

:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}

.table-of-contents__link--active,.table-of-contents__link--active code,.table-of-contents__link:hover,.table-of-contents__link:hover code{color:var(--ifm-color-primary);text-decoration:none}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 3998 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**23 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`360px` · `420px` · `576px` · `640px` · `720px` · `767px` · `768px` · `960px` · `975px` · `996px` · `997px` · `1000px` · `1024px` · `1025px` … (+9 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×1753 · `11px`×772 · `14px`×629 · `13px`×411 · `12px`×309 · `20px`×41 · `13.3333px`×27 · `18px`×25

**Radius scale** (× = paint count): `6px`×251 · `8px`×151 · `9999px`×43 · `4px`×39 · `6.4px`×20 · `2px`×1

**Weights** (× = paint count): `400`×3581 · `600`×225 · `500`×173 · `700`×16 · `300`×2

**Layout gaps** (× = paint count): `8px`×45 · `12px`×25 · `32px`×10 · `16px`×10 · `4px`×5 · `48px`×2 · `6px`×2 · `80px`×2

**Elevation (real shadows)**:
```css
rgba(92, 88, 85, 0.2) 0px 0px 15px 0px
rgba(0, 0, 0, 0.7) 0px 20px 60px 0px, rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset
rgba(245, 158, 11, 0.2) 0px 0px 15px 0px
rgba(52, 211, 153, 0.3) 0px 0px 15px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { background-color:hsl(var(--background)); color:hsl(var(--foreground)) }
body { font-family:Inter,sans-serif }
body { background-color:#070f12 }
body { background-color:var(--landing-home-bg) !important }
nav { background-color:#020202 }
main { background-color:rgb(5 5 7/var(--tw-bg-opacity)) }
h1 { font-size:var(--ifm-h1-font-size) }
h1 { font-weight:400 }
h1 { color:rgb(245 245 245/var(--tw-text-opacity)) }
h1 { font-size:2.25rem }
@media (min-width: 640px) h1 { font-size:3rem }
@media (min-width: 768px) h1 { font-size:3.75rem }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://voltagent.dev | 2026-06-11T05:02:59.080Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*