# VoltAgent — Design System
> Open-source TypeScript framework for building, observing, and deploying enterprise multi-agent systems.
- **Canonical:** https://uiuxskills.com/library/voltagent
- **Source:** https://voltagent.dev
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:01.571Z

---

---
version: alpha
name: VoltAgent
description: >-
  Open-source TypeScript framework for building, observing, and deploying enterprise multi-agent
  systems.
tone: Modern, technical, developer-centric, and efficient.
color-scheme: dark
colors:
  primary: "#10B981"
  accent: "#00D992"
  surface: "#050507"
  surface-container: "#1A1A1A"
  on-surface: "#FFFFFF"
  on-surface-dim: "#B8B3B0"
  outline: "#3D3A39"
  error: "#D32F2F"
  focus-ring: "#2FD6A1"
  on-primary: "#000000"
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 60px
    fontWeight: 700
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 600
  body-md:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
  display-md:
    fontFamily: Inter
    fontSize: 45px
    fontWeight: 700
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.surface-container}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.accent}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
    width: fit-content
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-surface}"
  swatch-on-surface-dim:
    backgroundColor: "{colors.on-surface-dim}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 400ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.2)
  md: 0 4px 6px rgba(0,0,0,0.2)
  lg: 0 10px 15px rgba(0,0,0,0.2)
---

## Overview

VoltAgent is a developer-focused platform designed for building complex AI agent workflows. It features a modern, dark-themed aesthetic that emphasizes technical precision, code-first integration, and high-performance observability.

## Colors

The color palette is optimized for a high-contrast, dark-mode developer environment, utilizing a deep background to make neon-inspired accents pop.

*   Primary (#10B981): The core brand color used for primary actions, highlights, and the logo.
*   Accent (#00D992): Secondary accent color used for links and specific UI highlights.
*   Surface (#050507): The primary background color for the application interface.
*   Surface-container (#1A1A1A): Used for cards and secondary containers to create depth.
*   On-surface (#FFFFFF): Primary text color for high contrast against dark backgrounds.
*   On-surface-dim (#B8B3B0): Secondary text color for labels and descriptive copy.
*   Outline (#3D3A39): Border color for cards and input fields.
*   Error (inferred) (#D32F2F): Semantic color for error states.
*   Focus-ring (#2FD6A1): High-visibility color for focus states and interactive elements.
*   On-primary (inferred) (#000000): Text color for elements with a primary background.

## Typography

The typography system relies exclusively on the Inter font family to maintain a clean, readable, and professional technical interface.

*   Display-lg: Used for primary hero headlines.
*   Headline-md: Used for section headers.
*   Body-md: Standard body text for readability.
*   Body-sm (inferred): Used for secondary descriptions and metadata.
*   Label-md (inferred): Used for button labels and navigation items.
*   Label-sm: Used for small badges and tags.
*   Display-md (inferred): Secondary headline size.

## Layout

The site utilizes a centered container layout with a strict max-width constraint. Spacing is governed by a 4px base unit, ensuring consistent vertical rhythm and horizontal alignment. The page follows a logical flow: nav, hero, platform-overview, framework-showcase, integrations, community, and footer. Responsive behaviour is mobile-first, collapsing navigation into a mobile menu and stacking content blocks vertically on smaller viewports.

## Elevation & Depth

Depth is conveyed through subtle, single-layer shadows across three distinct levels to differentiate content from the background.

*   elevation.sm: Used for subtle card lift.
*   elevation.md: Used for standard interactive elements and dropdowns.
*   elevation.lg: Used for modal or drawer overlays.

## Shapes

The shape language emphasizes a clean, modern aesthetic through a consistent rounded-corner scale. Small UI elements use a 4px radius, while cards and larger containers utilize an 8px radius to soften the technical interface.

Buttons and badges use the full rounding token to create distinct, pill-shaped interactive targets that stand out from the rectangular content containers.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{typography.label-md}` for high-impact calls to action. Secondary buttons utilize `{colors.surface-container}` to maintain a lower visual hierarchy.

### Card
Cards are constructed with a `{colors.surface-container}` background and `{rounded.lg}` corners. They are intended to house feature descriptions and code snippets, providing a clear boundary against the `{colors.surface}` background.

### Input Field
Input fields feature a `{colors.surface}` background and a `{colors.outline}` border. On focus, the border transitions to `{colors.focus-ring}` to provide clear feedback to the user.

### Badge
Badges are compact, fit-content elements using `{typography.label-sm}`. They are used for categorizing metadata or highlighting status, with `{colors.error}` reserved specifically for critical alerts.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.error}` for non-destructive actions. |
| Apply `{rounded.lg}` to all card components. | Avoid using sharp corners (0px) on cards. |
| Use `{typography.body-md}` for primary paragraph content. | Never use `{typography.display-lg}` for body text. |
| Ensure all interactive elements have a `{colors.focus-ring}` state. | Do not mix `{colors.primary}` and `{colors.accent}` poorly. |
| Use `{colors.on-surface-dim}` for secondary text hierarchy. | Avoid using custom spacing values outside the 4px scale. |
| Apply `{spacing.md}` as the standard gutter between sections. | Do not use `{elevation.lg}` on flat navigation bars. |
| Use `{typography.label-sm}` for status badges. | Do not use large font weights for secondary metadata. |
| Use `{colors.outline}` for input field borders. | Do not use transparent borders for input fields. |

## Content Style

CTA labels are imperative and action-oriented, such as "Get Started" or "Join the Server," using clear, concise verb forms.

Headings are direct, benefit-driven, and technical, designed to communicate the value of the framework immediately to a developer audience.

Copy density is kept low through scannable paragraphs, frequent use of code blocks, and feature lists, ensuring the technical documentation remains accessible and easy to parse.

## Imagery & Icons

The visual language uses a mix of technical diagrams, code snippets, and iconography. Icons are clean and rounded, often featuring a stroke-based aesthetic that aligns with the minimal, dark-themed interface. Imagery is treated as a functional component of the documentation, often paired with animated beams or flow diagrams to explain complex agent orchestration.