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, link defaults, background tints at 30%

Secondary & Accent

Soft Purple
#818cf8
Secondary categorization, code syntax highlights
Cobalt Primary
#306cce
Docs links, interactive focus states
Info Teal
#4cb3d4
Informational callouts and tip admonitions

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 on dark surfaces (1008 instances)
Warm Parchment
#b8b3b0
Secondary body text
Steel Slate
#8b949e
Tertiary text, metadata

Semantic

Warning Amber
#ffba00
Warning states and caution alerts
Danger Coral
#fb565b
Error states and destructive actions
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 for all UI copy.
Body / Button — 16px / 400 / 1.65 / normal — Inter
Caption and metadata text for descriptions
Caption — 14px / 500 / 1.43 / normal — Inter
TINY OVERLINE TAG
Tag / Overline Tiny — 14px / 600 / 1.43 / 2.52px / uppercase — system-ui
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 solid warm-charcoal border and 8px radius. The default container for features, code blocks, and content sections.

Accent Highlighted

Green Signal Border

Active or highlighted card with 2px solid Emerald Signal Green border. Used for selected features, active states, and primary emphasis.

Dramatic Float

Deep Shadow Elevation

Maximum-elevation card with dramatic shadow (20px 60px) and inset slate ring. Reserved for hero feature showcases 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 and inline text.
Level 0
Contained
1px solid Warm Charcoal. Standard cards and code blocks.
Level 1
Emphasized
3px solid Warm Charcoal. Large interactive buttons and containers.
Level 2
Accent
2px solid Emerald Signal Green. Active/highlighted feature cards.
Level 3
Ambient Glow
Warm diffused shadow (15px blur). Soft atmospheric lift.
Level 4
Dramatic Float
Heavy shadow (20px 60px) + inset ring. Hero features, modals.
Level 5