cofounder.co

DESIGN.md

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

---
version: alpha
name: cofounder.co
description: "Light product system built on #f5f5f2 with #34d399 as the primary CTA accent. Type anchored in neoris at 46px / weight 400. Extracted automatically from https://cofounder.co/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  cofounder.co is built on a warm, off-white canvas (rgb(245, 245, 242)).
  The system uses rgb(52, 211, 153) as the high-saturation accent for primary actions.
  Moderately rounded CTAs (8px) — modern SaaS standard, neither sharp nor pill alongside neoris as the primary typeface.
  Neoris is paired with TT Neoris Trial Variable for secondary roles.
  A layered elevation system (55 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 39 keyframe animations plus transition-driven interactions.

colors:
  background: "#f5f5f2"
  surface-1: "#ffffff"
  surface-2: "#fbfbf8"
  ink: "#171717"
  ink-muted: "rgba(23, 23, 23, 0.65)"
  ink-subtle: "rgba(101, 101, 100, 0.62)"
  primary: "#34d399"
  on-primary: "#111111"
  primary-hover: "#a3e635"
  hairline: "rgba(32, 32, 32, 0.1)"
  semantic-success: "#34a853"

typography:
  display-xl:
    fontFamily: "neoris, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0
  display-md:
    fontFamily: "neoris, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 440
    lineHeight: 1.1
    letterSpacing: -0.4px
  headline:
    fontFamily: "neoris, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.15px
  body:
    fontFamily: "neoris, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 410
    lineHeight: 1.5
    letterSpacing: 0.15px
  body-sm:
    fontFamily: "neoris, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 410
    lineHeight: 1.5
    letterSpacing: 0.15px
  caption:
    fontFamily: "TT Neoris Trial Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 460
    lineHeight: 1.4
    letterSpacing: 0.15px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 100px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 12px
  md: 20px
  lg: 40px
  xl: 68px
  xxl: 72px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
  button-light--invert:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
  card-standard-card:
    backgroundColor: "{colors.background}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0px 4px 4px
  cta-banner-full-width-cta:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
  status-badge-neutral-dark:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
  status-badge-neutral-dark-2:
    backgroundColor: "transparent"
    textColor: "{colors.surface-1}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0px 12px
  status-badge-neutral-light:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.surface-1}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"

extracted_at: "2026-06-14T15:18:38.969Z"
completeness: 87
scoreVersion: "v2"

---

# Design System — cofounder.co
> Extracted automatically by Prism from https://cofounder.co/
> Date: 2026-06-14
> 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**: medium  |  **Aesthetic**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#f5f5f2` |
| Type posture | sans-led (neoris) | "Cofounder lets you run an enti" |
| Color assertion | dual-accent | #34d399 |
| Whitespace | sparse | section rhythm 70px |
| Interaction | animated | 39 keyframes, 21 transitions |
| Radius language | 8px-rounded | from token scale |

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

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

**Signature:** a full-bleed image backdrop in the hero. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

cofounder.co's canvas is a warm, intentionally-tinted surface (`#f5f5f2`) — a refusal of the default white that immediately signals editorial intent. This isn't sterility, it's an invitation to read. 

Typography is anchored in **neoris**. 

Body text reads in Near-Black (`#171717`) — softened from pure black, a small but deliberate detail that lowers reading friction. **#34d399** (`#34d399`) 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 (55 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. The site uses a variable font with ITAL axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Off-White (`#f5f5f2`)
- Primary typeface: neoris
- Primary text: Near-Black (`#171717`)
- Accent: #34d399 (`#34d399`)
- Shadow system: 55 distinct elevation levels
- Custom fonts loaded: neoris, neoris Fallback, departureMono, departureMono Fallback, IBM Plex Mono, IBM Plex Mono Fallback, Inter, Inter Fallback

## 2. Color Palette & Roles

### Background & Surface
- **Surface** (`#f5f5f2`): Page background (primary)
- **Surface Raised** (`#fbfbf8`): Surface / elevated background (CSS var)
- **Surface Darker** (`#e7e7e3`): Surface / elevated background (CSS var)
- **Transparent** (`transparent`): Surface / elevated background
- **White** (`#ffffff`): Surface / elevated background

### Text & Content
- **Near-Black** (`#171717`): Primary body text
- **Black** (`#000000`): Secondary text
- **Translucent Near Black (10%)** (`rgba(32, 32, 32, 0.1)`): Secondary text
- **Charcoal** (`#383838`): Secondary text
- **Near-Black** (`#1a1a1a`): Secondary text

### Accent & Interactive
- **Accent Brown** (`#a76451`): Accent / interactive (CSS var)
- **#34d399** (`#34d399`): Interactive / accent
- **#a3e635** (`#a3e635`): Interactive / accent
- **#eec75d** (`#eec75d`): Interactive / accent
- **Cornflower Blue** (`#5d86ee`): Interactive / accent
- **#71ce45** (`#71ce45`): Interactive / accent
- **#46abfd** (`#46abfd`): Interactive / accent

### Border & Divider
- **Border Pill** (`#e3e3e0`): Border (CSS var)
- **Border Card** (`#dee2de`): Border (CSS var)
- **Whitesmoke** (`#e7e7e1`): Borders / dividers
- **Light Grey** (`#d9d9d6`): Borders / dividers
- **Light Grey** (`#cfcfcf`): Borders / dividers
- **Whitesmoke** (`#e8e7e6`): Borders / dividers

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

- `#f1f1ee` — Off-White
- `rgba(38, 35, 35, 0.8)` — Ink
- `#f2f2ee` — Off-White
- `#69b4e5` — #69b4e5
- `#a6d9e9` — Light Blue
- `#dae9fb` — Light Gray
- `#1d70d9` — M Tricolor Blue
- `#fafaf7` — Off-White
- `#b2e7ff` — Light Blue
- `#0086c2` — #0086c2
- `#29bcff` — #29bcff
- `#b7b7b7` — Grey
- `#dff0d5` — Beige
- `#6fa751` — #6fa751
- `#f0ddd5` — Soft Pink
- `#f8f8f6` — Off-White
- `#f59e0b` — #f59e0b
- `#ff672f` — #ff672f
- `#7bd85b` — #7bd85b
- `#00b894` — Emerald
- `#1c6fd9` — M Tricolor Blue
- `#1a6fd1` — M Tricolor Blue
- `#2688dd` — Ring Blue
- `#757575` — Slate Grey
- `#bfbfbf` — Light Grey
- `#c5221f` — M Tricolor Red
- `#3ecf8e` — #3ecf8e
- `#635bff` — Brand Indigo
- `#d9d9d9` — Light Grey
- `#632ca6` — #632ca6
- `#549f4b` — #549f4b

### Gradients & Decorative Fills

- `linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%)` — (heading)

### CSS Custom Properties (Design Tokens)

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

**Border**
- `--color-border-pill`: `#e3e3e0`
- `--color-border-card`: `#dee2de`

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

**Border Radius Token**
- `--radius-3xl`: `1.5rem`
- `--radius-xl`: `.75rem`
- `--radius-2xl`: `1rem`
- `--radius-md`: `.375rem`

**Spacing Token**
- `--spacing`: `.25rem`
- `--tw-space-y-reverse`: `0`

**Font Weight Token**
- `--font-weight-semibold`: `600`
- `--font-weight-medium`: `500`
- `--font-weight-normal`: `400`

**Primary Brand Color**
- `--color-accent-brown`: `#a76451`

**Background**
- `--color-surface`: `#f5f5f2`
- `--color-surface-raised`: `#fbfbf8`
- `--color-surface-darker`: `#e7e7e3`

**Font Family Token**
- `--default-font-family`: `"neoris", "neoris Fallback", sans-serif`
- `--default-mono-font-family`: `"IBM Plex Mono", "IBM Plex Mono Fallback"`

**Other tokens**
- `--color-ink`: `#262323cc`
- `--color-ink-ui-solid`: `#202020`
- `--font-neoris`: `"neoris", "neoris Fallback"`
- `--color-ink-strongest`: `#262323e6`
- `--font-mono`: `"IBM Plex Mono", "IBM Plex Mono Fallback"`
- `--color-feature-success`: `#34a853`
- `--text-sm`: `.875rem`
- `--tw-ring-offset-color`: `#fff`

## 3. Typography Rules

### Font Families
- **Primary**: `neoris`
- **Secondary**: `neoris Fallback`
- **Font 3**: `departureMono`
- **Font 4**: `departureMono Fallback`
- **Font 5**: `IBM Plex Mono`

### Custom Fonts Loaded
- **neoris** weight normal
- **neoris Fallback** weight normal
- **departureMono** weight normal
- **departureMono Fallback** weight normal
- **IBM Plex Mono** weight 400
- **IBM Plex Mono** weight 500
- **IBM Plex Mono Fallback** weight normal
- **Inter** weight 400
- **Inter** weight 500
- **Inter Fallback** weight normal

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | neoris | 46px | 400 | 1.08 | normal | Main headline (h1) |
| Label Heading | neoris | 24px | 400 | 1.15 | 0.15px | Small heading (H4) |
| Sub-heading | neoris | 20px | 440 | 1.1 | -0.4px | Third-level heading (h3) |
| Card Title | neoris | 16px | 400 | 1.5 | normal | Card headings |
| Caption / Badge | TT Neoris Trial Variable | 16px | 460 | 1.4 | 0.15px | small text (16px) |
| Link | neoris | 15px | 410 | 1.5 | 0.15px | Link (15px) — Decoration: none |
| Nav Link | neoris | 15px | 460 | 1.4 | 0.15px | Navigation anchor |

### Font Weight Scale

CSS custom properties define 3 explicit weight steps:
- `--font-weight-normal`: `400` — Regular
- `--font-weight-medium`: `500` — Medium
- `--font-weight-semibold`: `600` — SemiBold — declared in CSS; heaviest weight actually painted is `530`

### Full Font Size Scale

Sizes detected in the design (descending): `46px`, `40px`, `32px`, `26px`, `24px`, `20px`, `19px`, `16px`, `15px`, `13.80px`, `12px`, `11px`, `10.60px`, `10px`, `9px`, `8.65px`, `8.29px`, `8px`

> 13 size(s) detected outside the sampled hierarchy (40px, 32px, 26px, 19px, 13.8px, 12px, 11px, 10.6px, 10px, 9px, 8.65px, 8.287px, 8px). 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:

- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)

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

**Variable font axes:**
- ITAL axis

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#171717` `{colors.ink-muted}`
- Padding: 0px
- Radius: 8px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button

**Light / Invert**
- Background: `#f5f5f2` `{colors.background}`
- Text: `#171717` `{colors.ink-muted}`
- Padding: 0px
- Radius: 8px
- Border: 1px solid rgba(32, 32, 32, 0.1)
- Shadow: `rgba(0, 0, 0, 0.06) 0px 2px 3px 0px, rgba(255, 255, 255, 0.35) 0px 0px 0.357px 1...`
- Font: 16px weight 400
- Use: Bright CTA on dark sections

**Outline**
- Background: `transparent`
- Text: `#171717` `{colors.ink-muted}`
- Padding: 0px
- Radius: 8px
- Border: 1px solid rgb(56, 56, 56)
- Shadow: `rgba(64, 64, 64, 0.12) 0px 0px 0px 1px, rgba(255, 255, 255, 0.24) 0px 2px 0px 0p...`
- Font: 16px weight 400
- Use: Secondary action with border

**Light / Invert**
- Background: `#f1f1ee`
- Text: `#171717` `{colors.ink-muted}`
- Padding: 0px
- Radius: 8px
- Border: 1px solid rgba(32, 32, 32, 0.1)
- Shadow: `rgba(0, 0, 0, 0.5) 0px 1px 1px 0px, rgba(255, 255, 255, 0.23) 0px 0px 0px 1px`
- Font: 16px weight 400
- Use: Bright CTA on dark sections

**Light / Invert**
- Background: `#e7e7e1`
- Text: `#171717` `{colors.ink-muted}`
- Padding: 0px
- Radius: 8px
- Border: 1px solid rgba(32, 32, 32, 0.1)
- Shadow: `rgba(255, 255, 255, 0.35) 0px 0px 0.357px 1.5px inset`
- Font: 16px weight 400
- Use: Bright CTA on dark sections

**Light / Invert**
- Background: `#f5f5f2` `{colors.background}`
- Text: `#171717` `{colors.ink-muted}`
- Padding: 0px 12px
- Radius: 8px
- Border: 1px solid rgba(32, 32, 32, 0.1)
- Shadow: `rgba(0, 0, 0, 0.06) 0px 2px 3px 0px, rgba(255, 255, 255, 0.35) 0px 0px 0.357px 1...`
- Font: 16px weight 400
- Use: Bright CTA on dark sections

**Ghost**
- Background: `transparent`
- Text: `#ffffff` `{colors.surface-1}`
- Padding: 0px 12px
- Radius: 8px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button

### Cards & Containers

**Standard Card**
- Background: `#f5f5f2` `{colors.background}`
- Padding: 0px 4px 4px
- Radius: 7.142px
- Shadow: `rgb(255, 255, 255) 0px 0px 0px 0.714px inset, rgba(0, 0, 0, 0.08) 0px 0px 0px 0....`
- Use: Content containers, listing items

### CTA Banners

**Full-width CTA**
- Background: `transparent`
- Text: `#171717` `{colors.ink-muted}`
- Padding: 0px
- Radius: 8px
- Font: 16px weight 400
- Use: Full-width conversion strip with headline + button

### Status Badges

**Neutral Dark**
- Background: `transparent`
- Text: `#171717` `{colors.ink-muted}`
- Padding: 0px
- Radius: 8px
- Font: 16px weight 400
- Use: Status indicator, label, pill

**Neutral Dark**
- Background: `transparent`
- Text: `#ffffff` `{colors.surface-1}`
- Padding: 0px 12px
- Radius: 8px
- Font: 16px weight 400
- Use: Status indicator, label, pill

**Neutral Light**
- Background: `rgba(255, 255, 255, 0.05)` `{colors.surface-1}`
- Text: `#ffffff` `{colors.surface-1}`
- Padding: 0px
- Radius: 8px
- 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: "rgb(245, 245, 242)"
      fg: "rgb(23, 23, 23)"
      border: "1px solid rgba(32, 32, 32, 0.1)"
      shadow: "rgba(0, 0, 0, 0.06) 0px 2px 3px 0px, rgba(255, 255, 255, 0.3"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(23, 23, 23)"
  card:
    default:
      bg: "rgb(245, 245, 242)"
      fg: "rgb(23, 23, 23)"
      shadow: "rgb(255, 255, 255) 0px 0px 0px 0.714px inset, rgba(0, 0, 0, "
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(23, 23, 23)"
  badge:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(23, 23, 23)"
  footerLink:
    default:
      bg: "rgb(245, 245, 242)"
      fg: "rgb(23, 23, 23)"
      border: "1px solid rgba(32, 32, 32, 0.1)"
      shadow: "rgba(0, 0, 0, 0.06) 0px 2px 3px 0px, rgba(255, 255, 255, 0.3"
```

**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
- **3 shape(s)** in this system: `Ghost`, `Light / Invert`, `Outline`
- **DO NOT introduce new buttons variants** without justification

### Cards & Containers
- **1 shape(s)** in this system: `Standard Card`
- **DO NOT introduce new cards & containers variants** without justification

### CTA Banners
- **1 shape(s)** in this system: `Full-width CTA`
- **DO NOT introduce new cta banners variants** without justification

### Status Badges
- **2 shape(s)** in this system: `Neutral Dark`, `Neutral Light`
- **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 | 4px |
| sm | 12px |
| md | 20px |
| base | 25px |
| lg | 40px |
| xl | 68px |
| 2xl | 70px |
| 3xl | 72px |

### 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 | 20px | Large rounded elements, pill segments |
| Xl | 100px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `8px` |
| Cards & Containers | `7.142px` |
| CTA Banners | `8px` |
| Status Badges | `8px` |
| Page Body | `0px` |
| Navigation | `0px` |

**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.

**Full Radius Spectrum**: 0px, 0.3px, 2.5px, 3px, 4px, 4.014px, 4.285px, 4.972px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~92px internal vertical padding (up to 160px) — **generous**. (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** | `72px` | Top/bottom of full-bleed hero sections |
| **section** | `68px` | Between major bands (color change, content shift) |
| **subsection** | `40px` | Within a section, between content groups |
| **card** | `20px` | Card padding, list-item spacing |
| **compact** | `12px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | 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:** left-aligned — 
- **Viewport coverage:** 99px tall (not full-viewport)
- **Heading:** "Cofounder lets you run an entire company with agents" — 46px left-aligned
- **CTAs:** none detected in hero (unusual — agent should verify)
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 41px
- **Logo:** ✗ absent
- **Nav links:** 8 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:** 4 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1052×411px (aspect 2.56:1)
- **Gap:** 80px between cards
- **Content:** ✓ image + CTA
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~2.56:1 aspect ratio. Each card has an image at the top.

### Footer Pattern

- **Columns:** 2
- **Links:** 15 total
- **Height:** 749px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 2-column footer with ~8 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>`rgba(0, 0, 0, 0.12) 0px -1px 0px 0px inset`,<br>`rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset`,<br>`rgba(255, 255, 255, 0.24) 0px 1px 1px 0px inset` | Buttons, pressed-state elements |
| Inset (Level 2) | <br>`rgba(0, 0, 0, 0.12) 0px -1px 0px 0px inset`,<br>`rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset`,<br>`rgba(255, 255, 255, 0.6) 0px 2px 1px 0px inset` | Buttons, pressed-state elements |
| Inset (Level 3) | <br>`rgba(0, 0, 0, 0.06) 0px 2px 3px 0px`,<br>`rgba(255, 255, 255, 0.35) 0px 0px 0.357px 1.5px inset`,<br>`rgb(255, 255, 255) 0px 2px 0px 0px inset` | Buttons, pressed-state elements |
| Inset (Level 4) | <br>`rgba(64, 64, 64, 0.12) 0px 0px 0px 1px`,<br>`rgba(255, 255, 255, 0.24) 0px 2px 0px 0px inset`,<br>`rgba(0, 0, 0, 0.25) 0px -0.5px 2px 0px inset`,<br>`rgba(0, 0, 0, 0.03) 0px 2px 8px 0px`,<br>`rgba(0, 0, 0, 0.16) 0px 3px 4px 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-in` | `cubic-bezier(.4, 0, 1, 1)` | Custom Ease — Balanced |
| `--ease-out` | `cubic-bezier(0, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-in-out` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |
| `--tw-ease` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |

### Duration Scale

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

### Copy-Paste Transition Snippets

**Border**
```css
transition: border-color 0.02s ease-in-out, box-shadow 0.02s ease-in-out, background-color 0.12s ease-out 0.03s;
```

**Opacity**
```css
transition: opacity 0.06s cubic-bezier(0.4, 0, 0.2, 1);
```

**Color / Background**
```css
transition: color 0.06s, font-weight 0.06s;
```

**Opacity**
```css
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `float-btn-spring` | Fade + Move | opacity, transform | Playful feedback |
| `build-carousel-slide` | Slide | transform | UI transition |
| `testi-fade-in` | Fade | opacity, filter | Element entrance |
| `testi-fade-out` | Fade | opacity, filter | Element exit |
| `wordsearch-stroke-cw` | Custom | stroke-dashoffset | UI transition |
| `wordsearch-stroke-ccw` | Custom | stroke-dashoffset | UI transition |
| `wordsearch-letter-lvl1` | Color Pulse | color, text-shadow | UI transition |
| `wordsearch-letter-lvl2` | Color Pulse | color, text-shadow | UI transition |
| `wordsearch-letter-lvl1-out` | Color Pulse | color, text-shadow | UI transition |
| `wordsearch-letter-lvl2-out` | Color Pulse | color, text-shadow | UI transition |
| `task-row-in` | Fade + Move | opacity, filter, transform | UI transition |
| `task-row-out` | Fade + Move | opacity, filter, transform | UI transition |
| `hero-enter` | Fade + Move | opacity, transform | Element entrance |
| `scroll-arrow` | Fade + Move | opacity, transform | UI transition |
| `notif-slide` | Custom | grid-template-rows, margin-top | UI transition |
| `notif-exit` | Custom | grid-template-rows, margin-top | Element exit |
| `notif-pop-exit` | Fade + Move | opacity, transform | Element exit |
| `notif-pop` | Fade + Move | opacity, transform | UI transition |
| `notif-wheel-in` | Fade + Move | opacity, filter, transform | UI transition |
| `notif-wheel-out` | Fade + Move | opacity, filter, transform | UI transition |

> *19 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `150ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 39 unique animations (39 total including variants)

> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Surface (`#f5f5f2`) as the page background — it's intentionally not pure white
- Use Near-Black (`#171717`) for text — not pure black, it's warmer and more readable
- Use neoris as the primary typeface — it defines the brand personality
- Keep font weights between 400-530 — the system uses a narrow weight range for subtle hierarchy (CSS declares up to 600, but the heaviest weight actually painted is 530)
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use #34d399 (`#34d399`) as the primary accent — it's the brand's signature interactive color
- Use 8px border-radius on buttons — the standard corner rounding for interactive elements
- Use 7.142px border-radius on cards — consistent with the grid card corners
- Maintain nav height at 41px — consistent vertical space for the navigation bar
- Respect the 4px–68px spacing range — the design uses a wide scale for visual breathing room
- Each card includes a top image — imagery is part of the card identity, not optional

### Don't
- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't reach for weight 700 (bold) or above — 530 is the heaviest weight this design paints
- 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 collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- 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(245, 245, 242)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(245, 245, 242)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(52, 211, 153)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(52, 211, 153)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 348px | Single column, compact spacing |
| Mobile | 476px | Single column, compact spacing |
| Mobile Large | 639px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Desktop | 1050px | Full feature layout |
| Desktop | 1100px | Full feature layout |
| Desktop | 1279px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `46px` | `34px` |
| heading | line-height | `49.68px` | `37.4px` |
| nav | height | `41px` | `auto` |
| card | width | `328.516px` | `328.531px` |

### Collapsing Strategy
- Headlines: 46px → 34px 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):

- **Footer columns collapse:** 2 columns (desktop) → 1 column (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.
- **Animated SVG** — path/line-draw animations.
- **Glassmorphism** — 5 frosted/blur layer(s) (e.g. `blur(16px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.

> **Motion fingerprint**: Canvas 2D, SVG animations, glassmorphism (10 layers), non-rectangular shapes (10), CSS scroll-driven animations


## 7d. Motion Choreography (measured)

*Real timing extracted from `getComputedStyle` at load — not guessed. Match these curves and durations to reproduce the brand's motion feel; flat clones miss this entirely.*

**Keyframe animations** — the named, looping/entrance motions actually applied:

| Animation | Duration | Easing | Delay | Iteration | Used by | Keyframes captured |
|---|---|---|---|---|---|---|
| `notif-slide` | 0.48s | `cubic-bezier(0.22, 1, 0.36, 1)` | — | 1 | 3× | ✅ |
| `notif-pop` | 0.52s | `cubic-bezier(0.34, 1.56, 0.64, 1)` | — | 1 | 3× | ✅ |
| `hero-enter` | 0.6s | `cubic-bezier(0.23, 1, 0.32, 1)` | 0.1s | 1 | 3× | ✅ |
| `badge-blink` | 2s | `ease-in-out` | — | infinite | 2× | ✅ |
| `orch-section-fade-in` | 0.5s | `cubic-bezier(0.23, 1, 0.32, 1)` | — | 1 | 2× | ✅ |
| `orch-block-reveal` | 0.35s | `cubic-bezier(0.23, 1, 0.32, 1)` | — | 1 | 2× | ✅ |
| `orch-block-reveal` | 0.4s | `cubic-bezier(0.23, 1, 0.32, 1)` | — | 1 | 2× | ✅ |
| `cofounder-msg-fade-in` | 0.36s | `cubic-bezier(0.22, 1, 0.36, 1)` | — | 1 | 2× | ✅ |
| `cofounder-pixel-refocus` | 1.4s | `cubic-bezier(0.16, 1, 0.3, 1)` | — | 1 | 1× | ✅ |

**Transition profiles** — the interactive easing fingerprint (hover/focus/state changes):

| Property | Duration | Easing | Delay | Count |
|---|---|---|---|---|
| color | 0.15s | `ease` | — | 250× |
| text-shadow | 0.15s | `ease` | — | 250× |
| transform | 0.3s | `cubic-bezier(0.23, 1, 0.32, 1)` | — | 16× |
| opacity | 0.3s | `cubic-bezier(0.23, 1, 0.32, 1)` | — | 16× |
| opacity | 0.06s | `cubic-bezier(0.4, 0, 0.2, 1)` | — | 13× |
| translate | 0.3s | `cubic-bezier(0.23, 1, 0.32, 1)` | — | 12× |
| opacity | 0.2s | `cubic-bezier(0, 0, 0.2, 1)` | — | 11× |
| color | 0.2s | `ease-out` | — | 11× |
| color | 0.06s | `ease` | — | 8× |
| font-weight | 0.06s | `ease` | — | 8× |
| opacity | 0.1s | `cubic-bezier(0.22, 1, 0.36, 1)` | — | 7× |
| opacity | 0.3s | `ease` | — | 6× |

**Staggered sequences** — children that animate in cascade (reproduce the rhythm, not just the end state):

- `div.max-w-[720px]` — 3 children, **+400ms each** via `animation-delay` (100ms → 500ms → 900ms…)

**Scroll-reveal** *(heuristic — initial hidden state, not runtime-observed)* — 34 candidate element(s) start hidden and animate in on scroll (opacity0+transition).
  - e.g. `img.absolute.inset-0` → initial opacity 0, transform `none`, transition `opacity 0.06s cubic-bezier(0.4, 0, 0.2, 1)`. Build a fade/translate reveal-on-scroll for below-fold bands.

> **Motion coverage** (measured on 3102 sampled elements; scroll-reveal is heuristic): 11 animation signatures, 24 transition profiles, 1 staggered sequence, 34 scroll-reveal candidates.

## 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://cofounder.co/og/og-home.png (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.71:1 (landscape (16:9-ish))
- Rendered size: 1539×900px
- Alt text: "Hero"
- *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): 8 (38%)
- Portrait (<0.87): 6 (29%)
- Square (0.87–1.15): 5 (24%)
- Ultra-wide (>2.3): 2 (10%)

**Media Format Mix:**
- PNG: 1 (logos, transparent UI elements, mockups)
- SVG: 12 (icons, illustrations, decorative geometry)
- GIF: 1 (animated content)

**Average rendered image size:** 458×308px
**Above-fold image count:** 1 / 21

**Decorative Patterns Detected:**
- 27 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 1 radial gradient — circular color blooms used for spotlight/glow effects
- 10 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 (`#f5f5f2`)
- Primary text: Near-Black (`#171717`)
- Accent: #34d399 (`#34d399`)
- Border: Translucent Near Black (10%) (`rgba(32, 32, 32, 0.1)`)
- Font: neoris
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Off-White background (#f5f5f2). Headline at 46px neoris weight 400, line-height 1.08, color #171717."
- "Create the primary CTA button: `#34d399` background, `#171717` text, 8px border-radius, 12px 24px padding, 530 weight, neoris font."
- "Design a card on `#f5f5f2` background. Border: none. Radius: 7.142px. Shadow: use extracted shadow. Padding: 0px 4px 4px."
- "Build navigation: static on `#f5f5f2`. neoris 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Off-White (`#f5f5f2`) — every component is composited against this exact base.
2. **Typography**: All type in neoris, weight range 400–530. Never exceed 530 — heavier weights break the brand's tonal restraint.
3. **Accent**: #34d399 (`#34d399`) — 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,0.2,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 `8px`, cards at `7.142px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–68px). 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: #f5f5f2;
  --ca-surface-1: #ffffff;
  --ca-surface-2: #fbfbf8;
  --ca-ink-muted: #171717;
  --ca-ink-subtle: #656564;
  --ca-primary: #34d399;
  --ca-on-primary: #111111;
  --ca-primary-hover: #a3e635;
  --ca-hairline: #202020;
  --ca-semantic-success: #34a853;
}

/* Typography */
:root {
  --ca-font-primary: "neoris", system-ui, sans-serif;
  --ca-text-display: 46px;
  --ca-text-body: 15px;
  --ca-text-small: 15px;
  --ca-text-caption: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 12px;
  --ca-space-md: 20px;
  --ca-space-base: 25px;
  --ca-space-lg: 40px;
  --ca-space-xl: 68px;
  --ca-space-2xl: 70px;
  --ca-space-3xl: 72px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 100px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-in: cubic-bezier(.4, 0, 1, 1);
  --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: header
    tag: header
    classes: ["site-header", "fixed", "top-0", "left-0"]
    height: 91px
    width: 1425px
    layout: flex-row justify=center
    children: 1
    vertical-padding: ~25px
  - section: hero
    tag: div
    classes: ["relative", "w-full", "[--hero-min-height:720px]", "md:[--hero-min-height:620px]"]
    height: 1084px
    width: 1425px
    layout: block
    children: 3
    vertical-padding: ~92px (generous)
    padding: "0px 0px 184px"
  - section: unknown
    tag: div
    classes: ["hero-stagger"]
    height: 99px
    width: 720px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["hero-notif-position", "max-[676px]:hidden", "max-[500px]:hidden"]
    height: 164px
    width: 276px
    layout: flex-column justify=flex-end
    children: 1
  - section: unknown
    tag: div
    classes: ["hero-notif-stack", "relative"]
    height: 161px
    width: 244px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["hero-notif-stack-list"]
    height: 161px
    width: 244px
    layout: flex-column justify=normal
    children: 3
  - section: feature-section
    tag: div
    classes: ["relative", "w-full", "overflow-hidden", "pt-[20px]"]
    height: 1015px
    width: 1425px
    layout: block
    children: 2
    bg: "rgb(245, 245, 242)"
    vertical-padding: ~70px (generous)
    padding: "20px 0px 120px"
  - section: unknown
    tag: div
    classes: ["relative", "w-full", "max-w-[520px]", "aspect-square"]
    height: 520px
    width: 520px
    layout: block
    children: 12
  - section: feature-section
    tag: div
    classes: ["w-full", "pt-24", "pb-10"]
    height: 240px
    width: 1425px
    layout: block
    children: 1
    bg: "rgb(245, 245, 242)"
    vertical-padding: ~68px (generous)
    padding: "96px 0px 40px"
  - section: content-section
    tag: div
    classes: ["relative", "w-full"]
    height: 1287px
    width: 1425px
    layout: block
    children: 6
    bg: "rgb(245, 245, 242)"
  - section: feature-section
    tag: div
    classes: ["w-full", "py-[120px]"]
    height: 2344px
    width: 1425px
    layout: block
    children: 1
    bg: "rgb(245, 245, 242)"
    vertical-padding: ~120px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "120px 0px"
  - section: feature-section
    tag: section
    classes: ["relative", "w-full", "min-h-0", "flex"]
    height: 1154px
    width: 1425px
    layout: flex-column justify=normal
    children: 4
    bg: "rgb(26, 111, 209)"
    bg-treatment: image
    vertical-padding: ~160px (airy)
  - section: feature-section
    tag: div
    classes: ["w-full", "py-[120px]"]
    height: 851px
    width: 1425px
    layout: block
    children: 1
    bg: "rgb(245, 245, 242)"
    vertical-padding: ~120px (airy)
    padding: "120px 0px"
  - section: footer
    tag: footer
    classes: ["w-full", "footer-bg", "relative"]
    height: 749px
    width: 1425px
    layout: block
    children: 2
    vertical-padding: ~72px (generous)
  - section: navigation
    tag: nav
    classes: ["mt-[48px]", "flex", "flex-col", "gap-[32px]"]
    height: 167px
    width: 622px
    layout: flex-column justify=normal
    children: 2
```

**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:
    - "Cofounder is an agent orchestration platform designed to help you run an entire business"
    - "Learn how to start a company"
    - "All the tools and systems your company needs"
  sub-headings:
    - "Chapter 1 How To Start"
    - "Customize Agent Template"
    - "Build across industries"
  ctas:
    - "Run a company"
    - "Check out the launch"
    - "Download full guide"
  navigation:
    - "Start"
    - "Build"
    - "Sell"
    - "Scale"
    - "Resources"
    - "Pricing"
    - "Log in"
    - "Run a company"
    - "Homepage"
    - "Careers"
  footer-links:
    - "Start"
    - "Altalogy"
    - "Run a company"
```

**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: 1
    avg-ratio: 3.63
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Cofounder"
  hero:
    count: 2
    avg-ratio: 15.65
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Carousel top decor"
      - "Carousel bottom decor"
  product:
    count: 1
    avg-ratio: 0.99
    common-aspect: "~1:1 square"
    sample-alts:
      - "Left carousel decor"
  editorial:
    count: 4
    avg-ratio: 0.54
    common-aspect: "~9:16 portrait"
  thumbnail:
    count: 18
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
  icon:
    count: 8
    avg-ratio: 0.09
    common-aspect: "~9:21 tall"
```

**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 `8px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px 4px 4px` · radius `7.142px` · shadow `rgb(255, 255, 255) 0px 0px 0px 0.714px inset, rgba(0, 0, 0, `_

**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** 7 · **auth** 1 · **pricing** 1 · **docs** 1 · **social** 2 · **legal** 1 · **footer** 4 · **download** 1 · **other** 9

**Primary actions (conversion path):**
- Account access — "Log in" (login/signup) → `https://app.cofounder.co/`

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

*How-To* — medium confidence, 4 items:

| Title | Featured image | Link |
|---|---|---|
| Chapter 1 How To Start Chapter I by Cofounde | `image?url=%2Fbooks-covers%2FUI%2004%` (ar 1.23) | https://cofounder.co/how-to/start |
| Chapter 2 How To Build Chapter II by Cofound | `image?url=%2Fbooks-covers%2FUI%2004%` (ar 1.23) | https://cofounder.co/how-to/build |
| Chapter 3 How To Sell Chapter III by Cofound | `image?url=%2Fbooks-covers%2FUI%2004%` (ar 1.23) | https://cofounder.co/how-to/sell |
| Chapter 4 How To Scale Chapter IV by Cofound | `image?url=%2Fbooks-covers%2FUI%2004%` (ar 1.23) | https://cofounder.co/how-to/scale |

**Signals:** 12/27 links carry a featured image · dominant link roles: content-card (9), footer-link (8), navigation (7).


---
## Coverage: 87% of dimensions extracted

> Coverage measures how much of the design we could read, **not** how pixel-faithful a clone is. For fidelity, see the SSIM/structure score.

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 23 named colors |
| Typography | 18 | 20 | 7 roles defined |
| Components | 16 | 20 | 4 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 4 | 10 | 77 vars |
| Responsive Breakpoints | 5 | 5 | 8 breakpoints |
| Variable Fonts | 5 | 5 | ITAL 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.

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

- **Licensed web fonts (neoris, departureMono, IBM Plex Mono)** — 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.
- **8 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 | 77 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 7 typography roles inferred |
| §4 Components | Medium | 4 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 20 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 8 breakpoints detected |
| §9b Photography | High | 21 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

5 font file(s) captured (838KB total). When running `prism add`, fonts are saved to `extractions/cofounder.co/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'neoris';
  /* src: url('/fonts/neoris.woff2') format('truetype'); */
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'neoris Fallback';
  /* src: url('/fonts/neoris-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'departureMono';
  /* src: url('/fonts/departureMono.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'departureMono Fallback';
  /* src: url('/fonts/departureMono-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'IBM Plex Mono';
  /* src: url('/fonts/IBM-Plex-Mono.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'IBM Plex Mono Fallback';
  /* src: url('/fonts/IBM-Plex-Mono-Fallback.woff2') format('woff'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  /* src: url('/fonts/Inter.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@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)

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

```
@keyframes float-btn-spring { ... }
@keyframes build-carousel-slide { ... }
@keyframes testi-fade-in { ... }
@keyframes testi-fade-out { ... }
@keyframes wordsearch-stroke-cw { ... }
@keyframes wordsearch-stroke-ccw { ... }
@keyframes wordsearch-letter-lvl1 { ... }
@keyframes wordsearch-letter-lvl2 { ... }
@keyframes wordsearch-letter-lvl1-out { ... }
@keyframes wordsearch-letter-lvl2-out { ... }
@keyframes task-row-in { ... }
@keyframes task-row-out { ... }
@keyframes hero-enter { ... }
@keyframes scroll-arrow { ... }
@keyframes notif-slide { ... }
@keyframes notif-exit { ... }
@keyframes notif-pop-exit { ... }
@keyframes notif-pop { ... }
@keyframes notif-wheel-in { ... }
@keyframes notif-wheel-out { ... }
@keyframes logo-slide { ... }
@keyframes badge-enter { ... }
@keyframes badge-blink { ... }
@keyframes orch-caret-blink { ... }
@keyframes orch-section-fade-in { ... }
@keyframes orch-block-reveal { ... }
@keyframes shimmer { ... }
@keyframes pui-fade-in { ... }
@keyframes draw-path { ... }
@keyframes pui4-user-row-enter { ... }
@keyframes mm-bg-in { ... }
@keyframes mm-bg-out { ... }
@keyframes mm-content-out { ... }
@keyframes mm-link-in { ... }
@keyframes mm-footer-in { ... }
@keyframes gtm-icon-pop { ... }
```

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

```css
@keyframes float-btn-spring{0%{opacity:0;transform:translateY(100px)}60%{opacity:1;transform:translateY(-20px)}
@keyframes build-carousel-slide{0%{transform:translate(0)}
@keyframes testi-fade-in{0%{opacity:0;filter:blur(6px)}60%{filter:blur()}
@keyframes testi-fade-out{0%{opacity:1;filter:blur()}
@keyframes wordsearch-stroke-cw{0%{stroke-dashoffset:1000px}
@keyframes wordsearch-stroke-ccw{0%{stroke-dashoffset:-1000px}
@keyframes wordsearch-letter-lvl1{0%{color:#26232380;text-shadow:0 1px #ffffff4d,0 -1px 1px #0000001f}
@keyframes wordsearch-letter-lvl2{0%{color:#26232380;text-shadow:0 1px #ffffff4d,0 -1px 1px #0000001f}
@keyframes wordsearch-letter-lvl1-out{0%{color:#262323e6;text-shadow:0 1px #ffffff59,0 -1px 2px #0000002e}
@keyframes wordsearch-letter-lvl2-out{0%{color:#262323b3;text-shadow:0 1px #ffffff59,0 -1px 2px #0000002e}
@keyframes task-row-in{0%{opacity:0;filter:blur(3px);transform:translateY(8px)}60%{opacity:1}
@keyframes task-row-out{0%{opacity:1;filter:blur();transform:translateY(0)}
@keyframes hero-enter{to{opacity:1;transform:none}}
@keyframes scroll-arrow{0%,to{opacity:.4;transform:translateY(-3px)}50%{opacity:1;transform:translateY(3px)}}
@keyframes notif-slide{0%{grid-template-rows:0fr;margin-top:0}
@keyframes notif-exit{0%{grid-template-rows:1fr;margin-top:8px}
@keyframes notif-pop-exit{0%{opacity:1;transform:scale(1)translateY(0)}
@keyframes notif-pop{0%{opacity:0;transform:scale(.88)translateY(10px)}
@keyframes notif-wheel-in{0%{opacity:0;filter:blur(6px);transform:translateY(34px)scale(.98)}
@keyframes notif-wheel-out{0%{opacity:1;filter:blur();transform:translateY(0)scale(1)}
@keyframes logo-slide{0%{transform:translate(0)}
@keyframes badge-enter{0%{opacity:0;transform:translateY(6px)scale(.9)}
@keyframes badge-blink{0%,to{opacity:1}50%{opacity:.15}}
@keyframes orch-caret-blink{0%,50%{opacity:1}51%,to{opacity:0}}
@keyframes orch-section-fade-in{0%{opacity:0;transform:translateY(8px)}
@keyframes orch-block-reveal{0%{opacity:0;transform:translateY(6px)}
@keyframes shimmer{0%{background-position:0 0}80%{background-position:100% 0}
@keyframes pui-fade-in{0%{opacity:0}
@keyframes draw-path{0%{stroke-dashoffset:1px}
@keyframes pui4-user-row-enter{0%{opacity:0;transform:translateY(8px)}
@keyframes mm-bg-in{0%{clip-path:circle(0% at 100% 0);opacity:0}
@keyframes mm-bg-out{0%{opacity:1}
@keyframes mm-content-out{0%{opacity:1}
@keyframes mm-link-in{0%{opacity:0}
@keyframes mm-footer-in{0%{opacity:0;transform:translateY(10px)}
@keyframes gtm-icon-pop{0%{opacity:.4;transform:scale(.6)}60%{opacity:1;transform:scale(1.15)}
```
</details>

### Brand Gradient Palette

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

```css
/* Gradient 1 */
background: radial-gradient(farthest-corner circle at var(--gradient-x);

/* Gradient 2 */
background: linear-gradient(180deg, rgba(22, 69, 61, var(--notif-glass-top-alpha);

/* Gradient 3 */
background: linear-gradient(115deg,#0000 20%,#ff6ec44d 30%,#7873f54d 38%,#4cc9f04d 46%,#80ed994d 54%,#f9c74f4d 62%,#f4845f4d 70%,#0000 80%);

/* Gradient 4 */
background: radial-gradient(circle 140px at calc(var(--hover-tilt-x,.5);

```

### 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-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-space-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-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-text-shadow-color:initial;--tw-text-shadow-alpha:100%}}}@layer theme{:r
```

> **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 2931 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**34 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`348px` · `380px` · `476px` · `499px` · `500px` · `501px` · `600px` · `639px` · `640px` · `676px` · `767px` · `768px` · `850px` · `900px` … (+20 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×1504 · `26px`×822 · `15px`×131 · `10px`×127 · `12px`×74 · `8px`×58 · `7px`×42 · `13.8px`×33

**Radius scale** (× = paint count): `0.3px`×198 · `4px`×56 · `8px`×51 · `6.629px`×16 · `6px`×16 · `6.63px`×14 · `3px`×14 · `12px`×12

**Weights** (× = paint count): `400`×2582 · `460`×172 · `500`×112 · `430`×30 · `410`×16 · `530`×8 · `440`×8 · `600`×2

**Layout gaps** (× = paint count): `6px`×26 · `4px`×23 · `8px`×18 · `8.287px`×16 · `10px`×14 · `6.7px`×8 · `1px`×8 · `3px`×7

**Elevation (real shadows)**:
```css
rgb(255, 255, 255) 0px 0px 0px 0.829px inset, rgba(0, 0, 0, 0.08) 0px 0px 0px 0.829px, rgba(0, 0, 0, 0.06) 0px 4px 12px 0px
rgba(0, 0, 0, 0.12) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.24) 0px 1px 1px 0px inset
rgba(0, 0, 0, 0.08) 0px 0px 0px 0.67px, rgba(0, 0, 0, 0.02) 0px 0px 13.4px 0px, rgba(0, 0, 0, 0.01) 0px 13.4px 13.4px 0px, rgba(0, 0, 0, 0.02) 0px 4px 6px 0px, rgba(0, 0, 0, 0.03) 0px 2px 5.4px 0px, rgb(255, 255, 255) 0px 0px 0px 0.67px inset
rgba(255, 255, 255, 0.15) 0px 0.334px 0.669px 0px inset, rgba(0, 0, 0, 0.24) 0px 0.334px 0.4px 0px, rgba(255, 255, 255, 0.1) 0px 0.669px 0.669px 0px, rgba(0, 0, 0, 0.2) 0px 0px 1.338px 0px
```

### 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:var(--background); color:var(--foreground); font-family:var(--font-neoris), sans-serif }
nav { gap:calc(var(--spacing) * 3) }
h1 { font-size:46px }
h1 { font-weight:var(--font-weight-normal) }
h1 { color:#fff; background:linear-gradient(#fff 0%,#ffffffe6 100%); background-color:initial }
h2 { font-size:28px }
h2 { font-weight:var(--font-weight-normal) }
@media (min-width: 767px) h2 { font-size:32px }
@media (min-width: 1000px) h2 { font-size:40px }
button { border-radius:8px }
card { border-radius:7.142px }
card { background-color:#f5f5f2 }
```

> 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://cofounder.co/ | 2026-06-14T15:18:39.003Z*
*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.*

<!-- consistency-lint: 1 issue(s) — font-weight 0 (garbage computed read) -->