# Poppulo Design System

> High-contrast geometric sans typography anchored by a vibrant electric violet primary and soft lavender surfaces.

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

## TL;DR
Poppulo utilizes a "monochrome-plus-one" strategy where a high-energy electric violet (`#5a16ff`) acts as the sole driver of brand voltage against a stark white and neutral grey foundation. The system relies heavily on the **Urbanist** typeface, using its geometric clarity across a wide scale from 14px body text to 64px display headers. Layouts are defined by large-radius containers (20px to 32px) and pill-shaped CTAs, often paired with subtle depth via soft, wide-spread shadows. Chromatic variety is strictly limited to functional accents like lavender backgrounds (`#f1ecff`) and rare decorative gradients.

## Signature DNA
1. **Electric Violet Dominance:** The use of `#5a16ff` for primary actions, borders, and text highlights creates a singular, high-contrast focal point across all pages.
2. **Geometric Typography Scale:** Urbanist is used exclusively for all hierarchy levels, characterized by tight tracking on large display sizes and generous 0.8px–1.1px tracking on body and sub-headers.
3. **Softened Geometry:** Every interactive surface or container uses significant rounding, ranging from 20px cards to 9999px pill buttons, avoiding sharp corners in the primary UI.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-black` | `#000000` | Primary text, heavy surfaces | 566 | 1 | Computed Style |
| `--color-white` | `#ffffff` | Page background, primary surface | 134 | 1 | Computed Style |
| `--color-neutral-50` | `#f3f3f3` | Secondary section backgrounds | 2 | 1 | Computed Style |
| `--color-neutral-900` | `#131313` | Dark mode surfaces (Pricing) | 1 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-primary-500` | `#5a16ff` | Primary CTA, active borders, brand text | 21 | 1 | Computed Style |
| `--color-lavender-200` | `#f1ecff` | Tinted section backgrounds | 4 | 1 | Computed Style |
| `--color-secondary-500` | `#f046ff` | Decorative gradient stop (decorative_only) | 2 | 1 | Computed Style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--color-success-bg` | `#007211` | Success states |
| `--color-error-bg` | `#ab0011` | Error states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Urbanist | 400, 500, 600, 700, 800 | All UI, Headings, Body | Urbanist (Google Fonts) | SIL Open Font |
| Arial | 600 | Fallback body | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 64px | 76.8px | normal | 600 | Hero Display | `h2.text-[clamp(2rem,5vw,4rem)]` |
| `display-xl` | 56px | 61.6px | 2.8px | 600 | Section Intro | `p.text-3xl.leading-[1.1]` |
| `display-lg` | 48px | 58px | normal | 700 | Section Headers | `h2.text-xl.font-bold` |
| `display-md` | 40px | 48px | normal | 700 | Sub-section Headers | `h3.text-xl.font-bold` |
| `heading-sm` | 24px | 30px | normal | 600 | Card Titles | `h3.mb-2.text-xl` |
| `body-lg` | 18px | 24px | 0.9px | 400 | Large Body/Intro | `span.lg:text-md.text-sm` |
| `body-md` | 16px | 24px | 0.8px | 400 | Default Body | `p.mt-6.text-center` |
| `body-sm` | 14px | 20px | 0.35px | 400 | Footer/Small Print | `li.mb-2.text-sm` |

### Principles
1. **Geometric Consistency:** Urbanist is the sole brand voice; no serif or secondary sans is permitted.
2. **Wide Tracking for Legibility:** Body copy and sub-headers (14px-22px) use positive letter-spacing (0.35px to 1.1px) to maintain airiness.
3. **Bold Emphasis:** Weight 700 is reserved for display headers and primary navigation labels to ensure high visual weight.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `--spacing-12` | 12px | 207 |
| `--spacing-16` | 16px | 48 |
| `--spacing-40` | 40px | 18 |
| `--spacing-96` | 96px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-pill` | 9999px | Buttons, Badges | `pill` role |
| `radius-lg` | 32px | Primary Content Panels | `panel` role |
| `radius-md` | 24px | Secondary Panels | `panel` role |
| `radius-sm` | 20px | Pricing Cards | `card` role |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `shadow-card` | `0 4px 18px 0 rgba(0, 0, 0, 0.09)` | Standard Navigation & Cards | Navigation Component |
| `shadow-deep` | `0 16px 40px 0 rgba(16, 16, 16, 0.08)` | Featured Pricing Tiers | Pricing Page |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** poppulo.com, poppulo.com/about
**Spec:** Background `#ffffff` / Text `#000000` / Radius `0px` / Shadow `0 4px 18px 0 rgba(0, 0, 0, 0.09)`
**States observed:** Default | Active: Captured

#### Primary Button
**Role:** Main call to action
**Pages observed:** poppulo.com, poppulo.com/pricing
**Spec:** Background `#5a16ff` / Text `#ffffff` / Radius `9999px` / Padding `10px 24px`
**States observed:** Default | Hover: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping for services/benefits
**Pages observed:** poppulo.com/pricing
**Spec:** Background `#ffffff` / Text `#000000` / Radius `20px` / Shadow `0 4px 18px 0 rgba(0, 0, 0, 0.09)`
**States observed:** Default: Captured

#### Surface Badge
**Role:** Inline labeling and tags
**Pages observed:** poppulo.com, poppulo.com/about
**Spec:** Background `transparent` / Text `#5a16ff` / Border `2px solid #5a16ff` / Radius `32px` / Padding `6px 20px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site directory
**Pages observed:** poppulo.com, poppulo.com/about
**Spec:** Background `#fbfbfb` / Text `#000000` / Padding `40px 0px` / Typography `Urbanist 14px`
**States observed:** Default: Captured

#### Dark Pricing Card
**Role:** Emphasis for enterprise/featured plans
**Pages observed:** poppulo.com/pricing
**Spec:** Background `#242424` / Text `#ffffff` / Radius `28px` / Shadow `0 16px 40px 0 rgba(16, 16, 16, 0.08)`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px |
| Section Gap | 96px |
| Card Grid Gap | 24px |

## Do's
- Use **Urbanist** for all text elements without exception.
- Apply `#5a16ff` for all primary interactive elements.
- Ensure all cards and panels have a minimum border radius of **20px**.
- Use positive letter-spacing (min 0.35px) for body text at 14px-16px.
- Use `#fbfbfb` for large-scale footer backgrounds to distinguish from the main canvas.

## Don'ts
- **Wrong:** Using a generic blue for CTAs. **Right:** Use `#5a16ff`. **Reason:** The brand relies on a specific high-voltage violet for identity.
- **Wrong:** Sharp 0px corners on content containers. **Right:** Use `radius-sm` (20px) or higher.
- **Wrong:** Pairing Urbanist with a secondary serif font. **Right:** Keep the system strictly geometric sans.
- Do not use `#f046ff` (Secondary 500) for text or primary buttons; it is for decorative gradients only.

## Similar brands
- Linear (High contrast, geometric sans)
- Loom (Rounded UI, purple accents)
- Vercel (Monochrome foundation, high-contrast typography)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #5a16ff;
  --color-lavender: #f1ecff;
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --font-main: 'Urbanist', sans-serif;
  --radius-card: 20px;
  --radius-pill: 9999px;
  --shadow-subtle: 0 4px 18px 0 rgba(0, 0, 0, 0.09);
}
```

## Agent prompt examples
- "Create a pricing card using a white background, 20px border radius, and a 0 4px 18px 0 rgba(0, 0, 0, 0.09) shadow. Use Urbanist 700 for the title and a pill-shaped button with #5a16ff background."
- "Design a section header using Urbanist 600 at 48px with normal letter spacing, followed by body text at 16px with 0.8px letter spacing."
- "Generate a badge component with a transparent background, 2px solid #5a16ff border, and 32px border radius."

## Known gaps
- Hover and Active states for tertiary buttons were not captured in the source.
- Mobile-specific breakpoint transitions for the 64px display type were not fully evidenced.
- Specific token names for the light orange background (`#fff9f2`) role were not identified beyond "foundation".

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