Typography
Base Font · Inter / system-ui
Inter
The quick brown fox jumps over the lazy dog
Light · 300
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
Mono Font · SFMono-Regular
SFMono
import { VoltAgent } from '@voltagent/core'
Regular · 400
Heading
Display Hero · 60px · Bold · line-height: 60px · letter-spacing: −0.9px
Build AI agents in TypeScript.
Heading XL · 36px · Bold · line-height: 39.6px · letter-spacing: −0.9px
Open Source TypeScript AI Agent Framework
Heading Large · 24px · Bold · line-height: 32px
VoltAgent is a framework for building modular, scalable AI agents with TypeScript. Connect tools, manage state, and orchestrate workflows with ease.
Body Large · 18px · Regular · line-height: 26.4px
Connect any LLM provider. Manage conversational memory. Use MCP-compatible tools.
Body Default · 16px · Regular · line-height: 23.1px
Last updated 2 minutes ago · 12,480 tool calls logged
Body Small · 14px · Regular · line-height: 20px
TYPESCRIPT · AGENTS · MCP
Caption / Label · 12px · Semibold · line-height: 18.2px · letter-spacing: 2.52px
Letter Spacing
VoltAgent
Tight Tracking
−0.9px · headings, display text
Agent Core
Normal Tracking
−0.8px · body text, paragraphs
TYPESCRIPT · MCP
Wide Tracking
2.52px · uppercase labels, caps
Spacing
Spacing Scale
18 tokens — 2px → 144px
Borders
Border Widths
Three border widths — --border-width-hairline: 1px, --border-width-thin: 1.5px, --border-width-base: 2px.
Shadows / Elevation
Shadow Tokens
6 tokens
sm
×5
rgba(92, 88, 85, 0.2) 0px 0px 15px · ambient glow
md
×3
rgba(0,0,0,.7) 20px 60px + inset rgba(148,163,184,.1) · deep modal
lg
×3
rgba(245,158,11,.2) 0px 0px 15px · amber glow
xl
×2
rgba(52,211,153,.3) 0px 0px 15px · brand teal glow
Z-Index
| Layer | Value | Usage |
|---|
| Background | -1 | Background decorations, canvas layers |
| Base | 1 | Base content layer |
| Raised | 2 | Slightly elevated content |
| Elevated | 3 | Cards, interactive elements |
| Navigation | 10 | Sticky headers, navigation bars |
| Popover | 20 | Dropdowns, popovers, tooltips |
| Overlay | 50 | Overlays, sidebars, drawers |
| Dialog | 201 | Modals, high-priority dialogs |
| Toast | 1000 | Global notifications, toasts |
Breakpoints
📱
XS · Mobile
360px
Minimum phone viewport
📲
SM · Small Mobile
420px
Large phone viewport
💻
LG · Laptop
1024px
Standard laptop breakpoint
🖥️
XL · Desktop
1280px
Standard desktop breakpoint
🖥️
2XL · Wide
1440px
Wide display breakpoint
📺
BP-23 · Ultra
1992px
Ultra-wide / 4K viewport
Total of 23 breakpoints from 360px to 1992px — supports all device sizes including tablet (576–768px), laptop (960–1025px), and wide displays (1440–1992px).
Opacity
Opacity Tokens
12 tokens — 0.1 → 0.99
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Light Gray | Black | 18.76:1 | AAA |
| Light Gray | Cyan (#10B981) | 2.27:1 | Fail |
| Light Gray | Dark Gray 3 | 17:1 | AAA |
| Light Gray | Blue 3 | 4.11:1 | AA Large |
| Light Gray | Dark Gray 4 | 15.55:1 | AAA |
| White | Black | 21:1 | AAA |
| White | Cyan (#10B981) | 2.54:1 | Fail |
| White | Dark Gray 3 | 19.03:1 | AAA |
| White | Blue 3 (#5865F2) | 4.61:1 | AA |
| White | Dark Gray 4 | 17.4:1 | AAA |
| Light Gray 2 | Black | 10.11:1 | AAA |
| Light Gray 2 | Cyan (#10B981) | 1.22:1 | Fail |
| Light Gray 2 | Dark Gray 3 | 9.16:1 | AAA |
| Light Gray 2 | Blue 3 | 2.22:1 | Fail |
| Light Gray 2 | Dark Gray 4 | 8.38:1 | AAA |
| White (F0F6FC) | Black | 19.29:1 | AAA |
| White (F0F6FC) | Cyan (#10B981) | 2.33:1 | Fail |
| White (F0F6FC) | Dark Gray 3 | 17.48:1 | AAA |
| White (F0F6FC) | Blue 3 | 4.23:1 | AA Large |
| White (F0F6FC) | Dark Gray 4 | 15.99:1 | AAA |
CSS Variables Reference
Black--color-black#000000
Dark Gray 3--color-dark-gray-3#101010
Dark Gray 4--color-dark-gray-4#1A1A1A
Dark Gray 7--color-dark-gray-7#1E1E1E
Dark Gray 9--color-dark-gray-9#242526
Black 2--color-black-2#050507
Blue 3--color-blue-3#5865F2
Cyan (Brand)--color-cyan#10B981
Cyan 2--color-cyan-2#00D992
Text Disabled--color-dark-gray-2#3D3A39
Mid Gray--color-mid-gray#8A8380
Light Gray 2--color-light-gray-2#B8B3B0
Light Gray--color-light-gray#F2F2F2
White--color-white#FFFFFF
Cyan 3--color-cyan-3#2FD6A1
Border Default--color-dark-gray#262626
Border Muted--color-dark-gray-2#3D3A39
Border Strong--color-dark-gray-6#5C5855
Base Font--font-family-baseInter
System Font--font-family-2system-ui
Mono Font--font-family-3monospace
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
Caption--font-size-2xs11px
Label--font-size-xs12px
Small--font-size-sm13px
Body Small--font-size-lg14px
Body Default--font-size-2xl16px
Body Large--font-size-4xl18px
Heading--font-size-6xl24px
Heading XL--font-size-36px36px
Display--font-size-60px60px
Hairline--border-width-hairline1px
Thin--border-width-thin1.5px
Base--border-width-base2px
Instant--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal300ms
Slow--duration-slow500ms
Slower--duration-slower700ms
Ease In-Out--easing-ease-in-outease-in-out
Background--z-1-1
Base--z-21
Navigation--z-510
Popover--z-620
Overlay--z-750
Dialog--z-8201
Toast--z-91000
Design System Preview · VoltAgent (Dark) · Generated 18/04/2026 · 148 color tokens · 13 font-size · 3 font-family · 5 font-weight · 11 line-height · 9 letter-spacing · 18 spacing · 8 radius · 3 border-width · 6 shadow · 5 duration · 1 easing · 9 z-index · 23 breakpoints · 12 opacity