# Agent3 Design System

> High-contrast monochrome foundations punctuated by a high-voltage signal red and ultra-soft 60px corner geometry.

**Source:** https://agent3.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Agent3 utilizes a stark "Ink and Snow" foundation, pairing a deep teal-black `#0c2a31` with pure white `#ffffff`. The primary brand voltage is delivered through a specific signal red `#e43e30` (`--a3-color-0`), used exclusively for high-priority calls to action and critical surface highlights. Typography is anchored by **Manrope**, appearing in a wide weight range from 300 (body) to 700 (display), often featuring tight negative letter-spacing at larger scales. A defining characteristic is the aggressive use of 60px border radii on primary buttons and feature cards, creating a "pill-capsule" aesthetic that softens the high-contrast color palette.

## Signature DNA
1. **The 60px Capsule** (Primary buttons and feature cards use a consistent 60px radius, creating a distinct oversized pill shape that defines the component language across all pages).
2. **Signal Red Punctuation** (The use of `#e43e30` is strictly reserved for action; it is the only chromatic color used for functional UI elements like the "Contact us" button).
3. **Manrope Variable Weights** (The system leverages Manrope's full range, specifically pairing Light 300 for long-form body text with Bold 700 for display headers to create extreme typographic hierarchy).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Primary canvas, button text, card backgrounds | 50 | 1 | `--bs-white` |
| `{colors.ink}` | `#0c2a31` | Footer background, primary text, dark surfaces | 42 | 0.8 | Computed style |
| `{colors.black}` | `#000000` | Navigation text, borders, secondary text | 171 | 1 | `--a3-color-8` |
| `{colors.ghost}` | `#f2f4f7` | Subtle borders, section backgrounds | 31 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#e43e30` | Primary CTA background, brand signal | 9 | 1 | `--a3-color-0` |
| `{colors.slate}` | `#667085` | Muted body text, secondary descriptions | 12 | 0.8 | Computed style |
| `{colors.purple}` | `#5c47c1` | Decorative border (About page only) | 1 | 1 | decorative_only |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{colors.success}` | `#07bc0c` | Success states and progress indicators |
| `{colors.warning}` | `#f1c40f` | Warning icons and toast notifications |
| `{colors.error}` | `#e74c3c` | Error icons and destructive actions |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Manrope | 300, 400, 500, 600, 700, 800 | All UI, Headings, Body | Manrope (Google Fonts) | OFL |
| Roboto | 400 | Captions, Image metadata | Roboto | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 72px | 90px | -1.44px | 700 | Hero H1 | `h1.wp-block-heading` |
| `{type.h1}` | 36px | 44px | -0.72px | 700 | Section Header | `h4` |
| `{type.h2}` | 30px | 38px | -0.6px | 600 | Sub-section | `h5#we-lead-with-conviction` |
| `{type.h3}` | 24px | 32px | -0.48px | 700 | Card Title | `span.sc-1e07d4b5-19` |
| `{type.body-xl}` | 20px | 30px | -1.2px | 300 | Lead Paragraph | `p.xl` |
| `{type.body-lg}` | 18px | normal | normal | 300 | Default Body | `p` |
| `{type.body-md}` | 16px | 24px | -0.32px | 300 | Secondary Body | `p.md` |
| `{type.body-sm}` | 14px | 20px | normal | 500 | UI Labels/Nav | `a` |

### Principles
1. **Negative Tracking on Display:** All text 24px and larger must use negative letter-spacing (ranging from -2% to -6%) to maintain density.
2. **Light Body Weight:** Standard running text is set at weight 300 (Light) to contrast against heavy 700+ headers.
3. **Teal-Black for Depth:** Use `#0c2a31` instead of pure black for large dark surfaces (footers, dark sections) to maintain brand warmth.

## Spacing
**Base unit:** 4px (Inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 12px | 26 |
| `{space.md}` | 16px | 14 |
| `{space.lg}` | 20px | 45 |
| `{space.xl}` | 40px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Navigation, Footer, Layout containers | 238 occurrences |
| `{radius.card}` | 16px | Secondary content cards | 47 occurrences |
| `{radius.pill}` | 60px | Primary Buttons, Feature Cards, Actionable surfaces | 10 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.flat}` | none | Default state for all cards and buttons | Component spec |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.3) 0px 1px 4px -1px` | Rare floating elements | 2 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** All
**Spec:** Background: `#e43e30` | Text: `#ffffff` | Radius: `60px` | Padding: `10px 18px` | Typography: `14px/500`
**States observed:** Default | Hover: `#c9291c` | Focus | Active | Disabled: not captured

#### Navigation
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#000000` | Radius: `0px` | Typography: `16px/300`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting core services or "What we do"
**Pages observed:** Home, About
**Spec:** Background: `#e43e30` | Text: `#ffffff` | Radius: `60px` | Padding: `22px 42px`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site closure
**Pages observed:** All
**Spec:** Background: `#0c2a31` | Text: `#ffffff` | Radius: `0px` | Typography: `16px/300`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

#### Content Surface
**Role:** Section dividers with borders
**Pages observed:** All
**Spec:** Background: transparent | Border: 1px `#f2f4f7` | Radius: `0px` | Padding: `40px 0px 0px`
**States observed:** Default | Hover | Focus | Active | Disabled: not captured

## Layout
| Property | Value |
|------|-------|
| Max-width | 1440px |
| Section Padding | 80px (vertical) |
| Grid | 12-column desktop |

## Imagery & decoration
- **Gradients:** Uses complex multi-stop gradients in feature cards (e.g., orange-to-red, blue-to-purple).
- **Iconography:** Line-art icons contained within circular or rounded-square containers.
- **Avoidance:** Avoids drop shadows on primary cards; relies on color blocks and borders for separation.

## Do's
- Use `#e43e30` for the "Contact us" button in the navigation.
- Apply `60px` border radius to all primary action buttons.
- Set display headers (H1) to `72px` with `-1.44px` letter-spacing.
- Use Manrope weight `300` for all standard paragraph text.
- Utilize `#0c2a31` for full-width dark background sections.

## Don'ts
- **Wrong:** Using `#f99d1c` (orange) for a primary site CTA. **Right:** Use `#e43e30`. **Reason:** Orange is a sub-brand/decorative token, not the parent primary.
- Do not use shadows on the `60px` rounded cards.
- Do not use Manrope Bold (700) for body text; reserve for headings.
- Do not use pure black `#000000` for large section backgrounds; use `#0c2a31`.
- Do not use sharp corners (0px) for buttons.

## Similar brands
- Stripe (High-contrast typography, bold color accents)
- Vercel (Monochrome foundation, geometric precision)
- Linear (Teal-black depth, refined typography)

## Quick start

### CSS Variables
```css
:root {
  --a3-primary: #e43e30;
  --a3-ink: #0c2a31;
  --a3-white: #ffffff;
  --a3-radius-pill: 60px;
  --font-main: "__Manrope_6b03d3", sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #e43e30;
  --color-ink: #0c2a31;
  --font-manrope: "__Manrope_6b03d3";
  --radius-pill: 60px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Agent3 system: Signal Red background, white text, 60px border radius, and Manrope 14px Medium weight."
- "Design a feature section header: Manrope Bold, 36px, -0.72px letter spacing, color Ink (#0c2a31)."
- "Generate a dark footer component using the Ink (#0c2a31) background and white Manrope Light text."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the computed styles.
- Mobile-specific font scale transitions for H1 headers were not fully documented in the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Homepage | https://agent3.com | 1440x900 | 2026-06-06 |
| Pricing | https://agent3.com/pricing | 1440x900 | 2026-06-06 |
| About | https://agent3.com/about | 1440x900 | 2026-06-06 |