# Design System
Inspired by VoltAgent

Auto-generated design token catalog from DESIGN.md

01 / Color Palette

## Color Palette & Roles

### Primary

Emerald Signal Green
#00d992
Core brand accent, glow effects, active borders
VoltAgent Mint
#2fd6a1
CTA button text on dark surfaces
Tailwind Emerald
#10b981
Ecosystem green, background tints at 30%

### Secondary & Accent

Soft Purple
#818cf8
Code syntax, secondary categorization
Cobalt Primary
#306cce
Docs links, focus states
Info Teal
#4cb3d4
Informational callouts

### Surface & Background

Abyss Black
#050507
Landing page canvas
Carbon Surface
#101010
Card backgrounds, button surfaces
Warm Charcoal
#3d3a39
Borders, containment lines

### Neutrals & Text

Snow White
#f2f2f2
Primary text (1008 instances)
Warm Parchment
#b8b3b0
Secondary body text
Steel Slate
#8b949e
Tertiary text, metadata

### Semantic

Warning Amber
#ffba00
Warning alerts
Danger Coral
#fb565b
Error states
Success Emerald
#008b00
Success confirmations

02 / Typography Scale

## Typography Rules

Display Hero
Display / Hero — 60px / 400 / 1.00 / -0.65px — system-ui
Section Heading
Section Heading — 36px / 400 / 1.11 / -0.9px — system-ui
Sub-heading Bold
Sub-heading Bold — 24px / 700 / 1.33 / -0.6px — system-ui
OVERLINE LABEL
Overline — 20px / 600 / 1.40 / 0.5px / uppercase — system-ui
Feature Title
Feature Title — 20px / 600 / 1.40 / normal — Inter
Body text for standard paragraphs, navigation links, and button labels. Inter provides geometric precision.
Body / Button — 16px / 400 / 1.65 / normal — Inter
Caption and metadata text for descriptions
Caption — 14px / 500 / 1.43 / normal — Inter
const agent = new Agent({ name: "voltagent" })
Code Body — 14px / 400 / 1.43 / normal — SFMono-Regular
import { Agent } from "@voltagent/core"
Code Small — 12px / 400 / 1.33 / normal — SFMono-Regular

03 / Button Variants

## Buttons

Primary Green CTA
Ghost / Outline
Ghost / Charcoal
Accent Border
Tertiary / Container
// npm install command — the primary CTA
$ npm create voltagent-app@latest

04 / Card Examples

## Cards & Containers

Standard Card

### Warm Charcoal Border

Standard content card with 1px warm-charcoal border and 8px radius. The default container for features and code blocks.

Accent Highlighted

### Green Signal Border

Active card with 2px solid Emerald Signal Green border. For selected features and primary emphasis.

Dramatic Float

### Deep Shadow Elevation

Maximum-elevation card with dramatic shadow and inset slate ring. For hero features and floating content.

05 / Spacing Scale

## Spacing System

Base unit: 8px. Scale builds from 2px to 64px.

2px
4px
6px
8px
12px
16px
20px
24px
32px
40px
48px

06 / Border Radius Scale

## Border Radius

4px
Nearly squared
6px
Subtly rounded
8px
Comfortably rounded
9999px
Pill-shaped

07 / Elevation & Depth

## Depth & Elevation

Flat
No shadow, no border. Page background.
Level 0
Contained
1px solid Warm Charcoal. Standard cards.
Level 1
Emphasized
3px solid Warm Charcoal. Large containers.
Level 2
Accent
2px solid Signal Green. Active features.
Level 3
Ambient Glow
Warm diffused shadow. Soft atmospheric lift.
Level 4
Dramatic Float
Heavy shadow + inset ring. Hero features.
Level 5