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.
FOUNDATION · 01
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.
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.
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.
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
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.
COMPONENTS · 04
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.
Default feature card chrome. Canvas background, 1 px hairline border, 8 px radius, 24 px padding. The brand's most-repeated card shape.
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 }
Inline command snippet in body copy reads like npx voltagent init or voltagent.dev — a quiet typographic pill.
COMPONENTS · 05
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.
FOUNDATION · 06
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.
FOUNDATION · 07
Tight corners across the board. 6 px buttons, 8 px cards, 9999 px reserved only for inline status pills.
FOUNDATION · 08
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.
COMPOSITES · 09
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
content-band
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
nav-bar
footer
SYSTEM · 10
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. |
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.