# VoltAgent Design

> VoltAgent is a TypeScript framework for building AI agents. The brand is dark-first with electric green accent.

## Overview

VoltAgent helps developers build AI agents in TypeScript. The design emphasizes clarity, technical precision, and developer familiarity.

## Brand Colors

| Token | Hex | Usage |
|-------|-----|-------|
| Primary Green | `#00d992` | CTAs, links, brand accent |
| Background | `#0a0a0a` | Primary dark surface |
| Surface | `#141414` | Cards, elevated elements |
| Border | `#262626` | Dividers |
| Text Primary | `#fafafa` | Headlines, body |
| Text Secondary | `#a1a1aa` | Descriptions |

### Green Palette

| Token | Hex |
|-------|-----|
| Green 50 | `#ecfdf5` |
| Green 100 | `#d1fae5` |
| Green 400 | `#4ade80` |
| Green 500 | `#00d992` |
| Green 600 | `#16a34a` |

## Typography

| Role | Family |
|------|--------|
| Primary Sans | Inter |
| Monospace | SF Mono, Menlo |

| Role | Size | Weight |
|------|------|--------|
| H1 | 48px | 700 |
| H2 | 36px | 600 |
| H3 | 24px | 600 |
| Body | 16px | 400 |
| Code | 14px | 400 |

## Spacing

4px base: 1=4px, 2=8px, 4=16px, 8=32px, 16=64px

## Components

- **Primary Button**: Green bg (`#00d992`), dark text
- **Cards**: Surface bg (`#141414`), 8px radius
- **Code Blocks**: Deep bg, green syntax accents

## Dark Mode (Primary)

VoltAgent is dark-mode first:
- Background: `#0a0a0a`
- Surface: `#141414`
- Accent: `#00d992` (electric green)

## Do's and Don'ts

### Do's
- Use electric green sparingly
- Maintain generous whitespace
- Use Inter for UI, monospace for code
- Keep surfaces dark and muted

### Don'ts
- Don't use green for body text
- Don't use light mode as primary
- Don't use pure white backgrounds

## Resources

- [voltagent.dev](https://voltagent.dev)
- [GitHub](https://github.com/VoltAgent/voltagent)

<!-- Source: https://designmd.app.br/brands/voltagent · designmd.app -->