# Amplemarket Design System

> A stark, high-contrast monochrome foundation punctuated by vibrant pastel data-viz accents and tightly tracked variable typography.

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

## TL;DR
Amplemarket employs a high-contrast monochrome base (`#ffffff` and `#111111`) that serves as a stark canvas for a wide array of vibrant, pillar-specific pastel accents (like `#fbc768` for engagement and `#e16540` for lead generation). The typographic system relies entirely on Labil Grotesk Variable, utilizing extreme negative tracking (-2.52px) at massive display sizes (84px / weight 900) to create dense, impactful headlines. UI elements favor subtle inset borders (`rgba(17, 17, 17, 0.05)`) over heavy drop shadows, maintaining a flat, crisp aesthetic with soft 8px to 12px border radii on interactive surfaces.

## Signature DNA
1. **Monochrome Canvas with Pastel Pillars**: The UI relies heavily on `#111111` and `#ffffff` for structure, using specific pastel hexes (`#fbc768`, `#e16540`, `#328efa`) exclusively to color-code product pillars and metric cards.
2. **Dense Variable Grotesk**: Labil Grotesk Variable is the sole typeface, characterized by aggressive negative letter-spacing (-2.52px at 84px, -1.76px at 44px) that gives headings a tightly knit, authoritative presence.
3. **Inset Hairline Definition**: Instead of relying on elevation shadows, cards and containers are defined by a delicate 1px inset shadow (`rgba(17, 17, 17, 0.05) 0px 0px 0px 1px inset`), keeping the interface grounded on a single plane.

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--am--border-white` | `#ffffff` | surface_bg, border, text | 1604 | 1.0 | `css_variable` |
| `--am--primary-dark` | `#111111` | text, surface_bg, border | 1485 | 1.0 | `css_variable` |
| `--am--secondary-dark` | `#272625` | border, surface_bg, text | 382 | 1.0 | `css_variable` |
| `--am--neutral--neutral-08` | `#ecebea` | button_bg, surface_bg | 115 | 1.0 | `css_variable` |
| `--am--primary-light` | `#f6f5f3` | text, surface_bg | 24 | 1.0 | `css_variable` |
| `--am--neutral--neutral-03` | `#494846` | button_bg | 2 | 1.0 | `css_variable` |
| `foundation-efeee6` | `#efeee6` | surface_bg | 4 | 0.6 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--am--pillars-engagement` | `#fbc768` | surface_bg | 11 | 1.0 | `css_variable` |
| `--am--pillars-leadgen` | `#e16540` | surface_bg | 9 | 1.0 | `css_variable` |
| `--am--pillars-intelligence` | `#328efa` | surface_bg | 9 | 1.0 | `css_variable` |
| `--am--complementary-pink` | `#ffd7f0` | surface_bg | 6 | 1.0 | `css_variable` |
| `--am--complementary--mint-green` | `#b7efb2` | surface_bg | 6 | 1.0 | `css_variable` |
| `--am--complementary--canary-yellow` | `#ffef99` | surface_bg | 6 | 1.0 | `css_variable` |
| `--am--complementary-violet` | `#e2ddfd` | surface_bg | 4 | 1.0 | `css_variable` |
| `--am--gradients--violet` | `#d0b2ff` | surface_bg | 4 | 1.0 | `css_variable` |
| `--am--complementary--phoenix-orange` | `#e8400d` | surface_bg | 3 | 1.0 | `css_variable` |
| `--am--gradients--cyan` | `#99fff9` | surface_bg | 3 | 1.0 | `css_variable` |
| `--am--pillars-deliver` | `#47d096` | surface_bg | 2 | 1.0 | `css_variable` (decorative_only) |
| `--am--complementary--midnight-indigo` | `#10054d` | button_bg, button_text | 2 | 1.0 | `css_variable` (decorative_only) |
| `--am--extra--secondary-midnight-indigo` | `#2e2460` | surface_bg | 1 | 1.0 | `css_variable` (decorative_only) |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Labil Grotesk Variable | 400, 500, 700, 900 | display, heading, body | Inter / Space Grotesk | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 84px | 67.2px | -2.52px | 900 | Hero headlines | `h2.am-heading-84-caps` |
| `display-lg` | 56px | 56px | -2.8px | 400 | Section headers | `h1.am-heading-56` |
| `display-md` | 44px | 48.4px | -1.76px | 400 | Sub-hero headers | `h2.am-heading-44` |
| `heading-lg` | 36px | 39.6px | -1.08px | 400 | Feature titles | `h4.am-heading-36` |
| `heading-md` | 28px | 30.8px | -0.48px | 400 | Card titles | `h2.am-heading-28` |
| `heading-sm` | 20px | 26px | -0.4px | 400 | Small titles | `p.am-paragraph-20` |
| `body-md` | 16px | 22.4px | -0.16px | 400 | Primary body | `div.am-paragraph-16` |
| `body-sm` | 14px | 18.2px | normal | 400 | Secondary body | `div.am-paragraph-14` |
| `caption` | 12px | 15.6px | normal | 400 | Tooltips, links | `p.am-tooltip-text` |
| `caption-sm` | 10px | 10px | 0.3px | 500 | Badges, labels | `div.am-new-label` |

### Principles
- **Extreme negative tracking on display:** Headlines pull in tightly (-2.52px to -2.8px) to create dense, graphic text blocks.
- **Single variable family:** Labil Grotesk Variable handles everything from 84px weight-900 display to 10px weight-500 captions.
- **Tight line heights:** Display sizes run at 0.8x to 1.0x line-height to maintain block solidity.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `spacing-1` | 4px | 6 |
| `spacing-2` | 8px | 247 |
| `spacing-3` | 12px | 33 |
| `spacing-4` | 16px | 68 |
| `spacing-5` | 20px | 389 |
| `spacing-6` | 24px | 6 |
| `spacing-10` | 40px | 8 |
| `spacing-14` | 56px | 26 |
| `spacing-25` | 100px | 9 |
| `spacing-36` | 144px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-none` | 0px | Surfaces, sharp edges | 1608 occurrences |
| `radius-sm` | 4px | Small inputs, badges | 79 occurrences |
| `radius-md` | 8px | Buttons, controls | 410 occurrences |
| `radius-lg` | 12px | Standard cards | 420 occurrences |
| `radius-xl` | 16px | Large feature cards | 14 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `inset-hairline` | `rgba(17, 17, 17, 0.05) 0px 0px 0px 1px inset` | Default card boundary | 192 occurrences |
| `shadow-sm` | `rgba(17, 17, 17, 0.04) 0px 1px 2px 0px...` | Hovered cards | 3 occurrences |
| `shadow-lg` | `rgba(17, 17, 17, 0.12) 0px 26px 60px -6px...` | Floating panels | 4 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button (Ghost)
**Role:** Secondary actions and filters.
**Pages observed:** `https://amplemarket.com`, `https://amplemarket.com/about`
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `rgb(17, 17, 17)` / Border `rgba(17, 17, 17, 0.3)` / Radius `8px` / Padding `12px 16px` / Typography `14px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Rounded Button (Light)
**Role:** Primary actions on dark or image backgrounds.
**Pages observed:** `https://amplemarket.com`, `https://amplemarket.com/pricing`
**Spec:** Background `rgba(255, 255, 255, 0.6)` / Text `rgb(17, 17, 17)` / Border `rgb(255, 255, 255)` / Radius `8px` / Padding `12px 16px` / Typography `14px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Card (Light)
**Role:** Standard content container for features and pricing.
**Pages observed:** `https://amplemarket.com`, `https://amplemarket.com/pricing`
**Spec:** Background `rgb(246, 245, 243)` / Text `rgb(17, 17, 17)` / Border `rgba(17, 17, 17, 0.05)` / Radius `12px` / Padding `16px 20px 20px` / Typography `16px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Card (Dark)
**Role:** High-contrast container for testimonials or premium features.
**Pages observed:** `https://amplemarket.com`, `https://amplemarket.com/pricing`, `https://amplemarket.com/about`
**Spec:** Background `rgb(39, 38, 37)` / Text `rgb(17, 17, 17)` / Border `rgba(255, 255, 255, 0.05)` / Radius `12px` / Padding `20px` / Typography `16px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific

#### Card (Accent Yellow)
**Role:** Metric highlight or specific pillar card.
**Pages observed:** `https://amplemarket.com`, `https://amplemarket.com/pricing`
**Spec:** Background `rgb(255, 239, 153)` / Text `rgba(17, 17, 17, 0.6)` / Border `rgba(17, 17, 17, 0.05)` / Radius `12px` / Padding `16px 20px 20px` / Typography `16px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Surface (Dark)
**Role:** Footer or dark mode section backgrounds.
**Pages observed:** `https://amplemarket.com/pricing`, `https://amplemarket.com/about`
**Spec:** Background `rgb(17, 17, 17)` / Text `rgb(17, 17, 17)` / Border `rgb(17, 17, 17)` / Radius `0px` / Padding `0px 56px 144px` / Typography `16px` / Shadow `none`
**States observed:** Default | Disabled: not captured

## Layout
| Property | Value |
|----------|-------|
| Max width | 1440px |
| Section padding | 100px - 144px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked grids, reduced display typography sizes. |

## Imagery & decoration
Amplemarket uses soft, atmospheric pastel gradients and blobs to break up the stark monochrome UI. These are purely decorative and sit behind content. The brand avoids heavy 3D illustrations, preferring flat, crisp UI mockups and data visualizations that match the color pillars.

## Do's
- Do use `rgba(17, 17, 17, 0.05)` inset borders to define cards on light backgrounds.
- Do apply tight negative tracking to display typography (e.g., -2.52px).
- Do use the specific pastel accent tokens (`--am--pillars-*`) to color-code distinct product areas.
- Do maintain high contrast for primary text (`#111111` on `#ffffff`).
- Do use Labil Grotesk Variable exclusively.

## Don'ts
- **Wrong:** Using a heavy drop shadow (`rgba(0,0,0,0.2) 0 10px 20px`) on a card.
  **Right:** Using `rgba(17, 17, 17, 0.05) 0px 0px 0px 1px inset`.
  **Reason:** The brand relies on flat, hairline definitions rather than elevation depth.
- **Wrong:** Tracking out headlines (+1px).
  **Right:** Tracking in headlines (-1.5px to -2.8px).
  **Reason:** The typographic signature requires dense, tightly packed letterforms.
- **Wrong:** Using `#47d096` as a primary button background.
  **Right:** Using `#111111` or `#ffffff` for primary buttons.
  **Reason:** Pastel and vibrant accents are reserved for surfaces, decorative elements, and data-viz, not primary interactive actions.

## Similar brands
- **Vercel:** Similar use of stark monochrome with highly specific, constrained accent colors and inset borders.
- **Linear:** Shared preference for flat, hairline-bordered cards and tight grotesque typography.
- **Stripe:** Similar use of atmospheric pastel gradients behind crisp UI elements.

## Quick start

```css
:root {
  --am--border-white: #ffffff;
  --am--primary-dark: #111111;
  --am--secondary-dark: #272625;
  --am--primary-light: #f6f5f3;
  
  --am--pillars-engagement: #fbc768;
  --am--pillars-leadgen: #e16540;
  --am--pillars-intelligence: #328efa;
  
  --font-labil: 'Labil Grotesk Variable', sans-serif;
  
  --shadow-inset: rgba(17, 17, 17, 0.05) 0px 0px 0px 1px inset;
}
```

## Agent prompt examples
1. "Create a pricing card using the `--am--primary-light` background (`#f6f5f3`). Add a 1px inset border using `rgba(17, 17, 17, 0.05)` and set the border radius to 12px. The title should use Labil Grotesk at 28px with -0.48px tracking."
2. "Build a metric highlight card using the `--am--pillars-engagement` color (`#fbc768`) as the background. The text inside should be `rgba(17, 17, 17, 0.6)`."
3. "Generate a hero headline using Labil Grotesk Variable at 84px, weight 900, with -2.52px letter spacing and a line height of 67.2px."

## Known gaps
- Hover and focus states for interactive components were not fully captured in the computed style evidence.
- The exact breakpoint values between 1440px and 390px are inferred rather than explicitly defined in the tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | `https://amplemarket.com` | 1440x900 | 2026-06-06T05:01:14.255Z |
| Pricing | `https://amplemarket.com/pricing` | 1440x900 | 2026-06-06T05:01:14.255Z |
| About | `https://amplemarket.com/about` | 1440x900 | 2026-06-06T05:01:14.255Z |