Voltagent Inspired Design System

Overview

Voltagent is an AI agent engineering platform built for developers, and the brand wears that audience proudly: a near-black {colors.canvas} (#101010) page background that runs edge-to-edge with no light-mode counterpart, a single electric-green accent ({colors.primary} #00d992) reserved for CTAs, status pills, and the brand lightning glyph, and a typography system that pairs sentence-case Inter with SF Mono for inline code and command snippets. The whole page reads like polished documentation that decided to also sell something.

The decorative system is restrained. There is no gradient mesh, no atmospheric backdrop, no illustration suite. Instead, the brand uses small typographic moments — a green code chip (npx voltagent ...), a 3-px outlined feature card sitting against the same near-black canvas, a green hairline divider between section bands — to mark its identity. The result is a page that feels engineered: every card has a hairline border, every snippet has a copy-to-clipboard button, every metric is rendered in a numeric monospace.

Type stays calm. Hero display sits at 60 px in regular weight with -0.65 px tracking — not a billboard headline, more like a documentation H1. Section headings step down to 36 px / 24 px in similar weights. Body copy is 16 px Inter at line-height 1.65 for the kind of legibility long-form devs expect. Uppercase eyebrows are common — EVERYTHING YOU NEED style mono-cap labels above section headlines — and they use Inter at weight 600 with wide positive tracking (2.52 px at 14 px).

Key Characteristics:

• A single electric-green accent {colors.primary} (#00d992) carries every CTA, every status pill, and the brand's lightning logo. No second accent.
• Dark canvas ({colors.canvas} #101010) is the only page surface — there is no light-mode rhythm; the entire site reads as one continuous dark surface broken by feature-card boundaries.
• Hairline-bordered feature cards ({colors.hairline} #3d3a39, 1 px solid) are the brand's primary chrome — no shadows, no fills, just precise hairline rectangles.
• A signature dashed-border accent (1px dashed rgba(79, 93, 117, 0.4)) appears between sections as a quiet rhythm cue — the brand's only ornamental line.
• Inter + SF Mono pair carries every typographic role. SF Mono is reserved for code blocks, inline command snippets, and metric counters.
• Buttons are tight 6 px rounded rectangles (not pills); only inline status tags use the 9999 px full pill.

Known Gaps

• Semantic palette: the brand doesn't surface a separate error / warning palette on marketing pages — the underlying Docusaurus default semantic palette exists in the design system but is reserved for in-product / docs contexts. Validation cues on the marketing surface use the primary green for success and a muted body grey for missing states.
• Hover-state treatments: the inset-glow elevation tier (0 0 15px rgba(92, 88, 85, 0.2)) is documented, but the precise hover ramp for individual feature cards and buttons isn't captured at the token level.
• Loading skeletons: not visible on the extracted marketing surfaces.
• In-product app-shell chrome: the sidebar nav row and data-table cell tokens are included as illustrative ex-* entries, but the full in-product application shell (top bar, breadcrumb, command palette) lives outside the marketing scope captured here.
• Modal stack: the Level 3 modal shadow (0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(148,163,184,0.1) inset) is documented but only appears inside in-product dialog surfaces — not exercised on marketing pages.
• Font licensing: SF Mono is Apple-system and isn't redistributable; downstream consumers need to substitute JetBrains Mono or Geist Mono when self-hosting.