Design System Preview: VoltAgent (Light)

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