CURATED · OPEN · FREE

Voltagent

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

Developer ToolsCleanMonochromeBold TypographyRestraint

↓ Download design system (9 MB)Open in OpenDesign

Visit: https://voltagent.dev

📦 Browse pack contents →

Identity DNA

engineeringinfrastructuremulti-agententerpriseplatform

A professional workshop for building complex AI systems

Color

#10b981Accent

#f2f2f2Ink

#f0f6fcInk soft

#0a0a0aBG

#1a1a1aBG soft

#050507BG quiet

#b8b3b0Muted

rgb(38, 38, 38)Line

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

Typography

humanist-sans · monospace

display56px · 600
body16px · 400
mono14px · 400

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

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Standard 4px grid with generous section spacing

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgb(38, 38, 38)

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Fixed-width max container with generous side padding

Motion & Interaction

150msmicro

200mssmall

700msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and background-color transitions · Subtle opacity fades

Color changes or border highlight · Immediate visual feedback

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

Voice & Don'ts

Tone Professional, technical, and confident
Headlines Large, bold, and direct
CTAs Action-oriented, clear next steps

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
Avoid: Playful language
Avoid: Excessive exclamation points
Avoid: Vague promises

Inside the pack — real screenshots

Voltagent — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko