VoltAgent

Overview

VoltAgent is an observability-first TypeScript AI Agent framework designed for developers building enterprise-scale multi-agent systems. The platform unifies development, observability, and deployment into a single cohesive experience, eliminating the fragmentation that plagues traditional AI infrastructure. The aesthetic is "Technical Minimalism with Neon Accents"—a dark, high-contrast interface where a vibrant emerald green (#2fd6a1) acts as the primary accent, signaling interactivity and system vitality against a near-black canvas (#050507). The design evokes precision, speed, and developer confidence: every pixel serves a function, every color choice communicates state or action.

The brand voice is direct, technical, and unafraid of jargon—it speaks to engineers who value clarity over marketing polish. Tone: pragmatic, occasionally witty, never condescending. Vocabulary leans into systems thinking ("observability," "multi-agent," "deployment") and avoids buzzwords. Example sentence in brand voice: "Deploy your agent system in seconds, observe every decision in real time, scale without the headaches."

Colors

The color system is built on a dark-first foundation with strategic accent deployment. **Surface Stack**: The background (#050507) is near-absolute black, providing maximum contrast for text and interactive elements. Surface containers range from #0a0a0c (lowest) through #2a2a2f (highest), creating a subtle depth hierarchy without introducing grays that would dilute the dark aesthetic. **Primary Color (#2fd6a1)**: Emerald green used exclusively for CTAs, focus states, active indicators, and brand-critical interactive elements. This color appears on "Get Started" buttons, the VoltAgent logo, feature highlights, and all hover/active states. It must never be used for body text or backgrounds—reserve it for moments that demand user attention. **Secondary Color (#5865f2)**: Discord-inspired blu

Typography

The type system pairs Inter (sans-serif) for UI and body copy with IBM Plex Mono for code and technical content. **Display (60px, 700 weight)** anchors hero sections with maximum visual impact and -0.04em letter-spacing to tighten the letterforms. **Headline-lg (40px, 600 weight)** and **Headline-md (28px, 600 weight)** establish section hierarchy with -0.02em and -0.01em tracking respectively, creating a sense of forward momentum. **Body-lg (18px, 400 weight)** and **Body-md (16px, 400 weight)** maintain readability at 28px and 24px line-heights, with generous leading to prevent text from feeling cramped on dark backgrounds. **Label-md (14px, 600 weight)** and **Label-sm (12px, 500 weight)** handle UI labels, button text, and badges with 0.01–0.02em positive letter-spacing to enhance legi

Layout

The layout uses a 12-column grid with a 1280px max-width container, maintaining consistent horizontal rhythm across all breakpoints. Page sections are separated by lg spacing (40px) vertically, creating breathing room between hero, feature cards, testimonials, and footer. The gutter (24px) is applied consistently to left/right margins on mobile and tablet, expanding proportionally on desktop. White-space is treated as a design element: negative space around the primary CTA ("Get Started") emphasizes its importance, while dense card layouts in feature sections create visual texture without overwhelming. Container padding follows the pattern: 24px on mobile, 40px on tablet, 64px on desktop. The grid is fluid on mobile (100vw - 48px), snaps to 768px on tablet, and locks at 1280px on desktop.

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layered backgrounds. **Level 1 (Base)**: The surface (#050507) with no shadow—the foundation. **Level 2 (Cards & Containers)**: 1px solid border at {colors.surface-container-high} with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This creates a soft separation from the background without introducing visual heaviness. **Level 3 (Modals & Elevated Surfaces)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) with a 1px border at {colors.outline}. **Interactive Elevation**: On hover, cards and buttons receive an additional drop-sh

Shapes

The shape philosophy is "Geometric Precision"—rounded corners are used sparingly and consistently to signal interactive elements while maintaining a technical, engineered aesthetic. **Buttons & CTAs**: 10px border-radius (lg) creates a subtle softness without appearing playful or casual. **Cards & Containers**: 10px border-radius (lg) matches buttons for visual cohesion. **Input Fields & Selects**: 6px border-radius (DEFAULT) is tighter, reinforcing their role as data-entry elements distinct from primary actions. **Badges & Pills**: 9999px border-radius (full) for fully rounded shapes, used on

Components

Action Elements **Button-Primary** uses {colors.primary} (#2fd6a1) background with {colors.on-primary} (#010409) text, 44px height, 12px 24px padding, 10px border-radius, and a 1px border matching the background. On hover, shift to {colors.primary-fixed-dim} and add box-shadow: 0 3px 8px rgba(47, 214, 161, 0.25) with a 200ms cubic-bezier(0.4, 0, 0.6, 1) transition. Active state darkens to #1a7d5f. **Button-Secondary** mirrors primary but with transparent background, 1px {colors.primary} border, and {colors.primary} text; on hover, apply rgba(47, 214, 161, 0.08) background. **Button-Ghost** uses transparent background with 1px {colors.outline-variant} border; hover state shifts to {colors.surface-container-high} with {colors.outline} border.

Containers & Surfaces **Card** component

Do's and Don'ts

**Do**

• Do use {colors.primary} (#2fd6a1) exclusively for primary CTAs, focus indicators, and brand-critical moments—it is the system's visual anchor.
• Do maintain minimum 7:1 contrast ratios between text and background colors; test with tools like WebAIM Contrast Checker.
• Do apply 200ms cubic-bezier(0.4, 0, 0.6, 1) transitions to all interactive state changes (hover, focus, active) for consistent, snappy feedback.
• Do use Inter for all UI and body copy; reserve IBM Plex Mono strictly for code blocks and technical content.
• Do respect the 8px spacing unit: all padding, margins, and gaps should be multiples of 8px (4px, 8px, 12px, 16px, 24px, 32px, 40px, 64px).

**Don't**

• Don't use {colors.primary} for body text, backgrounds, or non-interactive elements—it will dilute its signaling power and create visual noise.
• Don't apply shadows lighter than rgba(0, 0, 0, 0.12); light shadows are invisible on the dark background and waste rendering performance.
• Don't mix rounded and sharp corners on similar component types; maintain consistency within a component family (all buttons use 10px, all inputs use 6px).
• Don't use system fonts or fallback stacks; always load Inter and IBM Plex Mono from Google Fonts to ensure brand consistency across all devices.
• Don't animate non-interactive elements or use motion for decoration; reserve animations for state changes, loading indicators, and user feedback only.