clerk.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: clerk.com
description: "Light product system built on #f7f7f8 with #6c47ff as the primary CTA accent. Type anchored in geistNumbers at 64px / weight 700. Extracted automatically from https://clerk.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  clerk.com is built on a soft, near-white canvas (rgb(247, 247, 248)).
  The system uses rgb(108, 71, 255) as the high-saturation accent for primary actions.
  GeistNumbers as the primary typeface.
  GeistNumbers is paired with suisse for secondary roles.
  A layered elevation system (56 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 5 keyframe animations plus transition-driven interactions.

colors:
  background: "#f7f7f8"
  surface-1: "#ffffff"
  surface-2: "rgba(248, 248, 248, 0.9)"
  ink-muted: "#212126"
  ink-subtle: "#9394a1"
  primary: "#6c47ff"
  on-primary: "#111111"
  primary-hover: "#ffc107"
  hairline: "#d9d9de"
  primary-focus: "#131316"

typography:
  display-xl:
    fontFamily: "geistNumbers, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.13
    letterSpacing: -1.6px
  display-md:
    fontFamily: "geistNumbers, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body:
    fontFamily: "geistNumbers, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.85
    letterSpacing: 0
  button:
    fontFamily: "geistNumbers, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.85
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 38px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 8px
  sm: 12px
  md: 32px
  lg: 64px
  xl: 112px
  xxl: 150px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 0px 8px 0px 0px
  button-secondary:
    backgroundColor: "#42434d"
    textColor: "{colors.surface-1}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 0px 12px
  button-ghost-2:
    backgroundColor: "transparent"
    textColor: "{colors.primary-focus}"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 0px 8px
  status-badge-neutral-dark:
    backgroundColor: "{colors.primary-focus}"
    textColor: "#000000"
    typography: "{typography.display-md}"
    rounded: "{rounded.none}"
    padding: 32px 0px

extracted_at: "2026-06-11T06:08:13.171Z"
completeness: 70
scoreVersion: "v2"

---

# Design System — clerk.com
> Extracted automatically by Prism from https://clerk.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: sparse  |  **Motion**: animated  |  **Weight**: heavy  |  **Aesthetic**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#f7f7f8` |
| Type posture | sans-led (geistNumbers) | "More than authentication, Comp" |
| Color assertion | dual-accent | #6c47ff |
| Whitespace | sparse | section rhythm 128px |
| Interaction | animated | 5 keyframes, 12 transitions |
| Radius language | 6px-rounded | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 6px-rounded · animated-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(247, 247, 248)` is the page background. Every component composits against this.
> - **Accent**: `rgb(108, 71, 255)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 128px between major bands. Card padding: 64px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

clerk.com sits on a off-white canvas (`#f7f7f8`), a neutral foundation calibrated for sustained reading and component contrast. 

Typography is anchored in **geistNumbers**. The weight scale rejects the standard 100/200/.../900 ladder in favor of custom values (max **800** in this system) — a deliberate signal that this design system is precisely tuned, not assembled from defaults. Negative letter-spacing at display sizes (-1.6px at 64px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Black (`#000000`) (contrast ratio 20.4:1, well above WCAG AA). **Violet** (`#6c47ff`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks (56 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Off-White (`#f7f7f8`)
- Primary typeface: geistSans
- Accent: Violet (`#6c47ff`)
- Display: 64px weight 700, letter-spacing -1.6px
- Shadow system: 56 distinct elevation levels
- Custom fonts loaded: geistSans, geistMono, geistNumbers, suisse, suisse Fallback, soehneMono, Inter, Inter Fallback

## 2. Color Palette & Roles

### Background & Surface
- **Off-White** (`#f7f7f8`): Page background (primary)
- **Whitesmoke** (`#d9d9de`): Surface / elevated background
- **White** (`#ffffff`): Surface / elevated background
- **Translucent Off-Cream (90%)** (`rgba(248, 248, 248, 0.9)`): Surface / elevated background
- **Off-White** (`#eeeef0`): Surface / elevated background

### Text & Content
- **Black** (`#000000`): Primary body text
- **Near-Black** (`#131316`): Secondary text
- **Near-Black** (`#212126`): Secondary text
- **Charcoal** (`#2f3037`): Secondary text
- **Near-Black** (`#19191b`): Secondary text

### Accent & Interactive
- **Violet** (`#6c47ff`): Interactive / accent
- **Amber** (`#ffc107`): Interactive / accent
- **Bright Orange** (`#ff3d00`): Interactive / accent
- **#4caf50** (`#4caf50`): Interactive / accent
- **M Tricolor Blue** (`#1976d2`): Interactive / accent
- **Vermillion** (`#ef4444`): Interactive / accent
- **#9785ff** (`#9785ff`): Interactive / accent

### Border & Divider
- **Silver** (`#b7b8c2`): Borders / dividers
- **Whitesmoke** (`#e3e3e7`): Borders / dividers

### Full Extracted Palette
**37 colors rendered on the page** + **72** more declared in design tokens (CSS custom properties — not necessarily painted). (19 categorized above + 90 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#42434d` — Dark Gray
- `#5e5f6e` — Dim Gray
- `#747686` — Slate Gray
- `#9394a1` — Cool Gray
- `#696a78` — Dim Gray
- `#5de3ff` — #5de3ff
- `#313136` — Charcoal
- `#2d2d32` — Charcoal
- `#29292e` — Near-Black
- `#25252a` — Near-Black
- `#37373c` — Charcoal
- `#26262c` — Near-Black
- `#2b2b30` — Charcoal
- `#3ad4fd` — #3ad4fd
- `#18181c` — Near-Black
- `#fafafb` — Off-White
- `#22c543` — #22c543
- `#f3f3f4` — Off-White
- `#d7d4ff` — #d7d4ff *(token)*
- `#00aee3` — Sky Bright *(token)*
- `#ea520c` — Bright Orange *(token)*
- `#7f1d1d` — #7f1d1d *(token)*
- `#9a2f12` — #9a2f12 *(token)*
- `#1d4ed8` — M Tricolor Blue *(token)*
- `#4818bf` — #4818bf *(token)*
- `#7c2912` — Chocolate *(token)*
- `#fff6ed` — Warm Cream *(token)*
- `#93c5fd` — Baby Blue *(token)*
- `#efd420` — Gold *(token)*
- `#0089be` — #0089be *(token)*
- `#60a5fa` — Cornflower Blue *(token)*
- `#fde047` — #fde047 *(token)*
- *…+58 more in `raw-css.json` (`desktop.allColors`).*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--tw-inset-shadow-alpha`: `100%`
- `--tw-inset-ring-shadow`: `0 0 #0000`
- `--tw-inset-shadow`: `0 0 #0000`
- `--tw-shadow-alpha`: `100%`

**Error / Destructive**
- `--color-red-900`: `#7f1d1d`
- `--color-red-300`: `#fca5a5`
- `--color-red-600`: `#dc2626`
- `--color-red-200`: `#fecaca`

**Spacing Token**
- `--text-5_5xl--letter-spacing`: `-.035em`
- `--text-6xl--letter-spacing`: `-.035em`
- `--text-4_5xl--letter-spacing`: `-.035em`
- `--tw-space-x-reverse`: `0`

**Border Radius Token**
- `--radius-4xl`: `2rem`
- `--radius-sm`: `.25rem`
- `--radius-2xl`: `1rem`
- `--radius-md`: `.375rem`

**Warning**
- `--color-yellow-400`: `#efd420`
- `--color-amber-300`: `lab(86.4156% 6.13147 78.3961)`
- `--color-yellow-300`: `#fde047`
- `--color-yellow-950`: `#422006`

**Success**
- `--color-green-500`: `#22c543`
- `--color-green-900`: `#145323`
- `--color-green-600`: `#16a332`
- `--color-green-950`: `#052e0f`

**Font Weight Token**
- `--font-weight-bold`: `700`
- `--text-6xl--font-weight`: `700`
- `--font-weight-book`: `450`
- `--text-4xl--font-weight`: `600`

**Motion Token**
- `--default-transition-duration`: `.15s`
- `--default-transition-timing-function`: `cubic-bezier(.4, 0, .2, 1)`

**Font Family Token**
- `--default-font-family`: `"geistNumbers", "suisse", "suisse Fallback"`

**Other tokens**
- `--color-purple-200`: `#d7d4ff`
- `--color-slate-200`: `lab(91.7353% -.998765 -4.76968)`
- `--color-sky-500`: `#00aee3`
- `--color-pink-500`: `lab(56.9303% 76.8162 -8.07021)`
- `--color-orange-600`: `#ea520c`
- `--color-orange-800`: `#9a2f12`
- `--color-blue-700`: `#1d4ed8`
- `--color-purple-800`: `#4818bf`

## 3. Typography Rules

### Font Families
- **Primary**: `geistNumbers`
- **Secondary**: `geistSans`
- **Font 3**: `geistMono`
- **Font 4**: `suisse`
- **Font 5**: `suisse Fallback`

### Custom Fonts Loaded
- **geistSans** weight normal (normal)
- **geistMono** weight normal (normal)
- **geistNumbers** weight normal (normal)
- **suisse** weight 700 (normal)
- **suisse** weight 600 (normal)
- **suisse** weight 500 (normal)
- **suisse** weight 450 (normal)
- **suisse** weight 400 (normal)
- **suisse Fallback** weight normal (normal)
- **soehneMono** weight 400 (normal)
- **soehneMono** weight 500 (normal)
- **Inter** weight 100 900 (normal)
- **Inter Fallback** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | geistNumbers | 64px | 700 | 1.13 | -1.6px | Main headline (h1) |
| Sub-heading | geistNumbers | 16px | 400 | 1.5 | normal | Third-level heading (h3) |
| Button | geistNumbers | 13px | 500 | 1.85 | normal | Button label (13px) |

### Font Weight Scale

CSS custom properties define 11 explicit weight steps:
- `--font-weight-normal`: `400` — Regular
- `--font-weight-book`: `450` — Regular (custom, ~400)
- `--font-weight-medium`: `500` — Medium
- `--text-4xl--font-weight`: `600` — SemiBold
- `--text-5xl--font-weight`: `600` — SemiBold
- `--font-weight-semibold`: `600` — SemiBold
- `--font-weight-bold`: `700` — Bold
- `--text-6xl--font-weight`: `700` — Bold
- `--text-5_5xl--font-weight`: `700` — Bold
- `--text-4_5xl--font-weight`: `700` — Bold
- `--font-weight-extrabold`: `800` — ExtraBold

### Full Font Size Scale

Sizes detected in the design (descending): `64px`, `32px`, `24px`, `18px`, `17px`, `16px`, `15px`, `14px`, `13px`, `12px`, `11px`, `10px`, `9px`

> 10 size(s) detected outside the sampled hierarchy (32px, 24px, 18px, 17px, 15px, 14px, 12px, 11px, 10px, 9px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **stylistic sets** (`ss0X`) — alternate letterforms enabled (often for brand-specific glyph variants)

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "ss02";
}
```

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#131316` `{colors.primary-focus}`
- Padding: 0px 8px 0px 0px
- Radius: 0px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: outline: `rgb(19, 19, 22) solid 2px`

**Secondary**
- Background: `#42434d`
- Text: `#ffffff` `{colors.surface-1}`
- Padding: 0px 12px
- Radius: 6px
- Shadow: `rgb(66, 67, 77) 0px 0px 0px 0.5px, oklab(0.999994 0.0000455678 0.0000200868 / 0....`
- Font: 13px weight 500
- Use: Secondary action
- Focus: outline: `rgb(19, 19, 22) solid 2px`

**Ghost**
- Background: `transparent`
- Text: `#131316` `{colors.primary-focus}`
- Padding: 0px 8px
- Radius: 0px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: outline: `rgb(19, 19, 22) solid 2px`

**Outline**
- Background: `transparent`
- Text: `#131316` `{colors.primary-focus}`
- Padding: 0px 10px
- Radius: 6px
- Border: 1px solid rgba(19, 19, 22, 0)
- Font: 13px weight 500
- Use: Secondary action with border
- Focus: outline: `rgb(19, 19, 22) solid 2px`

**Dark / Solid**
- Background: `#131316` `{colors.primary-focus}`
- Text: `#ffffff` `{colors.surface-1}`
- Padding: 8px 0px
- Radius: 0px
- Font: 13px weight 500
- Use: Solid dark CTA
- Focus: outline: `rgb(19, 19, 22) solid 2px`

**Primary Brand**
- Background: `#6c47ff` `{colors.primary}`
- Text: `#ffffff` `{colors.surface-1}`
- Padding: 0px 12px
- Radius: 6px
- Shadow: `rgb(108, 71, 255) 0px 0px 0px 0.5px, oklab(0.999994 0.0000455678 0.0000200868 / ...`
- Font: 13px weight 500
- Use: Primary CTA / brand action
- Focus: outline: `rgb(19, 19, 22) solid 2px`

**Light / Invert**
- Background: `#ffffff` `{colors.surface-1}`
- Text: `#131316` `{colors.primary-focus}`
- Padding: 0px 12px
- Radius: 6px
- Shadow: `oklab(0 0 0 / 0.08) 0px 2px 3px -1px, oklab(0.188081 0.0016512 -0.00579907 / 0.1...`
- Font: 13px weight 500
- Use: Bright CTA on dark sections
- Focus: outline: `rgb(19, 19, 22) solid 2px`

### Status Badges

**Neutral Dark**
- Background: `#131316` `{colors.primary-focus}`
- Text: `#000000`
- Padding: 32px 0px
- Radius: 0px
- Font: 16px weight 400
- Use: Status indicator, label, pill


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(19, 19, 22)"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgb(66, 67, 77)"
      fg: "rgb(255, 255, 255)"
      shadow: "rgb(66, 67, 77) 0px 0px 0px 0.5px, oklab(0.999994 0.00004556"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(19, 19, 22)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **6 shape(s)** in this system: `Ghost`, `Secondary`, `Outline`, `Dark / Solid`, `Primary Brand`
- **DO NOT introduce new buttons variants** without justification

### Status Badges
- **1 shape(s)** in this system: `Neutral Dark`
- **DO NOT introduce new status badges variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Generous spacing — editorial breathing room

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 8px |
| sm | 12px |
| md | 32px |
| base | 48px |
| lg | 64px |
| xl | 112px |
| 2xl | 128px |
| 3xl | 150px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 16px | Large rounded elements, pill segments |
| Xl | 38px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `0px` |
| Status Badges | `0px` |
| Page Body | `0px` |
| Navigation | `0px` |

**Shape Personality**: Sharp & Angular — No rounding. Precise, editorial, enterprise feel.

**Full Radius Spectrum**: 0px, 2px, 3px, 4px, 5px, 6px, 7px, 8px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~160px internal vertical padding (up to 288px) — **very airy / premium**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `150px` | Top/bottom of full-bleed hero sections |
| **section** | `112px` | Between major bands (color change, content shift) |
| **subsection** | `64px` | Within a section, between content groups |
| **card** | `32px` | Card padding, list-item spacing |
| **compact** | `12px` | Form fields, tight clusters, badge padding |
| **micro** | `8px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**5/8 structural patterns detected.**

### Hero Pattern

- **Composition:** split-right-text — Split layout, media-left/text-right — image in left column, heading + body in right column. Less common variant.
- **Viewport coverage:** 598px tall (not full-viewport)
- **Heading:** "More than authentication, Complete User Management" — 64px center-aligned
- **Subheading:** "Need more than sign-in? Clerk gives you full stack auth and user management — so you can launch faster, scale easier, and stay focused on building you"
- **Media:** present, positioned left
- **CTAs:** 2 (primary: "Start building for free")
- **Clone instruction:** Reproduce the **split-right-text** layout. Use the heading font-size token at the documented size. Place media left of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 20px
- **Logo:** ✗ absent
- **Nav links:** 1 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 6 cards detected
- **Columns (desktop):** 4-up grid
- **Card dimensions:** 360×520px (aspect 0.69:1)
- **Gap:** 16px between cards
- **Content:** ✗ no image
- **Clone instruction:** Build a 4-column grid (desktop) with cards at ~0.69:1 aspect ratio. Text/icon-only cards (no photography).

### Pricing Table Pattern

- **Tier count:** 2 pricing tiers
- **Layout:** side-by-side (horizontal comparison)
- **Columns (desktop):** 2-up
- **Clone instruction:** Build a 2-column side-by-side pricing comparison.

### Footer Pattern

- **Columns:** 1
- **Links:** 30 total
- **Height:** 397px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~30 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Inset (Level 1) | <br>`rgb(66, 67, 77) 0px 0px 0px 0.5px`,<br>`oklab(0.999994 0.0000455678 0.0000200868 / 0.07) 0px 1px 0px 0px inset`,<br>`oklab(0.249859 0.00254738 -0.00901626 / 0.2) 0px 1px 3px 0px` | Buttons, pressed-state elements |
| Inset (Level 2) | <br>`rgba(255, 255, 255, 0.9) 0px 0px 0px 0.5px inset`,<br>`rgba(19, 19, 22, 0.15) 0px 0px 0px 0.5px`,<br>`rgba(0, 0, 0, 0.04) 0px 2px 3px 0px`,<br>`rgba(34, 42, 53, 0.04) 0px 4px 6px 0px`,<br>`rgba(0, 0, 0, 0.05) 0px 1px 1px 0px` | Buttons, pressed-state elements |
| Inset (Level 3) | <br>`oklab(0 0 0 / 0.08) 0px 2px 3px -1px`,<br>`oklab(0.188081 0.0016512 -0.00579907 / 0.18) 0px 0px 0px 0.5px`,<br>`oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 1px 0px 0px inset` | Buttons, pressed-state elements |
| Inset (Level 4) | <br>`rgb(108, 71, 255) 0px 0px 0px 0.5px`,<br>`oklab(0.999994 0.0000455678 0.0000200868 / 0.07) 0px 1px 0px 0px inset`,<br>`oklab(0.249859 0.00254738 -0.00901626 / 0.2) 0px 1px 3px 0px` | Buttons, pressed-state elements |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--default-transition-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-out` | `cubic-bezier(0, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-in-out` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--default-transition-duration` | `.15s` | Fast |

### Copy-Paste Transition Snippets

**Color / Background**
```css
transition: color 0.3s cubic-bezier(0.4, 0.36, 0, 1), background-color 0.3s cubic-bezier(0.4, 0.36, 0, 1), border-color 0.3s cubi...;
```

**Color / Background**
```css
transition: color 0.45s cubic-bezier(0.33, 1, 0.68, 1), background-color 0.45s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.45s...;
```

**Color / Background**
```css
transition: color 0.45s cubic-bezier(0.33, 1, 0.68, 1), background-color 0.45s cubic-bezier(0.33, 1, 0.68, 1), fill 0.45s cubic-b...;
```

**Color / Background**
```css
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-...;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `fade-in` | Fade | opacity | Element entrance |
| `letter-reveal` | Fade | opacity, filter | UI transition |
| `blink` | Fade | opacity | Attention / status |
| `spin` | Rotate / Spin | transform | Loading indicator |
| `pulse` | Fade | opacity | Attention / status |

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `450ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 5 unique animations (5 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use Off-White (`#f7f7f8`) as the page background — it's intentionally not pure white
- Use geistNumbers as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-1.6px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Violet (`#6c47ff`) as the primary accent — it's the brand's signature interactive color
- Use 6px border-radius on buttons — the standard corner rounding for interactive elements
- Respect the 8px–112px spacing range — the design uses a wide scale for visual breathing room
- Build the hero as a split layout with media on the right — text and visual share equal weight
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Use a 4-column grid on desktop — density matters for this content type
- Place 2 pricing tiers side-by-side on desktop — direct comparison is the value prop

### Don't
- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't put a CTA button in the nav — this design uses links only at the top


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(247, 247, 248)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(247, 247, 248)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(108, 71, 255)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(108, 71, 255)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 640px | Single column layout |
| Tablet | 768px | 2-column grids |
| Desktop | 1024px | Full layout |
| Large Desktop | 1280px | Maximum width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `64px` | `32px` |
| heading | line-height | `72px` | `36px` |
| heading | letter-spacing | `-1.6px` | `-0.8px` |
| nav | display | `block` | `none` |
| nav | height | `19.8906px` | `auto` |
| button | width | `79px` | `auto` |

### Collapsing Strategy
- Headlines: 64px → 32px on mobile
- Navigation: block → none on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px 8px 0px 0px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Card grid: 4-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image.
- **Glassmorphism** — 5 frosted/blur layer(s) (e.g. `blur(1px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Blend modes** — 8 mix-blend layer(s).
- **CSS-variable animations** (1) — animated custom properties.

> **Motion fingerprint**: Canvas 2D, glassmorphism (10 layers), non-rectangular shapes (10), blend modes

## 9b. Visual Tone & Photography

**Tone:** Illustration-driven

The site relies primarily on illustrations, vector art, and decorative SVG elements rather than photography. Use commissioned illustrations, icon sets, or generated graphics for clones — stock photos will feel off-brand.

**Canonical Brand Image (OG):**
- https://clerk.com/opengraph-image.jpg?opengraph-image.0goco-shezoln.jpg?dpl=dpl_3MRdFR4XNndmJB5t1HC9ijABBDGp (1200×630px)
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1:1 (square / portrait)
- Rendered size: 2640×2640px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 2 (6%)
- Portrait (<0.87): 21 (62%)
- Square (0.87–1.15): 11 (32%)

**Media Format Mix:**
- WebP: 5 (optimized photo/illustration hybrid)
- SVG: 21 (icons, illustrations, decorative geometry)

**Average rendered image size:** 497×557px
**Above-fold image count:** 18 / 34

**Decorative Patterns Detected:**
- 11 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 5 radial gradients — circular color blooms used for spotlight/glow effects
- 21 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Use vector illustration as the primary visual language — photos will read as off-brand.
- Maintain consistent illustration style (line weight, color palette) across the site.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Off-White (`#f7f7f8`)
- Primary text: Black (`#000000`)
- Accent: Violet (`#6c47ff`)
- Border: Whitesmoke (`#d9d9de`)
- Font: geistNumbers
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Off-White background (#f7f7f8). Headline at 64px geistNumbers weight 700, line-height 1.13, letter-spacing -1.6px, color #000000."
- "Create the primary CTA button: `#6c47ff` background, `#ffffff` text, 6px border-radius, 0px 12px padding, 500 weight, geistNumbers font."
- "Build navigation: static on `#f7f7f8`. geistNumbers 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Off-White (`#f7f7f8`) — every component is composited against this exact base.
2. **Typography**: All type in geistNumbers, weight range 400–800. Never exceed 800 — heavier weights break the brand's tonal restraint.
3. **Accent**: Violet (`#6c47ff`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Motion**: All transitions use `cubic-bezier(0.4,0.36,0,1)`. Timing: 150ms for micro-interactions, 150ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `6px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (8px–112px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-background: #f7f7f8;
  --ca-surface-1: #ffffff;
  --ca-surface-2: #f8f8f8;
  --ca-ink-muted: #212126;
  --ca-ink-subtle: #9394a1;
  --ca-primary: #6c47ff;
  --ca-on-primary: #111111;
  --ca-primary-hover: #ffc107;
  --ca-hairline: #d9d9de;
  --ca-primary-focus: #131316;
}

/* Typography */
:root {
  --ca-font-primary: "geistNumbers", system-ui, sans-serif;
  --ca-text-display: 64px;
  --ca-text-body: 13px;
  --ca-text-button: 13px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 8px;
  --ca-space-sm: 12px;
  --ca-space-md: 32px;
  --ca-space-base: 48px;
  --ca-space-lg: 64px;
  --ca-space-xl: 112px;
  --ca-space-2xl: 128px;
  --ca-space-3xl: 150px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --ca-radius-xl: 38px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-out: cubic-bezier(0, 0, .2, 1);
  --ca-ease-in-out: cubic-bezier(.4, 0, .2, 1);
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    classes: ["isolate", "flex", "flex-auto", "flex-col"]
    height: 7640px
    width: full-bleed
    layout: flex-column justify=normal
    children: 6
    bg: "rgb(247, 247, 248)"
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: hero
    tag: div
    classes: ["relative", "isolate", "overflow-hidden", "bg-gray-50"]
    height: 598px
    width: full-bleed
    layout: block
    children: 4
    bg: "rgb(247, 247, 248)"
    vertical-padding: ~160px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "192px 0px 128px"
  - section: feature-section
    tag: main
    height: 7025px
    width: full-bleed
    layout: block
    children: 12
    vertical-padding: ~288px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: logo-strip
    tag: div
    classes: ["relative", "bg-white", "shadow-[0_-9px_11px_-10px_rgb(0_0_0/0.05),0_-0.25px_0px_0.25px_rgb(0_0_0/0.05)]"]
    height: 129px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
  - section: content-section
    tag: div
    classes: ["relative", "bg-white"]
    height: 1073px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
    vertical-padding: ~180px (airy)
  - section: content-section
    tag: div
    classes: ["relative", "bg-gray-950", "pt-32", "pb-[calc(--spacing(32)_+_--spacing(11))]"]
    height: 1906px
    width: full-bleed
    layout: block
    children: 4
    bg: "rgb(19, 19, 22)"
    tone: dark
    vertical-padding: ~150px (airy)
    padding: "128px 0px 172px"
  - section: content-section
    tag: div
    classes: ["pt-32", "mx-auto", "w-full", "px-6"]
    height: 893px
    width: 1280px
    layout: block
    children: 2
    vertical-padding: ~64px (generous)
    padding: "128px 32px 0px"
  - section: content-section
    tag: div
    classes: ["overflow-hidden", "pt-32", "pb-[calc(--spacing(32)_+_--spacing(11))]"]
    height: 890px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~150px (airy)
    padding: "128px 0px 172px"
  - section: content-section
    tag: div
    classes: ["relative", "bg-gray-950", "pt-32", "pb-[calc(--spacing(32)_+_--spacing(11))]"]
    height: 904px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(19, 19, 22)"
    tone: dark
    vertical-padding: ~150px (airy)
    padding: "128px 0px 172px"
  - section: content-section
    tag: div
    classes: ["-mb-96", "overflow-hidden", "bg-gray-50", "pt-10"]
    height: 1080px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(247, 247, 248)"
    vertical-padding: ~248px (airy)
    padding: "112px 0px 384px"
  - section: footer
    tag: footer
    classes: ["[:where(&)]:mt-24", "sm:[:where(&)]:mt-32", "light"]
    height: 397px
    width: full-bleed
    layout: block
    children: 1
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Clerk Components"
    - "Account"
    - "Profile details"
    - "User authentication"
    - "Billing"
    - "Frameworks"
  sub-headings:
    - "USER AUTHENTICATION"
    - "B2B AUTHENTICATION"
    - "Multifactor Authentication"
    - "Custom roles and permissions"
  ctas:
    - "Skip to main content"
    - "Products"
    - "Docs"
    - "Sign in"
    - "Clerk raises $50m Series C Learn more"
    - "Start building for free"
    - "Build with agents"
    - "USER AUTHENTICATION"
  navigation:
    - "Start building"
    - "Pricing"
  footer-links:
    - "Authentication"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 15
    avg-ratio: 4.50
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Browserbase"
      - "Inngest"
      - "David AI"
  product:
    count: 5
    avg-ratio: 0.99
    common-aspect: "~1:1 square"
    sample-alts:
      - "Clerk user button component expanded to display account swit"
  editorial:
    count: 6
    avg-ratio: 0.59
    common-aspect: "~9:16 portrait"
  thumbnail:
    count: 4
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Clerk user button component displaying the profile picture o"
      - "User avatar"
      - "User avatar"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Skip to main content
</button>
```
_Source pattern detected: padding `0px 12px` · radius `6px` · weight `500`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 1 · **cta** 1 · **pricing** 1 · **docs** 15 · **blog** 3 · **social** 16 · **legal** 1 · **footer** 17 · **other** 5

**Primary actions (conversion path):**
- Primary call-to-action — "Start building for free" (the conversion path) → `https://dashboard.clerk.com/sign-up`

**Projects / case studies detected** (clustered by URL + featured image):

*Docs* — medium confidence, 11 items:

| Title | Featured image | Link |
|---|---|---|
| Start building | — | https://clerk.com/docs/quickstart |
| Next.js | `nextjs-outline.0ddpn8ja.f-37.svg?dpl` (ar 2.48) | https://clerk.com/docs/nextjs/getting-started/quickstart |
| React | `react-outline.0nnq3u_jr2cth.svg?dpl=` (ar 2.48) | https://clerk.com/docs/react/getting-started/quickstart |
| Expo | `expo-outline.0l-an3.ax-c1h.svg?dpl=d` (ar 2.48) | https://clerk.com/docs/expo/getting-started/quickstart |
| React Router | `react-router-outline.0d9j7kinpk502.s` (ar 2.48) | https://clerk.com/docs/react-router/getting-started/quickstart |
| TanStack React Start | `tanstack-outline.0eptmxg~2x4-c.svg?d` (ar 2.48) | https://clerk.com/docs/tanstack-react-start/getting-started/quickstart |
| Astro | `astro-outline.0gpstp.yeplv~.svg?dpl=` (ar 2.48) | https://clerk.com/docs/astro/getting-started/quickstart |
| All integrations | — | https://clerk.com/docs/guides/development/integrations/overview |

**Signals:** 35/60 links carry a featured image · dominant link roles: footer-link (35), content-card (20), inline-link (4).


---
## Extraction Completeness: 70/100 (C)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 19 named colors |
| Typography | 8 | 20 | 3 roles defined |
| Components | 8 | 20 | 2 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 10 | 10 | 307 vars |
| Responsive Breakpoints | 4 | 5 | 4 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (geistSans, geistMono, geistNumbers)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.
- **4 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 307 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | Medium | 3 typography roles inferred |
| §4 Components | Low | 2 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 18 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 4 breakpoints detected |
| §9b Photography | High | 34 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

15 font file(s) captured (258KB total). When running `prism add`, fonts are saved to `extractions/clerk.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'geistSans';
  /* src: url('/fonts/geistSans.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geistMono';
  /* src: url('/fonts/geistMono.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geistNumbers';
  /* src: url('/fonts/geistNumbers.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 450;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'suisse';
  /* src: url('/fonts/suisse.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'suisse Fallback';
  /* src: url('/fonts/suisse-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'soehneMono';
  /* src: url('/fonts/soehneMono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'soehneMono';
  /* src: url('/fonts/soehneMono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'soehneMono';
  /* src: url('/fonts/soehneMono.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'soehneMono';
  /* src: url('/fonts/soehneMono.woff2') format('woff2'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Fallback';
  /* src: url('/fonts/Inter-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**5 @keyframes found** — these are the real animation definitions:

```
@keyframes fade-in { ... }
@keyframes letter-reveal { ... }
@keyframes blink { ... }
@keyframes spin { ... }
@keyframes pulse { ... }
```

<details><summary>Full keyframes CSS (5 animations)</summary>

```css
@keyframes fade-in{0%{opacity:var(--fade-in-from,0)}
@keyframes letter-reveal{0%{opacity:0;filter:blur(2px)}
@keyframes blink{0%,to{opacity:1}50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.5}}
```
</details>

### Brand Gradient Palette

**20 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: conic-gradient(#0000 0deg 105deg,#3ad4fd 180deg,#6248f675 300deg,#0000 330deg 360deg);

/* Gradient 2 */
background: conic-gradient(from 135deg,#7c3aed 0deg,#6430f700 82.8deg,#3ad4fd00 183.6deg,#38bdf8 262.8deg,#7c3aed 356.4deg);

/* Gradient 3 */
background: linear-gradient(89deg,#fff9bc 44.64%,#fffeee 65.69%,#fffcdf 73.98%,#fff9bc 99.31%);

/* Gradient 4 */
background: linear-gradient(90deg,#0000,#ffffff80 30%,#fff,#ffffff80 70%,#0000);

/* Gradient 5 */
background: linear-gradient(90deg,transparent,color-mix(in oklab, var(--color-white);

```

### Hover State CSS (Intercepted)

**1 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-scroll-snap-strictness:proximity;--tw-scrollbar-thumb:#0000;--tw-scrollbar-track:#0000;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 7245 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×5743 · `13px`×630 · `11px`×278 · `12px`×252 · `10px`×212 · `24px`×34 · `15px`×31 · `17px`×18

**Radius scale** (× = paint count): `6px`×101 · `4px`×72 · `8px`×41 · `12px`×33 · `16px`×17 · `10px`×9 · `3.33333% 1.86916%`×6 · `50%`×6

**Weights** (× = paint count): `400`×6285 · `500`×763 · `600`×103 · `700`×72 · `450`×20

**Layout gaps** (× = paint count): `8px`×61 · `12px`×34 · `4px`×29 · `normal 6px`×24 · `normal 8px`×18 · `16px`×18 · `normal 12px`×16 · `6px`×16

**Elevation (real shadows)**:
```css
oklab(0.188081 0.0016512 -0.00579907 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 5px 15px 0px, rgba(25, 28, 33, 0.2) 0px 15px 35px -5px
rgba(0, 0, 0, 0.24) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 3px 0px, rgba(255, 255, 255, 0.07) 0px 1px 1px 0px inset, rgb(47, 48, 55) 0px 0px 0px 1px
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
oklab(0.999994 0.0000455678 0.0000200868 / 0.05) 0px 0px 0px 1px inset
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { background-color:var(--root-bg) }
h1 { font-size:var(--text-3xl) }
h1 { font-weight:var(--font-weight-bold) }
h1 { color:var(--color-gray-950) }
@media (min-width: 40em) h1 { font-size:var(--text-4_5xl); font-weight:var(--tw-font-weight,var(--text-4_5xl--font-weight)) }
@media (min-width: 48em) h1 { font-size:var(--text-5xl); font-weight:var(--tw-font-weight,var(--text-5xl--font-weight)) }
@media (min-width: 64em) h1 { font-size:var(--text-6xl); font-weight:var(--tw-font-weight,var(--text-6xl--font-weight)) }
h2 { font-size:var(--text-sm) }
h2 { font-weight:var(--font-weight-medium) }
h2 { color:var(--color-purple-500) }
a { border-radius:var(--radius-md) }
a { background-color:var(--color-gray-700) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://clerk.com | 2026-06-11T06:08:13.263Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*