# Peec Design System

> A stark, high-contrast monochrome canvas punctuated by precise typographic hierarchy and structural hairlines.

**Source:** https://peec.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Peec operates on a strict monochrome foundation of pure white (`#ffffff`) and deep blacks (`#000000`, `#171717`). The system relies heavily on Geist and Inter for tightly tracked, highly legible typography. Color is reserved almost exclusively for interactive states or data visualization, with a stark blue (`#0000ee`) serving as the primary accent. Depth is achieved through extremely subtle shadows (`rgba(23, 23, 23, 0.04) 0px 4px 4px 0px`) rather than heavy elevation.

## Signature DNA
1. **Monochrome structure** (UI relies on `#f7f7f7` and `#ffffff` surfaces delineated by subtle borders, avoiding chromatic washes; observed across all pages)
2. **Tight Grotesque Typography** (Geist Variable at negative letter-spacing, up to -1.28px on display sizes, creates a dense, technical aesthetic; observed in hero sections)
3. **Micro-elevation** (Cards use a barely-there 4px shadow, `rgba(23, 23, 23, 0.04) 0px 4px 4px 0px`, to separate from the canvas without adding heavy depth; observed on feature grids)

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-base-white` | `#ffffff` | Primary background, text | 235 | 0.8 | computed_style |
| `color-base-black` | `#000000` | Primary text, borders, buttons | 848 | 0.8 | computed_style |
| `color-surface-dark` | `#171717` | Secondary dark surface, text | 334 | 0.8 | computed_style |
| `color-surface-gray` | `#f7f7f7` | Subtle alternating section background | 64 | 0.8 | computed_style |
| `color-text-muted` | `#737373` | Secondary text, borders | 218 | 0.8 | computed_style |
| `color-border-light` | `#e9e9e9` | Dividers, subtle borders | 4 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-accent-primary` | `#0000ee` | Primary brand accent, links, active states | 212 | 0.8 | computed_style |
| `color-accent-green` | `#22c55e` | Data visualization, positive metrics | 30 | 0.8 | computed_style |
| `color-accent-red` | `#da314a` | Data visualization, negative metrics | 3 | 0.6 | computed_style |

### Semantic
- **Success:** `#22c55e` (used in metric trend indicators)
- **Error:** `#da314a` (used in metric trend indicators)

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Geist Variable | 400 | Display | Inter | SIL OFL |
| Geist | 400, 500, 600 | Heading, Body, Caption | Inter | SIL OFL |
| Inter | 400, 500 | Body, Subheading | Inter | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `type-display-lg` | 64px | 64px | -1.28px | 400 | Hero H1 | `h1.framer-text` |
| `type-display-md` | 48px | 52.8px | -0.96px | 500 | Section H2 | `h3.framer-text` |
| `type-display-sm` | 40px | 42px | -0.8px | 500 | Secondary headings | `h2.framer-text` |
| `type-heading-lg` | 32px | 32px | normal | 500 | Feature titles | `p` |
| `type-heading-md` | 24px | 28.8px | -0.48px | 500 | Card titles | `p.framer-text` |
| `type-heading-sm` | 18px | 21.6px | normal | 600 | Small headers | `h3.framer-text` |
| `type-body-lg` | 16px | 22.4px | -0.2px | 400 | Primary body | `p.framer-text` |
| `type-body-md` | 14px | 16px | -0.2px | 500 | Secondary body | `p.framer-text` |
| `type-caption` | 12px | 16px | normal | 500 | Metadata, tags | `p.framer-text` |

### Principles
- **Negative tracking on display:** Headlines pull tight (-1.28px at 64px) to create a dense, technical lockup.
- **High contrast weights:** The system jumps from 400 weight body copy to 500/600 weight headings to establish clear hierarchy without relying on color.
- **Line height matches size:** Display sizes use 1:1 line height (64px/64px, 32px/32px) for tight multi-line stacking.

## Spacing
**Base unit:** Custom (4px grid dominant)

| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 4px | 98 |
| `space-sm` | 8px | 23 |
| `space-md` | 16px | 9 |
| `space-lg` | 24px | 33 |
| `space-xl` | 32px | 13 |
| `space-2xl` | 40px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Full-bleed sections, sharp containers | 1057 occurrences |
| `radius-sm` | 4px | Small inputs, inner elements | 67 occurrences |
| `radius-md` | 6px | Standard buttons, small cards | 120 occurrences |
| `radius-lg` | 12px | Primary feature cards | 84 occurrences |
| `radius-xl` | 16px | Large layout panels | 51 occurrences |
| `radius-full` | 100px | Pill buttons, badges | 122 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-none` | none | Flat surfaces | Computed style |
| `shadow-sm` | `rgba(23, 23, 23, 0.04) 0px 4px 4px 0px` | Default card elevation | 180 occurrences |
| `shadow-md` | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px` | Interactive elements | 40 occurrences |
| `shadow-lg` | `rgba(0, 0, 0, 0.05) 0px 0px 0.833333px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1.66667px 0px, rgba(0, 0, 0, 0.1) 0px 0px 2.5px 0px` | Floating panels | 31 occurrences |

## Components

### Tier 1: Foundational

#### Surface Dark
**Role:** High-contrast container for inverted text.
**Pages observed:** https://peec.ai, https://peec.ai/pricing
**Spec:** Background `#404040` / Text `#000000` / Border `0px` / Radius `0px` / Padding `0px` / Shadow `none`
**States observed:** Default | Disabled: not captured

#### Surface Pill
**Role:** Circular or highly rounded container for avatars or icons.
**Pages observed:** https://peec.ai, https://peec.ai/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#000000` / Border `0px` / Radius `100%` / Padding `0px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Card Base
**Role:** Standard container for feature lists and data points.
**Pages observed:** https://peec.ai, https://peec.ai/pricing
**Spec:** Background `rgba(0, 0, 0, 0)` / Text `#000000` / Border `0px` / Radius `12px` / Padding `1px` / Shadow `rgba(23, 23, 23, 0.04) 0px 4px 4px 0px`
**States observed:** Default | Disabled: not captured

#### Card Elevated
**Role:** Prominent container for pricing tiers or primary features.
**Pages observed:** https://peec.ai, https://peec.ai/pricing
**Spec:** Background `#ffffff` / Text `#000000` / Border `0px` / Radius `11px` / Padding `32px 30px 30px` / Shadow `none`
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific

#### Card Accent
**Role:** Interactive or highlighted card variant.
**Pages observed:** https://peec.ai, https://peec.ai/pricing
**Spec:** Background `#ffffff` / Text `#0000ee` / Border `0px` / Radius `6px` / Padding `14px 20px` / Shadow `rgba(23, 23, 23, 0.04) 0px 4px 4px 0px`
**States observed:** Default | Disabled: not captured

#### Card Gray
**Role:** De-emphasized container for secondary content.
**Pages observed:** https://peec.ai, https://peec.ai/pricing
**Spec:** Background `#f7f7f7` / Text `#000000` / Border `0px` / Radius `11px` / Padding `0px` / Shadow `none`
**States observed:** Default | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1440px (inferred from standard desktop) |
| Grid | 12-column |
| Section spacing | 96px to 120px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Multi-column grids collapse to 1-up. Display text scales down. |
| Desktop | 1024px+ | Full 3-up feature grids and side-by-side layout sections activate. |

## Imagery & decoration
The brand relies entirely on UI abstractions and data visualization (charts, graphs, metric indicators) rather than lifestyle photography or illustration. Decoration is limited to structural hairlines and subtle shadows.

## Do's
- Use `#0000ee` strictly for interactive elements, links, and primary accents.
- Maintain a 1:1 line height for all display typography (64px size / 64px line height).
- Apply `rgba(23, 23, 23, 0.04) 0px 4px 4px 0px` for standard card elevation.
- Use `#f7f7f7` to separate background sections without introducing new hues.
- Keep border radii consistent at `12px` for standard cards and `6px` for inner elements.

## Don'ts
- **Wrong:** Using `#22c55e` as a primary button background.
  **Right:** Using `#000000` or `#0000ee` for primary buttons.
  **Reason:** Green is a semantic color reserved for positive data trends, not a parent brand primary.
- **Wrong:** Adding heavy drop shadows (e.g., 20px blur with 15% opacity) to cards.
  **Right:** Using the subtle `rgba(23, 23, 23, 0.04) 0px 4px 4px 0px` shadow.
  **Reason:** The brand relies on a flat, paper-like aesthetic; heavy shadows break the monochrome severity.
- **Wrong:** Setting display headlines with positive letter spacing.
  **Right:** Tracking headlines tightly (e.g., -1.28px at 64px).
  **Reason:** Loose tracking destroys the dense, technical signature of the typography.

## Similar brands
- Vercel
- Linear
- Stripe

## Quick start

```css
:root {
  --color-base-white: #ffffff;
  --color-base-black: #000000;
  --color-surface-dark: #171717;
  --color-surface-gray: #f7f7f7;
  --color-text-muted: #737373;
  --color-accent-primary: #0000ee;
  --color-accent-green: #22c55e;
  --color-accent-red: #da314a;

  --font-display: 'Geist Variable', sans-serif;
  --font-body: 'Inter', sans-serif;

  --shadow-sm: rgba(23, 23, 23, 0.04) 0px 4px 4px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.05) 0px 0px 0.833333px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1.66667px 0px, rgba(0, 0, 0, 0.1) 0px 0px 2.5px 0px;

  --radius-md: 6px;
  --radius-lg: 12px;
}
```

## Agent prompt examples
- "Create a feature card using a `#ffffff` background, a `12px` border radius, and the standard `rgba(23, 23, 23, 0.04) 0px 4px 4px 0px` shadow. The title should be Geist 24px with -0.48px letter spacing."
- "Build a pricing tier container with a `#f7f7f7` background, `11px` border radius, and no shadow. Include a primary CTA button with a `#000000` background and `#ffffff` text."
- "Generate a metric indicator component. Use `#22c55e` for the upward trend text and `#da314a` for the downward trend text, set in Inter 14px."

## Known gaps
Hover, focus, and active states for interactive components were not explicitly captured in the computed style evidence. Mobile-specific spacing token overrides are inferred rather than explicitly mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://peec.ai | Desktop 1440px, Mobile 390px | 2026-06-06T05:00:42.941Z |
| Pricing | https://peec.ai/pricing | Desktop 1440px | 2026-06-06T05:00:42.941Z |