VoltAgent

Overview

VoltAgent is a developer-first AI agent framework and observability platform that combines open-source transparency with enterprise-grade monitoring capabilities. The design system embodies a "Tech-Forward Minimalism" aesthetic: a deep, near-black canvas (rgb(7, 15, 18)) serves as the foundation, while a vibrant emerald accent (#2fd6a1) punctuates interactive elements, CTAs, and status indicators. This high-contrast approach evokes precision, clarity, and technical sophistication—qualities essential to a platform designed for engineers building and debugging AI systems.

The brand voice is direct, confident, and jargon-aware without being pretentious. VoltAgent speaks to developers as peers: concise, example-driven, and unafraid of technical depth. Tone examples: "Deploy agents with confidence" (not "Empower your AI journey"), "Monitor LLM calls in real time" (not "Gain insights into your models"). The visual language reinforces this: clean typography (Inter for UI, IBM Plex Mono for code), minimal ornamentation, and purposeful use of color—emerald for success and primary actions, slate grays for hierarchy, and a reserved secondary blue (#5865f2) for secondary interactions.

Colors

The color system is built on a dark-mode-first philosophy optimized for extended screen time and technical workflows. The surface stack anchors the interface: surface (#070f12) is the deepest base, surface-container (#0f1820) provides mid-tone card backgrounds, and surface-container-highest (#25313d) creates subtle elevation for modals and overlays. On-surface text (#f2f2f2) maintains WCAG AA contrast (ratio ~15:1) against all surface layers, with on-surface-variant (#b8b3b0) reserved for secondary labels and disabled states.

Primary (#2fd6a1) is the brand's signature emerald—used exclusively for CTAs ("Try VoltOps"), active states, success badges, and focus rings. It appears sparingly but decisively, creating visual hierarchy without noise. Secondary (#5865f2) is a technical blue reserve

Typography

The type system uses Inter as the primary typeface across all UI, with IBM Plex Mono reserved for code blocks and technical content. The hierarchy spans eight levels: display (60px, 700 weight) for hero headlines, headline-lg (40px, 600) for section titles, headline-md (28px, 600) for subsections, title-lg (20px, 600) for card headers, body-lg (18px, 400) for feature descriptions, body-md (16px, 400) for standard body copy, label-md (14px, 600) for buttons and badges, and label-sm (12px, 500) for captions and metadata. Letter-spacing is applied conservatively: -0.04em on display for tightness, -0.02em on headline-lg, and 0.01em on body and label sizes to enhance readability on dark backgrounds.

Line-height is set generously to support extended reading: 68px for display (1.13x), 48px for h

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered on the viewport. The gutter spacing is 24px (md token), applied consistently between columns and as the outer margin on desktop viewports. Page rhythm is established through lg spacing (40px) for section separation, creating breathing room between hero, pricing tiers, FAQ, and footer. Container padding follows the gutter rule: 24px on desktop, scaling to 16px on tablets and 12px on mobile.

White-space is treated as a first-class design element: cards and sections are separated by at least 40px of vertical space, and internal card padding is 24px (md token). The pricing tier cards, for example, use 24px padding with 12px (sm token) gaps between rows of features. Responsive breakpoints are: desktop (1280px+),

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts, avoiding heavy drop-shadows that would feel dated on a dark canvas. Level 1 (Base): surface (#070f12) with no shadow, used for the page background and flat sections. Level 2 (Standard Cards): surface-container (#0f1820) with elevation-sm (0 1px 2px rgba(0, 0, 0, 0.06)), applied to cards, input fields, and list items. Level 3 (Elevated/Modals): surface-container-high (#1a2530) with elevation-md (0 4px 12px rgba(0, 0, 0, 0.15)), used for hover states, dropdowns, and modal overlays. Level 4 (Floating/Tooltips

Shapes

The shape philosophy is "Technical Precision"—rounded corners are minimal and purposeful, never organic or playful. The rounded scale uses: sm (0.25rem / 4px) for small interactive elements like checkboxes, DEFAULT (0.375rem / 6px) for buttons and input fields (matching the observed 6px border-radius in the DOM), md (0.5rem / 8px) for list items and small cards, lg (0.75rem / 12px) for standard cards and modals, xl (1rem / 16px) for large containers and hero sections, and full (9999px) for badges and pill-shaped elements.

Buttons use DEFAULT (6px) to feel compact and technical; cards use lg (

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses emerald (#2fd6a1) background with near-black text (rgb(10, 10, 10)), 6px border-radius, 10px vertical / 16px horizontal padding, and label-md typography (14px, 600 weight). On hover, the background shifts to #24b896 (a slightly darker emerald) with a 200ms transition. The secondary button is transparent with a 1px outline-variant border, on-surface text, and the same padding and radius; on hover, it gains a surface-container-high background and primary text color. Ghost buttons are transparent with no border, used for tertiary actions; on hover, they gain a subtle rgba(47, 214, 161, 0.08) background.

Containers & Surfaces Cards are the primary container component: surface-container background (#0f

Do's and Don'ts

**Do**

• Do use emerald (#2fd6a1) exclusively for primary CTAs, success states, and focus rings—it's the brand's signature and should feel rare and intentional.
• Do maintain at least 40px of vertical spacing between major sections to preserve the minimalist, breathing aesthetic.
• Do apply label-md (14px, 600 weight) to all button text and use consistent 10px / 16px padding across button sizes.
• Do use IBM Plex Mono for code blocks and technical content; never substitute with a generic monospace font.
• Do apply 200ms cubic-bezier(0.08, 0.52, 0.52, 1) transitions to all hover and focus state changes for a responsive, polished feel.
• Do reserve the secondary blue (#5865f2) for informational badges and secondary interactions; never use it for primary CTAs.

**Don't**

• Don't use rounded corners larger than xl (16px) on standard UI components—the brand favors technical precision, not organic softness.
• Don't apply heavy shadows (elevation-lg) to cards; reserve elevation-lg for floating elements like modals and tooltips only.
• Don't mix typefaces within a single component; Inter is for UI, IBM Plex Mono is for code—never blend them.
• Don't use the tertiary color (#fac015) for primary actions or CTAs; it's reserved for warnings and highlights.
• Don't reduce padding below 12px on buttons or inputs; the brand values breathing room and clarity over density.
• Don't apply text-shadow to body copy; reserve it only for small labels (label-sm) over busy or gradient backgrounds.