# Phantombuster Design System

> High-contrast automation utility defined by stark obsidian surfaces, Aeonik-led geometric precision, and a restrained palette of warm neutrals and functional greens.

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

## TL;DR
Phantombuster utilizes a "monochrome-plus" system where a foundation of pure white (#ffffff) and deep obsidian (#000000) is softened by warm stone and sand neutrals (#f5f5f5, #e7e5e4). The typography is dominated by Aeonik, used with generous leading and geometric clarity across a wide scale from 12px captions to 80px display heroes. Primary actions are consistently rendered as high-contrast obsidian pills or sharp-edged inputs. Saturated color is reserved for functional accents, specifically a lead-generation green (#46842c) used for success indicators and pricing highlights, and a singular brand blue (#5b6ff9) used for high-visibility surface moments.

## Signature DNA
1. **Obsidian Punch** (The use of #000000 for primary CTAs and footer backgrounds creates a heavy visual anchor against the #ffffff canvas, observed on the Homepage and Pricing pages.)
2. **Geometric Sans Hierarchy** (Aeonik is the structural backbone, specifically utilizing weight 400 for massive 80px display headers to maintain a technical, clean-room aesthetic without the aggression of bold weights.)
3. **Functional Neutrality** (A sophisticated scale of warm grays like Cinder (#44403c) and Stone (#79716b) handles secondary information, ensuring the UI feels like a professional tool rather than a consumer toy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface | 109 | 1.0 | computed_style |
| `{color.obsidian}` | `#000000` | Primary text, CTA backgrounds, footer background | 448 | 0.8 | computed_style |
| `{color.cinder}` | `#1c1917` | Secondary text, dark surface backgrounds | 200 | 0.8 | computed_style |
| `{color.stone}` | `#79716b` | Tertiary text, metadata | 23 | 0.8 | computed_style |
| `{color.sand}` | `#f5f5f5` | Section backgrounds, subtle card surfaces | 24 | 0.8 | computed_style |
| `{color.border-light}` | `#e7e5e4` | Default 1px dividers and card outlines | 60 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.success}` | `#46842c` | Pricing checkmarks, success states, active borders | 72 | 0.8 | computed_style |
| `{color.brand-blue}` | `#5b6ff9` | Decorative surfaces, high-visibility accents | 4 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Aeonik | 400, 500, 600, 700 | Primary display, headings, and UI | Lexend | Licensed |
| Qanelas | 400, 500, 700 | Secondary body and specific display moments | Montserrat | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 80px | 64px | normal | 400 | Homepage Hero | `h1.text-heading-xl` |
| `{type.display-lg}` | 56px | 64px | -0.56px | 400 | Section Headlines | `h2.font-aeonik` |
| `{type.display-md}` | 40px | 56px | normal | 400 | Sub-hero text | `p.text-[28px]` |
| `{type.heading-md}` | 32px | 40px | normal | 400 | Feature titles | `span.font-aeonik` |
| `{type.heading-sm}` | 24px | 32px | normal | 600 | Card titles | `q.text-heading-m` |
| `{type.body-lg}` | 18px | 28px | normal | 500 | Lead paragraphs | `span.text-rebranding-body-lg` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body text | `header#pb-navbar` |
| `{type.body-sm}` | 14px | 20px | normal | 500 | Button labels | `button.flex.h-[44px]` |
| `{type.caption}` | 12px | 16px | normal | 400 | Micro-copy | `span.relative.flex` |

### Principles
1. **Lightweight Display:** Large headers (56px+) prefer weight 400 over bold weights to maintain a sophisticated, airy feel.
2. **Tight Display Leading:** Display sizes (56px+) use a 1.14 line-height ratio (64px height for 56px size), creating tight, impactful text blocks.
3. **Geometric Clarity:** Aeonik is used for all functional UI labels to ensure high legibility in dense data environments.

## Spacing
**Base unit:** 8px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.1}` | 8px | 47 |
| `{space.2}` | 16px | 57 |
| `{space.3}` | 24px | 89 |
| `{space.4}` | 32px | 13 |
| `{space.section}` | 64px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Inputs, specific layout containers | `Text Input` component |
| `{radius.md}` | 12px | Standard cards, pricing tiers | `Card` component |
| `{radius.lg}` | 16px | Feature panels, testimonial blocks | `Surface` (observed) |
| `{radius.pill}` | 9999px | Primary CTA buttons, badges | `Pill / Badge` component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(115, 112, 110, 0.08) 0px 8px 20px 0px` | Feature cards on white canvas | Pricing page cards |
| `{shadow.deep}` | `rgba(23, 20, 18, 0.08) 0px 12px 16px -4px` | Overlays or high-priority cards | Homepage panels |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Sign up, Start trial)
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.obsidian}` (#000000) / Text: `{color.white}` (#ffffff) / Radius: `{radius.pill}` (9999px) / Typography: `{type.body-sm}` (14px/500)
**States observed:** Default | Hover: captured

#### Text Input
**Role:** Lead capture, email entry
**Pages observed:** Homepage, About
**Spec:** Background: `{color.white}` (#ffffff) / Text: `{color.obsidian}` (#000000) / Border: 1px solid #6b7280 / Radius: `{radius.none}` (0px) / Padding: 8px 12px
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or pricing features
**Pages observed:** Homepage, Pricing
**Spec:** Background: #fafaf9 / Border: 1px solid `{color.border-light}` (#e7e5e4) / Radius: `{radius.md}` (12px) / Shadow: `{shadow.soft}`
**States observed:** Default: captured

#### Pill Badge
**Role:** Status indicators or category tags
**Pages observed:** Homepage, Pricing
**Spec:** Background: transparent / Border: 1px solid `{color.obsidian}` (#000000) / Radius: `{radius.pill}` (9999px) / Text: `{color.obsidian}` (#000000)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Highlighting specific plan details
**Pages observed:** Pricing
**Spec:** Background: `{color.white}` (#ffffff) / Border: 1px solid `{color.obsidian}` (#000000) / Radius: `{radius.md}` (12px) / Padding: 24px
**States observed:** Default: captured

#### Accordion (FAQ)
**Role:** Progressive disclosure for technical details
**Pages observed:** Homepage, Pricing
**Spec:** Background: #f5f5f5 / Border: 1px solid `{color.border-light}` (#e7e5e4) / Radius: `{radius.none}` / Typography: Aeonik 16px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1280px |
| Section Padding | 64px - 108px |
| Column Gap | 24px |

## Imagery & decoration
Phantombuster uses clean, technical product screenshots with simplified UI elements. Visual interest is generated through soft background gradients (blue-to-yellow) behind hero sections and sharp, monochromatic iconography. It avoids heavy photography, preferring "UI-as-illustration."

## Do's
- Use Aeonik weight 400 for all display headers above 40px.
- Use #000000 for primary actions to ensure 21:1 contrast.
- Apply `{radius.pill}` (9999px) to all interactive buttons.
- Use `{color.success}` (#46842c) exclusively for functional confirmation or "active" plan states.
- Maintain a 1.5x line-height ratio for body copy to ensure legibility.

## Don'ts
- **Wrong:** Using a saturated blue as a primary button background.
- **Right:** Use Obsidian (#000000) for primary buttons.
- **Reason:** The parent brand is strictly monochrome; saturated colors are reserved for sub-brand signals or functional feedback.
- Do not use bold weights (700+) for display headers; stick to 400 or 500.
- Do not mix border radii; use 12px for cards and 9999px for buttons exclusively.
- Do not use pure gray (#808080); use the warm Stone (#79716b) or Cinder (#1c1917) foundation tokens.

## Similar brands
- Linear
- Vercel
- Scale AI

## Quick start

```css
:root {
  --pb-obsidian: #000000;
  --pb-white: #ffffff;
  --pb-sand: #f5f5f5;
  --pb-success: #46842c;
  --pb-border: #e7e5e4;
  --pb-font-main: 'Aeonik', sans-serif;
}
```

## Agent prompt examples
- "Generate a pricing card using Phantombuster's obsidian theme: #000000 background, white Aeonik text at 24px, and a 12px border radius."
- "Create a lead capture form with a 0px radius text input and a 9999px radius obsidian button."
- "Design a feature section with a #f5f5f5 background and 56px Aeonik headers at weight 400."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the pricing table.
- Mobile-specific navigation transitions were not sampled in this viewport set.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://phantombuster.com | 1440px | 2026-06-06 |
| Pricing | https://phantombuster.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://phantombuster.com | 390px | 2026-06-06 |