---
name: Voltagent
description: "An excellent example of a modern, dark-themed developer tool interface with a professional, restrained aesthetic."
version: alpha

colors:
  background: "#0a0a0a"
  primary: "#f2f2f2"
  secondary: "#f0f6fc"
  tertiary: "#10b981"
  neutral: "#b8b3b0"
  bg-soft: "#1a1a1a"
  bg-quiet: "#050507"
  muted-soft: "rgba(255,255,255,0.4)"
  line: "rgb(38, 38, 38)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.65
    fontWeight: 400
    letterSpacing: "0px"
  mono:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

The end-to-end AI Agent Engineering Platform for building enterprise multi-agent systems.

*A professional workshop for building complex AI systems*

## Colors

High-contrast dark theme with a single emerald accent for focus

- **Background (`#0a0a0a`)** — uses `bg` token
- **Primary text (`#f2f2f2`)** — uses `ink` token
- **Secondary text (`#f0f6fc`)** — uses `ink-soft` token
- **Accent (`#10b981`)** — uses `accent` token
- **Muted (`#b8b3b0`)** — uses `muted` token
- **Borders (`rgb(38, 38, 38)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use Inter or similar humanist-sans for UI and body text
- Use IBM Plex Mono or similar for code blocks
- Large display text should be tight and bold

## Layout

Fixed-width max container with generous side padding

*Rhythm:* Standard 4px grid with generous section spacing

## Elevation & Depth

- rgba(0, 0, 0, 0.7) 0px 20px 60px 0px
- rgba(0, 217, 146, 0.3) 0px 0px 30px 0px
- rgba(92, 88, 85, 0.3) 0px 0px 15px 0px
- Borders: 1px solid rgb(38, 38, 38)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Dark background, 1px border, white text, hover state changes
- **card:** Dark cards with subtle inner glow or border on hover
- **chip:** Small pills with dark background and subtle borders
- **input:** Dark input fields with subtle borders
- **hero:** Split layout with headline and a complex node-graph diagram

## Do's and Don'ts

**Don't:**
- Don't use bright, multi-colored gradients — screenshot shows a single dominant emerald accent on dark
- Don't use rounded, bubbly components — screenshot shows sharp 8px radius and flat borders
- Don't use wide, thin typography — screenshot shows tight, bold display fonts
- Don't use light backgrounds — screenshot is exclusively dark mode
- Don't use excessive drop shadows — screenshot uses subtle glows and thin borders for elevation
- Don't use center-aligned body text — screenshot shows left-aligned content blocks

---

## System Prompt (paste into AI agent)

```
Voltagent is a dark-themed developer tool for building enterprise AI agent systems. The design DNA centers on a high-contrast, professional dark palette with a deep black (#0a0a0a) background, bright white (#f2f2f2) ink, and a vibrant emerald (#10b981) accent. Typography relies on humanist-sans for clarity and monospace for code. Layout is spacious with a 12-column grid and generous section padding. Avoid playful or bubbly aesthetics; maintain sharp corners and thin, subtle borders. Do not use multi-color gradients or light-mode themes. Ensure code blocks use a clean monospace font like IBM Plex Mono. Transitions should be smooth and subtle, focusing on color and opacity changes.
```