framer.com

DESIGN.md

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

---
version: alpha
name: framer.com
description: "Dark-canvas product system built on #ffffff with #0099ff as the single brand accent. Type anchored in Geist at 110px / weight 500. Extracted automatically from https://framer.com/ — every value from getComputedStyle(), no approximation."
narrative: |
  framer.com is built on a near-black canvas (rgb(0, 0, 0)).
  The system uses rgb(0, 153, 255) as the high-saturation accent for primary actions.
  Generously rounded CTAs (40px) suggest approachable, content-first design alongside sans-serif as the primary typeface.

colors:
  surface-2: "#121212"
  ink: "#ffffff"
  ink-muted: "#ffffff"
  ink-subtle: "rgba(255, 255, 255, 0.6)"
  primary: "#0099ff"
  on-primary: "#111111"
  primary-hover: "#0055ff"
  hairline: "#666666"
  primary-focus: "#101010"

typography:
  display-xl:
    fontFamily: "GT Walsheim Framer Medium"
    fontSize: 110px
    fontWeight: 500
    lineHeight: 0.85
    letterSpacing: -5.5px
  display-md:
    fontFamily: "Inter Variable"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01px
  headline:
    fontFamily: "GT Walsheim Medium"
    fontSize: 85px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -4.25px
  body:
    fontFamily: "Geist"
    fontSize: 12px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0
  mono:
    fontFamily: "Inter Framer SemiBold"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 31px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 10px
  sm: 20px
  md: 30px
  lg: 24px
  xl: 32px
  xxl: 64px
  section: 80px

components:
  button-icon-button:
    backgroundColor: "{colors.ink-subtle}"
    textColor: "#000000"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#000000"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
  button-pill:
    backgroundColor: "{colors.ink-subtle}"
    textColor: "#000000"
    typography: "{typography.body}"
    rounded: "{rounded.xl}"
    padding: 10px 15px
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 40px

extracted_at: "2026-05-30T20:38:56.891Z"
completeness: 74
scoreVersion: "v2"

---

# Design System — framer.com
> Extracted automatically by Clone Architect from https://framer.com
> Date: 2026-05-30
> Viewport: Desktop 1440x900 + Mobile 390x844
> Every value in this file comes from real getComputedStyle() — no approximation.

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(0, 0, 0)` is the page background. Every component composits against this.
> - **Accent**: `rgb(0, 153, 255)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 12px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 24px.
> - **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

framer.com commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is a near-pure-black surface (`#000000`) where elevation is communicated through subtle white-opacity gradations rather than traditional shadows — semi-transparent white borders act as the primary depth indicator, like wireframes etched in moonlight. 

Typography is anchored in **Geist**, deployed with OpenType features enabled globally (`"ss02"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. Negative letter-spacing at display sizes (-5.5px at 110px) compresses headlines into engineered blocks, dense and authoritative. 

Body text reads in Pure White (`#ffffff`) (contrast ratio 100.0:1, well above WCAG AA). **Sky Bright** (`#0099ff`) 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 — each level combines several blurred layers at varying offsets to simulate the way light actually falls on stacked surfaces, not the simulated drop-shadow of cheap interfaces. 
Motion design uses smooth easing curves for polished state transitions. The site uses a variable font with OPSZ + WGHT axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Pure Black (`#000000`)
- Primary typeface: Geist
- Primary text: Pure White (`#ffffff`)
- Accent: Sky Bright (`#0099ff`)
- Display: 110px weight 500, letter-spacing -5.5px
- Shadow system: 18 distinct elevation levels
- Custom fonts loaded: Geist, Inter Tight, Mona Sans, Space Grotesk, Azeret Mono, Geist Mono, JetBrains Mono, VT323, Geist Variable, Geist Mono Variable, Luxurious Script, GT Walsheim Medium, GT Walsheim Framer Medium, Inter Medium, GT Walsheim Bold, GT Walsheim Bold Oblique, GT Walsheim Medium Oblique, GT Walsheim Black, Inter Framer SemiBold, Inter Framer Regular, GT Walsheim Regular, Mono Spec Variable, Lazzer Variable, T1 Korium 5Kg, Inter Marketing Medium, Inter SemiBold, Mono Spec Variable Variable Regular, Söhne Breit Fett, Universal Sans Text 400, Inter Framer SemiBold Italic, Inter Framer Italic, Input Mono Bold, Input Mono Regular, Input Mono Black, Söhne Breit Test Fett, Inter, Inter Variable, Inter Display, Panchang, Satoshi, Switzer, Chillax, Manrope, Azeret Mono Variable, Open Runde, Libre Caslon Condensed, Utara Variable, DT Nightingale, Mona Sans Placeholder, Inter Tight Placeholder, Space Grotesk Placeholder, Geist Placeholder, Geist Variable Placeholder, GT Walsheim Medium Placeholder, GT Walsheim Framer Medium Placeholder, Inter Medium Placeholder, GT Walsheim Bold Placeholder, GT Walsheim Bold Oblique Placeholder, GT Walsheim Medium Oblique Placeholder, GT Walsheim Black Placeholder, Inter Framer SemiBold Placeholder, Inter Framer Regular Placeholder, GT Walsheim Regular Placeholder, Mono Spec Variable Placeholder, Lazzer Variable Placeholder, T1 Korium 5Kg Placeholder, Inter Marketing Medium Placeholder, Inter SemiBold Placeholder, Mono Spec Variable Variable Regular Placeholder, Söhne Breit Fett Placeholder, Universal Sans Text 400 Placeholder, Inter Framer SemiBold Italic Placeholder, Inter Framer Italic Placeholder, Input Mono Bold Placeholder, Input Mono Regular Placeholder, Input Mono Black Placeholder, Söhne Breit Test Fett Placeholder, Inter Placeholder, Inter Variable Placeholder, Inter Display Placeholder, JetBrains Mono Placeholder, Panchang Placeholder, Satoshi Placeholder, Switzer Placeholder, Chillax Placeholder, Manrope Placeholder, Azeret Mono Variable Placeholder

## 2. Color Palette & Roles

### Background & Surface
- **Pure Black** (`#000000`): Page background (primary)
- **#0000ee** (`#0000ee`): Surface / elevated background
- **Jet Black** (`#121212`): Surface / elevated background
- **Pure Black** (`#080808`): Surface / elevated background
- **Warm Brown** (`#242424`): Surface / elevated background

### Text & Content
- **Pure Black** (`#000000`): Primary body text
- **#35e2eb** (`#35e2eb`): Secondary text
- **Cool Gray** (`#999999`): Secondary text
- **#fd5d5c** (`#fd5d5c`): Secondary text
- **Amber** (`#fac80a`): Secondary text

### Accent & Interactive
- **Sky Bright** (`#0099ff`): Interactive / accent
- **#0055ff** (`#0055ff`): Interactive / accent
- **Translucent Emerald (10%)** (`rgba(0, 187, 136, 0.1)`): Interactive / accent
- **#33c659** (`#33c659`): Interactive / accent
- **Translucent #0084ff (12%)** (`rgba(0, 132, 255, 0.12)`): Interactive / accent
- **Translucent Sky Bright (20%)** (`rgba(8, 154, 255, 0.2)`): Interactive / accent
- **Ring Blue** (`#3a92fd`): Interactive / accent

### Border & Divider
- **Near Black** (`#1a1a1a`): Borders / dividers
- **Near Black** (`#171717`): Borders / dividers
- **Jet Black** (`#111111`): Borders / dividers
- **Warm Brown** (`#222222`): Borders / dividers
- **Warm Brown** (`#212121`): Borders / dividers
- **Jet Black** (`#141414`): Borders / dividers

### Full Extracted Palette
44 distinct colors detected on the live page (22 categorized above + 22 additional below). Every value is a real `getComputedStyle()` color — no approximation.

- `#ffffff` — Pure White
- `#666666` — Dim Gray
- `#eeeeee` — Light Gray
- `rgba(136, 136, 136, 0.5)` — Translucent Medium Gray (50%)
- `#9869fd` — #9869fd
- `#33aaff` — #33aaff
- `#cccccc` — Silver
- `#1c1c1c` — Near Black
- `#2e2e2e` — Charcoal
- `#8c8c8c` — Medium Gray
- `#2b2b2b` — Charcoal
- `#202020` — Near Black
- `#4cd963` — #4cd963
- `#cbff00` — #cbff00
- `#404040` — Dark Gray
- `#fd7702` — #fd7702
- `#1d1d1d` — Near Black
- `#1f1f1f` — Near Black
- `#f3f3f3` — Light Gray
- `#f2f2f2` — Light Gray
- `#303030` — Charcoal
- `#383838` — Charcoal

### CSS Custom Properties (Design Tokens)

- `--selection-color`: `#09f`
- `--selection-background-color`: `#0099ff4d`

## 3. Typography Rules

### Font Families
- **Primary**: `GT Walsheim Framer Medium`
- **Secondary**: `Geist`
- **Font 3**: `Inter Tight`
- **Font 4**: `Mona Sans`
- **Font 5**: `Space Grotesk`

### Custom Fonts Loaded
- **Geist** weight 400 (normal)
- **Geist** weight 500 (normal)
- **Geist** weight 600 (normal)
- **Inter Tight** weight 700 (normal)
- **Mona Sans** weight 500 (normal)
- **Space Grotesk** weight 400 (normal)
- **Space Grotesk** weight 700 (normal)
- **Azeret Mono** weight 400 (normal)
- **Geist Mono** weight 400 (normal)
- **JetBrains Mono** weight 500 (normal)
- **VT323** weight 400 (normal)
- **Geist Variable** weight 400 (normal)
- **Geist Mono Variable** weight 400 (normal)
- **Luxurious Script** weight 400 (normal)
- **GT Walsheim Medium** weight 500 (normal)
- **GT Walsheim Framer Medium** weight 500 (normal)
- **Inter Medium** weight 500 (normal)
- **GT Walsheim Bold** weight 700 (normal)
- **GT Walsheim Bold Oblique** weight 700 (italic)
- **GT Walsheim Medium Oblique** weight 500 (italic)
- **GT Walsheim Framer Medium** weight normal (normal)
- **GT Walsheim Black** weight 800 (normal)
- **Inter Framer SemiBold** weight 600 (normal)
- **Inter Framer Regular** weight 400 (normal)
- **GT Walsheim Regular** weight 400 (normal)
- **Mono Spec Variable** weight 500 (normal)
- **Lazzer Variable** weight 400 (normal)
- **T1 Korium 5Kg** weight 400 (normal)
- **Inter Marketing Medium** weight 500 (normal)
- **Inter SemiBold** weight 600 (normal)
- **Mono Spec Variable Variable Regular** weight 500 (normal)
- **GT Walsheim Medium** weight normal (normal)
- **GT Walsheim Bold** weight normal (normal)
- **GT Walsheim Bold Oblique** weight normal (normal)
- **GT Walsheim Medium Oblique** weight normal (normal)
- **Söhne Breit Fett** weight 800 (normal)
- **Universal Sans Text 400** weight 400 (normal)
- **Inter Framer SemiBold Italic** weight 600 (italic)
- **Inter Framer Italic** weight 400 (italic)
- **Input Mono Bold** weight 700 (normal)
- **Input Mono Regular** weight 400 (normal)
- **Input Mono Black** weight 800 (normal)
- **Söhne Breit Test Fett** weight 800 (normal)
- **Inter** weight 400 (normal)
- **Inter** weight 600 (normal)
- **Inter** weight 500 (normal)
- **Inter Variable** weight 400 (normal)
- **Inter** weight 700 (normal)
- **Inter** weight 900 (normal)
- **Inter Display** weight 500 (normal)
- **Inter Display** weight 600 (normal)
- **Inter** weight 100 (normal)
- **Inter** weight 200 (normal)
- **Inter** weight 300 (normal)
- **Inter** weight 800 (normal)
- **Inter Display** weight 400 (normal)
- **Inter Display** weight 100 (normal)
- **Inter Display** weight 200 (normal)
- **Inter Display** weight 300 (normal)
- **Inter Display** weight 700 (normal)
- **Inter Display** weight 800 (normal)
- **Inter Display** weight 900 (normal)
- **JetBrains Mono** weight 400 (normal)
- **Panchang** weight 800 (normal)
- **Satoshi** weight 500 (normal)
- **Switzer** weight 600 (normal)
- **Satoshi** weight 400 (normal)
- **Satoshi** weight 700 (normal)
- **Switzer** weight 500 (normal)
- **Switzer** weight 700 (normal)
- **Chillax** weight 600 (normal)
- **Panchang** weight 700 (normal)
- **Chillax** weight 700 (normal)
- **Manrope** weight 500 (normal)
- **Manrope** weight 600 (normal)
- **Azeret Mono Variable** weight 400 (normal)
- **Open Runde** weight 600 (normal)
- **Libre Caslon Condensed** weight 400 (normal)
- **Utara Variable** weight 1000 (normal)
- **DT Nightingale** weight 300 (normal)
- **Mona Sans Placeholder** weight normal (normal)
- **Inter Tight Placeholder** weight normal (normal)
- **Space Grotesk Placeholder** weight normal (normal)
- **Geist Placeholder** weight normal (normal)
- **Geist Variable Placeholder** weight normal (normal)
- **GT Walsheim Medium Placeholder** weight normal (normal)
- **GT Walsheim Framer Medium Placeholder** weight normal (normal)
- **Inter Medium Placeholder** weight normal (normal)
- **GT Walsheim Bold Placeholder** weight normal (normal)
- **GT Walsheim Bold Oblique Placeholder** weight normal (normal)
- **GT Walsheim Medium Oblique Placeholder** weight normal (normal)
- **GT Walsheim Black Placeholder** weight normal (normal)
- **Inter Framer SemiBold Placeholder** weight normal (normal)
- **Inter Framer Regular Placeholder** weight normal (normal)
- **GT Walsheim Regular Placeholder** weight normal (normal)
- **Mono Spec Variable Placeholder** weight normal (normal)
- **Lazzer Variable Placeholder** weight normal (normal)
- **T1 Korium 5Kg Placeholder** weight normal (normal)
- **Inter Marketing Medium Placeholder** weight normal (normal)
- **Inter SemiBold Placeholder** weight normal (normal)
- **Mono Spec Variable Variable Regular Placeholder** weight normal (normal)
- **Söhne Breit Fett Placeholder** weight normal (normal)
- **Universal Sans Text 400 Placeholder** weight normal (normal)
- **Inter Framer SemiBold Italic Placeholder** weight normal (normal)
- **Inter Framer Italic Placeholder** weight normal (normal)
- **Input Mono Bold Placeholder** weight normal (normal)
- **Input Mono Regular Placeholder** weight normal (normal)
- **Input Mono Black Placeholder** weight normal (normal)
- **Söhne Breit Test Fett Placeholder** weight normal (normal)
- **Inter Placeholder** weight normal (normal)
- **Inter Variable Placeholder** weight normal (normal)
- **Inter Display Placeholder** weight normal (normal)
- **JetBrains Mono Placeholder** weight normal (normal)
- **Panchang Placeholder** weight normal (normal)
- **Satoshi Placeholder** weight normal (normal)
- **Switzer Placeholder** weight normal (normal)
- **Chillax Placeholder** weight normal (normal)
- **Manrope Placeholder** weight normal (normal)
- **Azeret Mono Variable Placeholder** weight normal (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Main headline (h1) |
| Label Heading | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | Small heading (H5) |
| Sub-heading | Inter Variable | 24px | 400 | 1.2 | -0.01px | Third-level heading (h3) |
| Label Heading | Inter Variable | 18px | 400 | 1.3 | -0.01px | Small heading (H6) |
| Input | Inter Framer SemiBold | 14px | 600 | 1 | normal | Form input (14px) |
| Body | Geist | 12px | 400 | normal | normal | Standard reading text |

### Full Font Size Scale

Sizes detected in the design (descending): `110px`, `62px`, `61.50px`, `32px`, `24px`, `22px`, `20px`, `18px`, `17px`, `16px`, `15px`, `14px`, `13px`, `12px`, `10px`, `9px`

> 11 size(s) detected outside the sampled hierarchy (62px, 61.5px, 32px, 22px, 20px, 17px, 16px, 15px, 13px, 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:

- **tabular figures** (`tnum`) — numbers align vertically, essential for pricing tables and dashboards
- **stylistic sets** (`ss0X`) — alternate letterforms enabled (often for brand-specific glyph variants)
- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)
- **slashed zero** (`zero`) — distinguishes 0 from O, useful for code/data

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "cv01", "cv05", "cv09", "cv11", "dlig", "cv06", "ss03", "ss02", "ss07", "tnum", "cv03", "cv04", "zero";
}
```

**Variable font axes:**
- OPSZ axis
- WGHT axis

## 4. Component Stylings

### Buttons

**Icon Button**
- Background: `rgba(255, 255, 255, 0.1)` `{colors.ink-subtle}`
- Text: `#000000`
- Padding: 0px
- Radius: 40px
- Font: 12px weight 400
- Use: Toolbar/UI icons
- Focus: outline: `rgb(16, 16, 16) auto 1px`

**Ghost**
- Background: `transparent`
- Text: `#000000`
- Padding: 0px
- Radius: 0px
- Font: 12px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: outline: `rgb(16, 16, 16) auto 1px`

**Pill**
- Background: `#ffffff` `{colors.ink-subtle}`
- Text: `#000000`
- Padding: 10px 15px
- Radius: 100px
- Font: 12px weight 400
- Use: Status pills, tags, chips
- Focus: outline: `rgb(16, 16, 16) auto 1px`

**Ghost**
- Background: `transparent`
- Text: `#000000`
- Padding: 20px 2.5px 20px 20px
- Radius: 0px
- Font: 12px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: outline: `rgb(16, 16, 16) auto 1px`

**Pill**
- Background: `#ffffff` `{colors.ink-subtle}`
- Text: `#000000`
- Padding: 10px 14px
- Radius: 100px
- Font: 12px weight 400
- Use: Status pills, tags, chips
- Focus: outline: `rgb(16, 16, 16) auto 1px`

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 0px 40px
- Radius: none
- Font: 12px weight 400
- Use: Fixed/sticky flex nav — N/A items


## 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(255, 255, 255, 0.1)"
      fg: "rgb(0, 0, 0)"
    focus:
      bg: "rgba(255, 255, 255, 0.1)"
      fg: "rgb(0, 0, 0)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 238)"
```

**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
- **5 shape(s)** in this system: `Icon Button`, `Ghost`, `Pill`, `Ghost`, `Pill`
- **DO NOT introduce new buttons variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

## 5. Layout Principles

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

### Grid
Flexbox column

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 10px |
| sm | 20px |
| md | 30px |
| base | 40px |
| lg | 24px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 64px |

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `40px` |
| Navigation | `none` |
| Page Body | `0px` |

**Shape Personality**: Generously Rounded — Soft, friendly corners (8px+). Approachable, consumer-facing feel.

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


## 5b. Spacing Rhythm Names

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

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `30px` | Card padding, list-item spacing |
| **compact** | `20px` | Form fields, tight clusters, badge padding |
| **micro** | `10px` | 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).

**4/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** 421px tall (not full-viewport)
- **Heading:** "Build bettersites, faster" — 110px center-aligned
- **Subheading:** "Framer is the site builder trusted by leading startups and Fortune 500 companies. Build fast and scale more easily with an integrated CMS, analytics, "
- **CTAs:** 3 (primary: "Introducing the F1 Keyboard — Pre order now")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. No imagery needed for hero — text-driven.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 64px
- **Logo:** ✗ absent
- **Nav links:** 10 primary items
- **CTAs in nav:** 1
- **Clone instruction:** Build a static unknown navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

- **Card count:** 4 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1241×781px (aspect 1.59:1)
- **Gap:** 80px between cards
- **Content:** ✓ image
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~1.59:1 aspect ratio. Each card has an image at the top.

### Footer Pattern

- **Columns:** 1
- **Links:** 77 total
- **Height:** 909px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~77 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 |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.25) 0px 25px 50px 0px`,<br>`rgba(0, 0, 0, 0.5) 0px 5px 25px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgb(9, 9, 9) 0px 0px 0px 2px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.3) 0px 10px 10px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(0, 0, 0, 0.2) 0px 10px 20px 0px`,<br>`rgba(0, 0, 0, 0.25) 0px 2px 4px 0px` | Cards, elevated surfaces |

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

## 7. Motion & Interaction

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `cubic-bezier(0.44,0,0.56,1)` | Custom Ease — Balanced |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `200ms` | Normal | Panel open/close, navigation |
| `300ms` | Normal | Panel open/close, navigation |

### Copy-Paste Transition Snippets

**Color / Background**
```css
transition: color 0.3s cubic-bezier(0.44, 0, 0.56, 1);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `__framer-blink-input` | Fade | opacity | Attention / status |
| `__framer-loading-spin` | Rotate / Spin | transform | Loading indicator |
| `Typewriter-cursor` | Fade | opacity | UI transition |

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `300ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 3 unique animations (3 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 dark background (`#000000`) as the foundation — this is a dark-mode-native design
- Use sans-serif as the primary typeface — it defines the brand personality
- Keep font weights between 400-500 — the system uses a narrow weight range for subtle hierarchy
- Use negative letter-spacing (-5.5px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Sky Bright (`#0099ff`) as the primary accent — it's the brand's signature interactive color
- Use 100px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Maintain nav height at 64px — consistent vertical space for the navigation bar
- Keep the hero centered and text-driven — no decorative media, typography carries the message
- Include exactly 3 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Each card includes a top image — imagery is part of the card identity, not optional

### Don't
- Don't use light backgrounds — the dark canvas is the native medium
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't use weight 700 (bold) or above — 500 is the maximum weight in this system
- 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 use sharp-cornered or pill buttons — 100px is the CTA border-radius standard
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't add hero illustrations or photos — they'll break the typographic restraint
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 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(0, 0, 0)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(0, 0, 0)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(0, 153, 255)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(0, 153, 255)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Tablet | 809px | Multi-column grids begin |
| Desktop | 1199px | Full feature layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `110px` | `54px` |
| heading | line-height | `93.5px` | `45.9px` |
| heading | letter-spacing | `-5.5px` | `-2px` |
| nav | padding | `0px 20px` | `0px` |

### Collapsing Strategy
- Headlines: 110px → 54px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 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):

- **Navigation collapses to hamburger** — 10 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle).
- **Nav CTAs reduced** on mobile (1 → 0) — the design prioritizes content over conversion buttons at small sizes.

## 9b. Visual Tone & Photography

**Tone:** Photography-driven

The site is dominated by photography (JPG/WebP). Photos carry the brand voice as much as the typography. Use authentic, brand-appropriate imagery — generic stock will degrade quality.

**Canonical Brand Image (OG):**
- https://framerusercontent.com/images/yyBL8MFizGZKUd27rQGHp30fyc.jpg
  *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: 0.67:1 (portrait / vertical)
- Rendered size: 360×540px
- Alt text: "Website made in Framer"
- *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): 12 (16%)
- Portrait (<0.87): 25 (33%)
- Square (0.87–1.15): 21 (28%)
- Ultra-wide (>2.3): 18 (24%)

**Media Format Mix:**
- JPG: 43 (typically photographic content)
- PNG: 33 (logos, transparent UI elements, mockups)
- SVG: 7 (icons, illustrations, decorative geometry)

**Average rendered image size:** 422×307px
**Above-fold image count:** 9 / 76

**Decorative Patterns Detected:**
- 2 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 7 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- 80 background patterns (non-photo url() backgrounds) — textures/illustrations as backdrops
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** Decorative SVG accents are part of the brand — generate or source blob/illustration shapes to scatter behind content.

**Imagery Guidance for clones:**
- Source authentic photography (or licensed stock that matches the brand mood) — placeholders will visibly degrade the clone.
- Match the dominant aspect ratio (see above) so card grids and hero compositions hold.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Pure Black (`#000000`)
- Primary text: Pure White (`#ffffff`)
- Accent: Sky Bright (`#0099ff`)
- Border: Dim Gray (`#666666`)
- Font: Geist
- Body: 12px weight 400

### Example Component Prompts
- "Create a hero section on Pure Black background (#000000). Headline at 110px Geist weight 500, line-height 0.85, letter-spacing -5.5px, color #ffffff."
- "Create the primary CTA button: `#0099ff` background, `#000000` text, 40px border-radius, 9px 18px padding, 600 weight, Geist font."
- "Build navigation: relative on `#000000`. Geist 12px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Pure Black (`#000000`) — every component is composited against this exact base.
2. **Typography**: All type in Geist, weight range 400–500. Never exceed 500 — heavier weights break the brand's tonal restraint.
3. **Accent**: Sky Bright (`#0099ff`) is the sole interactive color. On hover → #0055ff (`#0055ff`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.44,0,0.56,1)`. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `40px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (10px–32px). 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-surface-2: #121212;
  --ca-ink-subtle: #ffffff;
  --ca-primary: #0099ff;
  --ca-on-primary: #111111;
  --ca-primary-hover: #0055ff;
  --ca-hairline: #666666;
  --ca-primary-focus: #101010;
}

/* Typography */
:root {
  --ca-font-primary: "GT Walsheim Framer Medium", system-ui, sans-serif;
  --ca-text-display: 110px;
  --ca-text-body: 12px;
  --ca-text-mono: 14px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 10px;
  --ca-space-sm: 20px;
  --ca-space-md: 30px;
  --ca-space-base: 40px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 31px;
  --ca-radius-full: 9999px;
}
```


## 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: unknown
    tag: div
    height: 12555px
    width: full-bleed
    layout: block
    children: 3
  - section: main-content
    tag: main
    height: 10545px
    width: full-bleed
    layout: flex-column justify=flex-start
    children: 6
  - section: section-10
    tag: section
    height: 1801px
    width: full-bleed
    layout: flex-column justify=flex-start
    children: 2
    bg: "rgb(0, 0, 0)"
    padding: "80px 0px 0px"
  - section: header
    tag: header
    height: 421px
    width: 1200px
    layout: flex-column justify=center
    children: 3
    padding: "0px 40px"
  - section: unknown
    tag: div
    classes: ["framer-1riiefj-container"]
    height: 1200px
    width: full-bleed
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 330px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 360px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 330px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 364px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 364px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-13hfrml-container"]
    height: 364px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-tujvxp-container"]
    height: 300px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 426px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 540px
    width: 360px
    layout: block
    children: 1
  - section: hero
    tag: div
    classes: ["--framer-cookie-banner-container", "--framer-cookie-banner-type-medium"]
    height: 157px
    width: 360px
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
  - section: unknown
    tag: div
    height: 450px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-1iiroat-container"]
    height: 300px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 420px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 420px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-13hfrml-container"]
    height: 420px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 510px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 390px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-124nfvh-container"]
    height: 289px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    height: 450px
    width: 360px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["framer-gqpklq-container"]
    height: 400px
    width: 360px
    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:
    - "Create, collaborate, and go live"
    - "Scale without switching tools"
  sub-headings:
    - "AI"
    - "Learn more"
    - "Latest News"
    - "Learn more"
  ctas:
    - "Perplexity"
    - "View Expert"
    - "View Component"
  navigation:
    - "Log in"
    - "Sign up"
    - "Copy

Logo as SVG"
    - "Brand

Guidelines"
    - "Product"
    - "Teams"
    - "Resources"
    - "Community"
    - "Support"
    - "Enterprise"
  footer-links:
    - "All systems operational
Operational"
    - "Mac"
    - "CCPA"
    - "AI"
```

**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: 3
    avg-ratio: 2.52
    common-aspect: "~16:6 banner"
    sample-alts:
      - "UI"
      - "Holo Shader"
      - "Spectrum Shader"
  product:
    count: 9
    avg-ratio: 0.95
    common-aspect: "~1:1 square"
    sample-alts:
      - "Website made in Framer"
      - "Website made in Framer"
      - "Website made in Framer"
  editorial:
    count: 12
    avg-ratio: 0.46
    common-aspect: "~9:21 tall"
    sample-alts:
      - "Website made in Framer"
      - "Website made in Framer"
      - "Website made in Framer"
  thumbnail:
    count: 6
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "A smiling person with short hair, wearing a dark shirt, agai"
```

**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">
  Action
</button>
```
_Source pattern detected: padding `0px` · radius `40px` · weight `400`_

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


## 12. Known Extraction Gaps

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

- **Limited breakpoint data** — fewer than 3 media query breakpoints detected. The site may use fluid CSS (clamp/vw) or container queries for responsiveness rather than traditional breakpoints.
- **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.


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

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 23 named colors |
| Typography | 15 | 20 | 6 roles defined |
| Components | 8 | 20 | 2 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes present |
| CSS Custom Properties | 7 | 10 | 130 vars |
| Responsive Breakpoints | 2 | 5 | 2 breakpoints |
| Variable Fonts | 5 | 5 | OPSZ, WGHT axes |

## 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.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |
| **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 | 130 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 6 typography roles inferred |
| §4 Components | Low | 2 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 21 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | Medium | 2 breakpoints detected |
| §9b Photography | High | 76 images, hero present |

---
*Generated by Clone Architect — automated Playwright extraction + design analysis.*
*Source: https://framer.com | 2026-05-30T20:38:56.916Z*
*All values verified via getComputedStyle() — no approximation, no hallucination.*