AI AGENT ENGINEERING PLATFORM

# Design System Inspiration of Voltagent

A developer-focused AI agent platform whose surface is an unrelenting near-black canvas broken only by a single electric-green brand accent, hairline-bordered feature cards, and code-editor mockups that read like documentation dressed as marketing. Voltagent is a dark-canvas-only brand — no light-mode counterpart exists in the production marketing system.

Explore the system See signature components

FOUNDATION · 01

## Color Palette

A near-monochrome dark system built around a single electric-green accent. Voltagent Green is the only chromatic colour — every other surface is near-black, hairline grey, or off-white ink. No second accent ever appears.

### Brand & Accent

Voltagent Green

#00D992

The single brand accent. Every primary CTA, every live indicator, the lightning glyph itself.

Primary Soft

#2FD6A1

Slightly muted green inside ghost variants, tooltip and focus indicators.

Primary Deep

#10B981

Darker green reserved for inline link colour inside body copy.

### Surface

Canvas

#101010

The near-black page surface. The only surface mode in the brand's marketing system.

Canvas Soft

#1A1A1A

Lighter dark fill inside code blocks and form inputs.

Hairline

#3D3A39

1px solid borders — feature cards, buttons, dividers. The brand's universal edge colour.

Hairline Soft

#B8B3B0

A lighter divider tint reserved for rare on-light secondary contexts.

### Text

Ink

#F2F2F2

Default text on the dark canvas — slightly off-white to reduce contrast strain.

Ink Strong

#FFFFFF

Pure-white text reserved for hero headlines and high-emphasis copy.

Body

#BDBDBD

Secondary text — supporting copy and long-form body paragraphs.

Mute

#8B949E

Lowest-priority on-dark text — captions, fine print, footer secondary lines.

Canvas Text Soft

#F5F6F7

Used inside code mockups — slightly cooler than surrounding body text.

FOUNDATION · 02

## Typography

Inter at calm weights for every narrative role; SF Mono (with JetBrains Mono as the free substitute) for anything that could be typed at a terminal. The hero sits at 60px Inter weight 400 with -0.65px tracking — documentation H1, not billboard headline.

display-xl60 / 400 / -0.65px
AI agent engineering platform
display-lg36 / 400 / -0.9px
Build observable, production-grade agents
display-md24 / 700 / -0.6px
Sub-section heading or card title
display-sm20 / 600 / 0
Card title in a dense grid
eyebrow-mono14 / 600 / 2.52px
EVERYTHING YOU NEED
eyebrow-uppercase18 / 600 / 0.45px
LARGER UPPERCASE EYEBROW
body-lg18 / 400 / 28px
A lead paragraph — the calm, slightly larger body size used directly under hero headlines and major section openers.
body-md16 / 400 / 26px
Default body paragraph copy at sixteen pixels Inter regular. Long-form legibility is the priority.
body-md-strong16 / 600 / 24px
Bolded inline body emphasis at sixteen pixels.
body-sm14 / 400 / 20px
Secondary body text — pill-tag bodies, table cells, and tertiary descriptions.
body-sm-strong14 / 600 / 23px
Bold caption / pill-tag labels at fourteen pixels.
caption12 / 400 / 16px
Fine print at twelve pixels — footnotes and footer secondary lines.
caption-strong12 / 500 / 16px
Bold caption — medium-weight twelve-pixel emphasis.
code13 / 400 / 18px · SF Mono
npx voltagent init --template typescript
code-strong13 / 550 / 16px · SF Mono
function example() { return null }
button-md16 / 600 / 24px
Button label set in Inter semibold

COMPONENTS · 03

## Button Variants

Tight 6 px rounded rectangles — never pills. Only inline status tags use the 9999px full pill shape. The primary green CTA is the brand's gravitational centre; every other variant orbits around it.

button-primary

Get started

Background `#00d992` · ink-on-green

button-outline-on-dark

Read the docs

Hairline 1px `#3d3a39`

button-ghost-green

View example →

Tertiary action — no border

button-pill-tag

Live

9999 px pill — status indicator only

COMPONENTS · 04

## Cards & Containers

Hairline-bordered feature cards on dark canvas — the brand's primary chrome. No shadows. No fills. Just precise hairline rectangles, with the occasional 3 px emphasized border or dark code-editor mockup.

#### card-feature

Default feature card chrome. Canvas background, 1 px hairline border, 8 px radius, 24 px padding. The brand's most-repeated card shape.

#### card-feature-emphasized

Same chrome as the default with a 3 px hairline border for emphasis. Used to mark a featured row in a card grid.

    // placeholder code
    function example() {
      return null
    }

#### code-inline-chip

Inline command snippet in body copy reads like `npx voltagent init` or `voltagent.dev` — a quiet typographic pill.

COMPONENTS · 05

## Form Elements

Inputs sit on the lighter canvas-soft fill so they read as recessed against the near-black page. 1 px hairline border, 6 px radius, 44 px tall.

Work Email
API Key
Project Name

FOUNDATION · 06

## Spacing Scale

A 4 px base unit. Section bands use 5xl (48 px) top/bottom; card interiors sit at 2xl (24 px). The whole layout breathes in even multiples.

spacing.xxs2pxHairline-thin inline gaps.
spacing.xs4pxBase unit. Used inside dense lists.
spacing.sm8pxTight inline gap — icon-to-label.
spacing.md12pxVertical button padding; tight stack.
spacing.lg16pxHorizontal button padding; medium gap.
spacing.xl20pxCard interior padding (emphasized).
spacing.2xl24pxCard interior padding (default).
spacing.3xl32pxContainer horizontal gutter.
spacing.4xl40pxFooter band vertical padding.
spacing.5xl48pxHero / content band top & bottom.
spacing.6xl64pxMaximum section break gap.

FOUNDATION · 07

## Border Radius Scale

Tight corners across the board. 6 px buttons, 8 px cards, 9999 px reserved only for inline status pills.

none0px
xs4px
sm6px · buttons, inputs
md8px · cards
pill9999px · status
full9999px · avatar

FOUNDATION · 08

## Elevation & Depth

Hairlines instead of shadows. The brand uses a 1 px solid border as its default elevation cue. Subtle outer glow on featured cards; a heavier modal stack drops only inside in-product surfaces.

Level 0 Flat band
Level 1 Hairline (1px)
Level 2 Inset glow
Level 3 Modal stack

COMPOSITES · 09

## Signature Components

The brand-native composite surfaces — the dark hero band, the standard content band, the 2 px green divider band, the sticky dark nav, and the dark footer. Together these define every page on the marketing site.

hero-band

EVERYTHING YOU NEED

### AI agent engineering platform

content-band

### Build observable, production-grade agents

The standard content band hosts feature grids on a near-black canvas. Section headlines sit at 36 px Inter regular with -0.9 px tracking.

green-divider-band

/ SECTION BREAK · 2PX ELECTRIC GREEN /

nav-bar

footer

SYSTEM · 10

## Responsive Behavior

Three breakpoints. The card grid drops from 3-up to 2-up to 1-up; hero type scales fluidly from 60 px to 36 px; the nav collapses to a hamburger at mobile but keeps the green CTA pinned at the bottom of the overlay.

Breakpoint | Width | Key Changes
--- | --- | ---
Mobile | < 768px | Hero 60→36 px; cards 1-up; nav hamburger.
Tablet | 768–1023px | Cards 2-up; nav stays horizontal.
Desktop | ≥ 1024px | Full 3-up card grids.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding