# Voltagent · Design system migration spec

> Source: https://voltagent.dev  ·  Curated by OpenDesign  ·  en

> An excellent example of a modern, dark-themed developer tool interface with a professional, restrained aesthetic.

## 1. Identity DNA

The system is built like a clean, minimalist code editor: stripped of ornament, optimized for focus. Every element exists only to clarify function, creating an interface where the absence of decoration becomes the primary design statement.

**One-liner:** The end-to-end AI Agent Engineering Platform for building enterprise multi-agent systems.
**Keywords:** engineering · infrastructure · multi-agent · enterprise · platform
**Analogy:** A professional workshop for building complex AI systems

## 2. Color

The palette operates on a single principle: absolute clarity. High-contrast black and white create a stark, uncompromising visual field where content hierarchy is established solely through typography and weight.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0a0a0a` | main background |
| `--bg-soft` | `#1a1a1a` | card background |
| `--bg-quiet` | `#050507` | quiet area |
| `--ink` | `#f2f2f2` | body text |
| `--ink-soft` | `#f0f6fc` | secondary text |
| `--muted` | `#b8b3b0` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.4)` | weak hint |
| `--accent` | `#10b981` | single accent |
| `--line` | `rgb(38, 38, 38)` | divider |

**Color principle:** High-contrast dark theme with a single emerald accent for focus

This restraint is the core principle—color is never used as decoration, but only as the fundamental medium of text against ground.

## 3. Typography

Typography carries the entire visual weight of the system. Headlines command attention through bold, consistent sans-serif forms, while a monospace face is reserved strictly for code, maintaining a technical voice throughout.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 600 | -1px | Main hero headline |
| body | 16px | 1.65 | 400 | 0px | General body text |
| mono | 14px | 1.5 | 400 | 0px | Code snippets |

**Type rules:**
- 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

## 4. Spacing

A consistent 4px base grid establishes the underlying spatial rhythm, creating order through measurement rather than ornament.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid with generous section spacing

## 5. Surfaces

Surfaces are defined by the absence of depth cues. Without shadows or decorative borders, the hierarchy is communicated purely through spatial arrangement and typographic scale.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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)

## 6. Layout

The skeleton is a clean, centered column with generous white space acting as a structural element. This generous framing provides the primary visual organization, letting content breathe without compartmentalization.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Fixed-width max container with generous side padding

## 7. Motion & Interaction

Motion is deliberately absent from the interface. The static presentation reinforces the system's technical precision, prioritizing information stability over interactive feedback.

- **Durations:** micro 150ms · small 200ms · medium 700ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions
  - Subtle opacity fades

- **Hover:** Color changes or border highlight
- **Click:** Immediate visual feedback
- **Transition:** Smooth transitions over 0.2s to 0.7s
- **Keyboard:** Standard focus management

## 8. Voice & Don'ts

The editorial voice is technical and concise, mirroring the interface's precision. Language is functional, avoiding marketing flourish to maintain the developer-focused tone.

- **Tone:** Professional, technical, and confident
- **Headline style:** Large, bold, and direct
- **CTA style:** Action-oriented, clear next steps
- **Avoid:** Playful language / Excessive exclamation points / Vague promises

### Don'ts
- ❌ 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

The system deliberately omits all decorative elements, color accents, rounded corners, and animations—finding its power in what is consciously left out.

## System Prompt (paste into AI tool)

```
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.
```
