Design System Preview: VoltAgent (Dark)

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