linear.app

DESIGN.md

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

---
version: alpha
name: linear.app
description: "Dark-canvas product system built on #08090a with #5e6ad2 as the single brand accent. Type anchored in Inter Variable at 64px / weight 510. Extracted automatically from https://linear.app/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  linear.app is built on a near-black canvas (rgb(8, 9, 10)).
  The system uses rgb(94, 106, 210) as the accent for primary actions and brand signals.
  Fully-rounded CTAs (9999px) signal a friendly, tactile interaction model alongside Inter Variable as the primary typeface.
  A layered elevation system (12 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 82 keyframe animations plus transition-driven interactions.

colors:
  canvas: "#08090a"
  surface-2: "#23252a"
  ink: "#f7f8f8"
  ink-muted: "#8a8f98"
  ink-subtle: "rgba(138, 143, 152, 0.62)"
  primary: "#5e6ad2"
  on-primary: "#111111"
  primary-hover: "#828fff"
  hairline: "rgba(255, 255, 255, 0.08)"
  primary-focus: "#5e69d1"

typography:
  display-xl:
    fontFamily: "Inter Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  display-lg:
    fontFamily: "Inter Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 64px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.408px
  display-md:
    fontFamily: "Inter Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 590
    lineHeight: 1.33
    letterSpacing: -0.24px
  headline:
    fontFamily: "Inter Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 590
    lineHeight: 1.5
    letterSpacing: 0
  body:
    fontFamily: "Inter Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 510
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "Inter Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  button:
    fontFamily: "Inter Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 13.3333px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0
  mono:
    fontFamily: "Berkeley Mono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0

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

spacing:
  xxs: 2px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 56px

components:
  button-pill:
    backgroundColor: "transparent"
    textColor: "{colors.ink-subtle}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 0px 12px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 0px 4px
  button-icon-button:
    backgroundColor: "transparent"
    textColor: "#62666d"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
  card-standard-card:
    backgroundColor: "#0f1011"
    typography: "{typography.headline}"
    rounded: "{rounded.sm}"
    padding: 0px 24px 28px
  input-text-input:
    backgroundColor: "{colors.hairline}"
    textColor: "#d0d6e0"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 12px 14px
  code-block-inline-code--pre:
    backgroundColor: "{colors.hairline}"
    textColor: "#d0d6e0"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 1.225px 6px

extracted_at: "2026-06-17T22:17:11.365Z"
completeness: 91
scoreVersion: "v2"

---

# Design System — linear.app
> Extracted automatically by Prism from https://linear.app
> Date: 2026-06-17
> 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**: moderate  |  **Motion**: expressive  |  **Weight**: medium  |  **Aesthetic**: dark-premium

| Dimension | Value | Signal |
|---|---|---|
| Canvas | dark | `#08090a` |
| Type posture | sans-led (Inter Variable) | "system for teams and agents" |
| Color assertion | dual-accent | #5e6ad2 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 82 keyframes, 13 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `dark-canvas · sans-display · dual-accent · soft-pill · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(8, 9, 10)` is the page background. Every component composits against this.
> - **Accent**: `rgb(94, 106, 210)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (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

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

linear.app commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is an inky black surface (`#08090a`) 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 **Inter Variable**, deployed with OpenType features enabled globally (`"cv01", "ss03"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. The weight scale rejects the standard 100/200/.../900 ladder in favor of custom values (max **680** in this system) — a deliberate signal that this design system is precisely tuned, not assembled from defaults. Negative letter-spacing at display sizes (-1.408px at 64px) compresses headlines into engineered blocks, dense and authoritative. 

Body text reads in Off-White (`#f7f8f8`) (contrast ratio 12.1:1, well above WCAG AA). **Indigo** (`#5e6ad2`) 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 (12 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Pure Black (`#08090a`)
- Primary typeface: Inter Variable
- Primary text: Off-White (`#f7f8f8`)
- Accent: Indigo (`#5e6ad2`)
- Display: 64px weight 510, letter-spacing -1.408px
- Shadow system: 12 distinct elevation levels
- Custom fonts loaded: Inter Variable, Berkeley Mono

## 2. Color Palette & Roles

### Background & Surface
- **Bg Primary** (`#08090a`): Page background (primary)
- **Bg Level 3** (`#191a1b`): Surface / elevated background (CSS var)
- **Bg Marketing** (`#010102`): Surface / elevated background (CSS var)
- **Bg Panel** (`#0f1011`): Surface / elevated background (CSS var)
- **Bg Tint** (`#141516`): Surface / elevated background (CSS var)

### Text & Content
- **Text Primary** (`#f7f8f8`): Primary body text
- **Text Tertiary** (`#8a8f98`): Text (CSS var)
- **Text Secondary** (`#d0d6e0`): Text (CSS var)
- **Grey** (`#9c9da1`): Secondary text
- **Yellow** (`#f0bf00`): Secondary text

### Accent & Interactive
- **Accent Hover** (`#828fff`): Accent / interactive (CSS var)
- **Indigo** (`#5e6ad2`): Accent / interactive (CSS var)
- **Accent** (`#7170ff`): Accent / interactive (CSS var)
- **Accent Tint** (`#18182f`): Accent / interactive (CSS var)
- **Link Hover** (`#ffffff`): Accent / interactive (CSS var)
- **Teal** (`#00b8cc`): Interactive / accent
- **Red** (`#eb5757`): Interactive / accent

### Border & Divider
- **Border Secondary** (`#34343a`): Border (CSS var)
- **Border Tertiary** (`#3e3e44`): Border (CSS var)
- **Border Primary** (`#23252a`): Border (CSS var)
- **Near-Black** (`#101112`): Borders / dividers
- **Near-Black** (`#121414`): Borders / dividers
- **Near-Black** (`#24282c`): Borders / dividers

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

- `#000000` — Black
- `#e5e5e6` — Whitesmoke
- `#090a0b` — Pure Black
- `#e2e4e6` — Whitesmoke
- `#585a5c` — Slate Grey
- `#62666d` — Text Quaternary
- `#e2e4e7` — Whitesmoke
- `#121314` — Near-Black
- `#6b6b6b` — Slate Grey
- `#161718` — Near-Black
- `#313234` — Charcoal
- `#1c1c1d` — Near-Black
- `#27a644` — Green
- `#f34f52` — Warm Rose
- `#2e2e32` — Charcoal
- `#02b8cc` — #02b8cc
- `#323334` — Charcoal
- `#383b3f` — Charcoal
- `#e4e5e9` — Whitesmoke
- `#8b5cf6` — #8b5cf6
- `#6366f1` — Brand Indigo
- `#10b981` — Emerald
- `#f2c94c` — #f2c94c
- `#06b6d4` — Sky Bright
- `#232534` — Charcoal
- `#6d78d5` — Indigo
- `#d4a600` — #d4a600
- `#5b5c5a` — Slate Grey
- `#e3484e` — Vermillion
- `#993b3b` — #993b3b
- `#008d2c` — Forest Green
- `#21b3ff` — Sky Bright
- *…+110 more in `raw-css.json` (`desktop.allColors`).*

### Gradients & Decorative Fills

- `linear-gradient(rgba(11, 11, 11, 0.8) 0px, oklab(0.149576 0.00000680983 0.00000298768 / 0.761905) 10…` — (header)

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--btn-overlay-shadow-hover`: `none`
- `--shadow-low`: `0px 2px 4px rgba(0,0,0,0.1)`
- `--btn-overlay-shadow`: `none`
- `--shadow-medium`: `0px 4px 24px rgba(0,0,0,0.2)`

**Font Size Token**
- `--font-size-title1`: `2.25rem`
- `--diff-view-editor-font-size`: ``
- `--font-size-miniPlus`: `0.75rem`
- `--font-size-microPlus`: `0.6875rem`

**Spacing Token**
- `--title-3-letter-spacing`: `-0.012em`
- `--text-regular-letter-spacing`: `-0.011em`
- `--editor-block-spacing-small`: `calc(0.375 * 1rem)`
- `--page-padding-block`: `64px`

**Text Color**
- `--color-text-tertiary`: `#8a8f98`
- `--color-text-primary`: `#f7f8f8`
- `--color-text-secondary`: `#d0d6e0`
- `--color-text-quaternary`: `#62666d`

**Motion Token**
- `--speed-quickTransition`: `0.1s`
- `--speed-regularTransition`: `0.25s`

**Border**
- `--color-border-translucent`: `rgba(255,255,255,0.05)`
- `--color-border-secondary`: `#34343a`
- `--color-border-tertiary`: `#3e3e44`
- `--color-border-primary`: `#23252a`

**Background**
- `--color-bg-level-3`: `#191a1b`
- `--color-bg-marketing`: `#010102`
- `--color-bg-panel`: `#0f1011`
- `--color-bg-tint`: `#141516`

**Border Radius Token**
- `--radius-rounded`: `9999px`
- `--radius-circle`: `50%`
- `--radius-8`: `8px`
- `--radius-12`: `12px`

**Primary Brand Color**
- `--color-accent-hover`: `#828fff`
- `--color-brand-bg`: `#5e6ad2`
- `--color-accent`: `#7170ff`
- `--color-accent-tint`: `#18182f`

**Success**
- `--color-green`: `#27a644`

**Font Weight Token**
- `--font-weight-medium`: `510`
- `--font-weight-normal`: `400`
- `--font-weight-bold`: `680`
- `--dp-font-weight-medium`: `500`

**Font Family Token**
- `--diff-view-editor-font-family`: ``

**Error / Destructive**
- `--color-red`: `#eb5757`

**Warning**
- `--color-yellow`: `#f0bf00`

**Other tokens**
- `--font-variations`: `"opsz" auto`
- `--text-micro-size`: `0.75rem`
- `--text-regular-size`: `0.9375rem`
- `--color-white`: `#fff`
- `--text-small-line-height`: `calc(21 / 14)`
- `--text-small-size`: `0.875rem`
- `--editor-text-color`: `#e4e5e9`
- `--action-menu-item-bg-focus`: ``

## 3. Typography Rules

### Font Families
- **Primary**: `Inter Variable`
- **Secondary**: `Berkeley Mono`

### Custom Fonts Loaded
- **Inter Variable** weight 100 900
- **Berkeley Mono** weight 100 900

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Inter Variable | 72px | 510 | 1 | -1.584px | Main headline (h2) |
| Section Heading | Inter Variable | 64px | 510 | 1 | -1.408px | Section titles (h1) |
| Sub-heading | Inter Variable | 20px | 590 | 1.33 | -0.24px | Third-level heading (h3) |
| Label Heading | Inter Variable | 16px | 590 | 1.5 | normal | Small heading (H4) |
| Body | Inter Variable | 16px | 400 | 1.5 | normal | Standard reading text |
| Link | Inter Variable | 14px | 510 | 1.5 | normal | Link (14px) — Decoration: none |
| Input | Berkeley Mono | 14px | 400 | 1.71 | normal | Form input (14px) |
| Button | Inter Variable | 13.3333px | 400 | normal | normal | Button label (13.3333px) |
| Button | Inter Variable | 13px | 400 | 1.5 | normal | Button label (13px) |
| Button | Inter Variable | 13px | 510 | normal | normal | Button label (13px) |
| Caption / Badge | Inter Variable | 12px | 400 | 1.4 | normal | small text (12px) |

### Font Weight Scale

CSS custom properties define 6 explicit weight steps:
- `--font-weight-light`: `300` — Light
- `--font-weight-normal`: `400` — Regular
- `--dp-font-weight-medium`: `500` — Medium
- `--font-weight-medium`: `510` — Medium (custom, ~500)
- `--font-weight-semibold`: `590` — SemiBold (custom, ~600)
- `--font-weight-bold`: `680` — Bold (custom, ~700) — declared in CSS; heaviest weight actually painted is `590`

### Full Font Size Scale

Sizes detected in the design (descending): `64px`, `48px`, `24px`, `20px`, `18px`, `17px`, `16px`, `15px`, `14px`, `13.33px`, `13px`, `12.25px`, `12px`, `11px`, `10px`

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

### OpenType & Variable Font Features

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

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

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

## 4. Component Stylings

### Buttons

**Pill**
- Background: `transparent`
- Text: `#8a8f98` `{colors.ink-subtle}`
- Padding: 0px 12px
- Radius: 9999px
- Font: 13px weight 400
- Use: Status pills, tags, chips
- Hover: backgroundColor: `#ffffff`, color: `#dee0e2`, border: `0px none rgb(222, 224, 226)`
- Focus: backgroundColor: `rgba(255, 255, 255, 0.08)`, color: `rgb(247, 248, 248)`, border: `0px none rgb(247, 248, 248)`

**Ghost**
- Background: `transparent`
- Text: `#ffffff` `{colors.hairline}`
- Padding: 0px 4px
- Radius: 4px
- Font: 13.3333px weight 400
- Use: Subtle action, toolbar, nav button
- Hover: backgroundColor: `#ffffff`, color: `#dee0e2`, border: `0px none rgb(222, 224, 226)`
- Focus: backgroundColor: `rgba(255, 255, 255, 0.08)`, color: `rgb(247, 248, 248)`, border: `0px none rgb(247, 248, 248)`

**Icon Button**
- Background: `transparent`
- Text: `#62666d`
- Padding: 0px
- Radius: 9999px
- Font: 13.3333px weight 400
- Use: Toolbar/UI icons
- Hover: backgroundColor: `#ffffff`, color: `#dee0e2`, border: `0px none rgb(222, 224, 226)`
- Focus: backgroundColor: `rgba(255, 255, 255, 0.08)`, color: `rgb(247, 248, 248)`, border: `0px none rgb(247, 248, 248)`

**Icon Button**
- Background: `rgba(255, 255, 255, 0.02)` `{colors.hairline}`
- Text: `#e2e4e7`
- Padding: 0px
- Radius: 9999px
- Border: 1px solid rgb(36, 40, 44)
- Font: 13.3333px weight 400
- Use: Toolbar/UI icons
- Hover: backgroundColor: `#ffffff`, color: `#dee0e2`, border: `0px none rgb(222, 224, 226)`
- Focus: backgroundColor: `rgba(255, 255, 255, 0.08)`, color: `rgb(247, 248, 248)`, border: `0px none rgb(247, 248, 248)`

**Ghost**
- Background: `transparent`
- Text: `#d0d6e0`
- Padding: 0px 6px
- Radius: 6px
- Font: 13px weight 510
- Use: Subtle action, toolbar, nav button
- Hover: backgroundColor: `#ffffff`, color: `#dee0e2`, border: `0px none rgb(222, 224, 226)`
- Focus: backgroundColor: `rgba(255, 255, 255, 0.08)`, color: `rgb(247, 248, 248)`, border: `0px none rgb(247, 248, 248)`

**Primary Brand**
- Background: `#5e6ad2` `{colors.primary}`
- Text: `#ffffff` `{colors.hairline}`
- Padding: 0px 16px
- Radius: 0px
- Font: 14px weight 510
- Use: Primary CTA / brand action
- Hover: backgroundColor: `#ffffff`, color: `#dee0e2`, border: `0px none rgb(222, 224, 226)`
- Focus: backgroundColor: `rgba(255, 255, 255, 0.08)`, color: `rgb(247, 248, 248)`, border: `0px none rgb(247, 248, 248)`

**Pill**
- Background: `#e5e5e6`
- Text: `#08090a` `{colors.canvas}`
- Padding: 0px 12px
- Radius: 9999px
- Border: 1px solid rgb(229, 229, 230)
- Shadow: `rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0...`
- Font: 13px weight 510
- Use: Status pills, tags, chips
- Hover: backgroundColor: `#ffffff`, color: `#dee0e2`, border: `0px none rgb(222, 224, 226)`
- Focus: backgroundColor: `rgba(255, 255, 255, 0.08)`, color: `rgb(247, 248, 248)`, border: `0px none rgb(247, 248, 248)`

### Cards & Containers

**Standard Card**
- Background: `#0f1011`
- Padding: 0px 24px 28px
- Radius: 8px
- Border: 1px solid rgba(255, 255, 255, 0.05)
- Use: Content containers, listing items

### Inputs & Forms

**Text Input**
- Background: `rgba(255, 255, 255, 0.02)` `{colors.hairline}`
- Text: `#d0d6e0`
- Padding: 12px 14px
- Radius: 6px
- Border: 1px solid rgba(255, 255, 255, 0.08)
- Shadow: `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
- Font: 13.3333px weight 400
- Use: Text fields, search inputs

### Code Blocks

**Inline Code / Pre**
- Background: `rgba(255, 255, 255, 0.05)` `{colors.hairline}`
- Text: `#d0d6e0`
- Padding: 1.225px 6px
- Radius: 4px
- Border: 1px solid rgba(255, 255, 255, 0.08)
- Font: 12.25px weight 400 — "Berkeley Mono"
- Use: Code samples, CLI commands, syntax highlighting blocks


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Button**:
  - **hover:** bg transparent → rgba(255, 255, 255, 0.06), text #8a8f98 → #dee0e2, border changes
  - **focus:** bg transparent → rgba(255, 255, 255, 0.08), text #8a8f98 → #f7f8f8, border changes
  - **disabled:** bg transparent → rgba(255, 255, 255, 0.03), text #8a8f98 → #f7f8f8, border changes

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

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(138, 143, 152)"
    hover:
      bg: "rgba(255, 255, 255, 0.06)"
      fg: "rgb(222, 224, 226)"
    focus:
      bg: "rgba(255, 255, 255, 0.08)"
      fg: "rgb(247, 248, 248)"
    disabled:
      bg: "rgba(255, 255, 255, 0.03)"
      fg: "rgb(247, 248, 248)"
      border: "1px solid rgba(255, 255, 255, 0.08)"
  input:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(247, 248, 248)"
  link:
    default:
      bg: "rgb(94, 106, 210)"
      fg: "rgb(255, 255, 255)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(247, 248, 248)"
  badge:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(138, 143, 152)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(247, 248, 248)"
```

**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
- **4 shape(s)** in this system: `Pill`, `Ghost`, `Icon Button`, `Primary Brand`
- **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

### Inputs & Forms
- **1 shape(s)** in this system: `Text Input`
- **DO NOT introduce new inputs & forms variants** without justification

### Code Blocks
- **1 shape(s)** in this system: `Inline Code / Pre`
- **DO NOT introduce new code blocks variants** without justification

## 5. Layout Principles

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

### Grid
Flexbox column

### Max Width
100%

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 6px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 56px |

### 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 | 32px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `9999px` |
| Cards & Containers | `8px` |
| Inputs & Forms | `6px` |
| Code Blocks | `4px` |
| Page Body | `0px` |
| Navigation | `0px` |
| Primary Input | `6px` |

**Shape Personality**: Sharp + Pill Contrast — Angular precision with pill-shaped accents (status badges, tags). Creates strong visual hierarchy.

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


## 5b. Spacing Rhythm Names

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

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

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `56px` | 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** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `6px` | Icon-text gap, tag inner padding |

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

## 5c. Widget & Structure Library

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

**5/8 structural patterns detected.**

### Hero Pattern

- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "The product development system for teams and agentsThe product developmentsystem for teams and agent" — 64px left-aligned
- **Subheading:** "Purpose-built for planning and building products. Designed for the AI era."
- **Media:** present, positioned top
- **CTAs:** 1 (primary: "Faster app launch")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Place media top of text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** logo-left-links-right — Logo at far left, primary navigation links right-aligned
- **Height:** 72px
- **Logo:** ✓ present
- **Nav links:** 5 primary items
- **CTAs in nav:** 1
- **Clone instruction:** Build a static logo left links right navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

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

### Testimonial Pattern

- **Count:** 9 testimonial blocks
- **Layout:** grid
- **Avg quote length:** 154 chars (medium quote)
- **Includes:** ✗ no avatars | ✗ no logos | ✗ no ratings
- **Clone instruction:** Build a grid of 9 testimonials.   

### Footer Pattern

- **Columns:** 5
- **Links:** 39 total
- **Height:** 494px
- **Includes:** ✗ no newsletter | ✓ social icons |  
- **Clone instruction:** Build a 5-column footer with ~8 links per column, social media links.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.01) 0px 5px 2px 0px`,<br>`rgba(0, 0, 0, 0.04) 0px 3px 2px 0px`,<br>`rgba(0, 0, 0, 0.07) 0px 1px 1px 0px`,<br>`rgba(0, 0, 0, 0.08) 0px 0px 1px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.1) 0px 0px 0px 2px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.2) 0px 0px 0px 1px` | Cards, elevated surfaces |
| Inset (Level 4) | <br>`rgb(35, 37, 42) 0px 0px 0px 1px inset` | 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 |
|--------------|-------|---------------|
| `--ease-in-out-quart` | `cubic-bezier(0.77,0,0.175,1)` | Quart In-Out — Precise Symmetric |
| `--ease-in-out-circ` | `cubic-bezier(0.785,0.135,0.15,0.86)` | Ease Out — Decelerating |
| `--ease-out-circ` | `cubic-bezier(0.075,0.82,0.165,1)` | Circ Out — Fast Exit |
| `--ease-out-quint` | `cubic-bezier(0.23,1,0.32,1)` | Quint Out — Strong Ease |
| `--ease-in-quint` | `cubic-bezier(0.755,0.05,0.855,0.06)` | Ease In — Accelerating |
| `--ease-out-expo` | `cubic-bezier(0.19,1,0.22,1)` | Expo Out — Snappy Deceleration |
| `--ease-in-out-quad` | `cubic-bezier(0.455,0.03,0.515,0.955)` | Quad In-Out — Balanced |
| `--ease-in-expo` | `cubic-bezier(0.95,0.05,0.795,0.035)` | Expo In — Maximum Acceleration |
| `--ease-in-cubic` | `cubic-bezier(0.55,0.055,0.675,0.19)` | Cubic In — Slow Start |
| `--ease-out-quad` | `cubic-bezier(0.25,0.46,0.45,0.94)` | Quad Out — Smooth Ease |
| `--ease-out-quart` | `cubic-bezier(0.165,0.84,0.44,1)` | Quart Out — Energetic Ease |
| `--ease-in-circ` | `cubic-bezier(0.6,0.04,0.98,0.335)` | Custom Ease — Balanced |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--speed-highlightFadeOut` | `0.15s` | Fast |
| `--speed-quickTransition` | `0.1s` | Fast |
| `--speed-highlightFadeIn` | `0s` | Instant |
| `--speed-regularTransition` | `0.25s` | Normal |

### Copy-Paste Transition Snippets

**Border**
```css
transition: border-color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
```

**Color / Background**
```css
transition: color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
```

**Border**
```css
transition: border 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94), color...;
```

**All Props**
```css
transition: 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `grid-dot-0-0-upDown` | Fade | opacity | UI transition |
| `grid-dot-0-0-pong` | Fade | opacity | UI transition |
| `grid-dot-0-0-agent` | Fade | opacity | UI transition |
| `swipe-out-left` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `swipe-out-right` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `swipe-out-up` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `swipe-out-down` | Fade + Move | transform, opacity | Swipe gesture dismiss |
| `sonner-fade-in` | Fade + Move | opacity, transform | Element entrance |
| `sonner-fade-out` | Fade + Move | opacity, transform | Element exit |
| `sonner-spin` | Fade | opacity | Loading indicator |

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `160ms`)
- **Dominant Easing**: quad ease-out (smooth)
- **Animation Library**: 10 unique animations (82 total including variants)

> This design moves with balanced pacing timing using quad ease-out (smooth), creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use dark background (`#08090a`) as the foundation — this is a dark-mode-native design
- Use Inter Variable as the primary typeface — it defines the brand personality
- Keep font weights between 300-590 — the system uses a narrow weight range for subtle hierarchy (CSS declares up to 680, but the heaviest weight actually painted is 590)
- Use negative letter-spacing (-1.408px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use Indigo (`#5e6ad2`) as the primary accent — it's the brand's signature interactive color
- Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs
- Use 8px border-radius on cards — consistent with the grid card corners
- Style form inputs with a `1px solid rgba(255, 255, 255, 0.08)` border — use border-based inputs, not floating labels or underline-only
- Maintain nav height at 72px — consistent vertical space for the navigation bar
- Transition button background to Translucent White (6%) (`rgba(255, 255, 255, 0.06)`) on hover — this is the extracted interactive state
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Use a single primary CTA in the hero — the design intentionally avoids choice paralysis
- Each card includes a top image — imagery is part of the card identity, not optional
- Lay out testimonials in a grid (9+ items) — quantity signals scale and trust
- Build a content-dense footer (5 columns, ~39 links) — this site treats the footer as a sitemap, not an afterthought

### 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 reach for weight 700 (bold) or above — 590 is the heaviest weight this design paints
- 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 apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't use rectangular buttons for primary actions — the rounded pill shape is the brand standard
- Don't remove the input border — the border is the primary affordance indicator for form fields
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't use opacity or brightness filter for button hover — the design uses an explicit background color change
- 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(8, 9, 10)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(8, 9, 10)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(94, 106, 210)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(94, 106, 210)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Large | 640px | Expanded mobile layout |
| Tablet | 768px | Multi-column grids begin |
| Tablet | 1024px | Multi-column grids begin |
| Desktop | 1120px | Full feature layout |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `64px` | `38px` |
| heading | line-height | `64px` | `41.8px` |
| heading | letter-spacing | `-1.408px` | `-0.836px` |
| nav | flex-direction | `row` | `column` |
| nav | height | `72px` | `64px` |
| button | width | `73px` | `auto` |
| main | padding | `72px 0px 0px` | `64px 0px 0px` |

### Collapsing Strategy
- Headlines: 64px → 38px on mobile
- Container padding: 72px 0px 0px → 64px 0px 0px 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 12px 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** — 5 links visible on desktop, 1 on mobile (the rest hide behind a menu toggle).
- **Footer columns collapse:** 5 columns (desktop) → 2 columns (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.*

- **Glassmorphism** — 1 frosted/blur layer(s) (e.g. `blur(20px)`).
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Blend modes** — 8 mix-blend layer(s).
- **CSS-variable animations** (4) — animated custom properties.

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


## 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 |
|---|---|---|---|---|---|---|
| `grid-dot-agent` (20 variants) | 3.2s | `steps(1)` | — | infinite | 60× | ✅ |

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

| Property | Duration | Easing | Delay | Count |
|---|---|---|---|---|
| transform | 0.16s | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | — | 57× |
| filter | 0.16s | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | — | 43× |
| color | 0.1s | `ease` | — | 39× |
| opacity | 0.16s | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | — | 26× |
| background | 0.4s | `ease-out` | — | 25× |
| color | 0.16s | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | — | 13× |
| border | 0.16s | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | — | 10× |
| background-color | 0.16s | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | — | 10× |
| box-shadow | 0.16s | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | — | 10× |
| background | 0.1s | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | — | 9× |
| color | 0.1s | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | — | 8× |
| filter | 0.1s | `ease` | — | 4× |

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

- `div.IssueView_chatBoxContent__TzJbj.finished` — 5 children, **+100ms each** via `animation-delay` (0ms → 100ms → 200ms → 300ms → 400ms…)

**Scroll-reveal** *(heuristic — initial hidden state, not runtime-observed)* — 16 candidate element(s) start hidden and animate in on scroll (opacity0+transition).
  - e.g. `span.Pillar_ingredientPlus___kdCK` → initial opacity 0, transform `matrix(0, 0, 0, 0, 0, 0)`, transition `opacity 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.16s cubic-bezier`. Build a fade/translate reveal-on-scroll for below-fold bands.

> **Motion coverage** (measured on 4000 sampled elements; scroll-reveal is heuristic): 20 animation signatures, 16 transition profiles, 1 staggered sequence, 16 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://linear.app/static/og/homepage.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: 1.79:1 (landscape (16:9-ish))
- Rendered size: 1440×804px
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 2 (100%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 0 (0%)

**Media Format Mix:**
- SVG: 5 (icons, illustrations, decorative geometry)

**Average rendered image size:** 1428×786px
**Above-fold image count:** 2 / 2

**Decorative Patterns Detected:**
- 1 multi-stop linear gradient (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 3 radial gradients — circular color blooms used for spotlight/glow effects
- 5 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
- 1 background pattern (non-photo url() backgrounds) — textures/illustrations as backdrops
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic
- **Noise/grain texture** detected — adds tactile film grain to flat backgrounds

**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: Pure Black (`#08090a`)
- Primary text: Off-White (`#f7f8f8`)
- Accent: Indigo (`#5e6ad2`)
- Border: Translucent White (8%) (`rgba(255, 255, 255, 0.08)`)
- Font: Inter Variable
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure Black background (#08090a). Headline at 64px Inter Variable weight 510, line-height 1, letter-spacing -1.408px, color #f7f8f8."
- "Create the primary CTA button: `#5e6ad2` background, `#8a8f98` text, 9999px border-radius, 0px 12px padding, 590 weight, Inter Variable font."
- "Design a card on `#0f1011` background. Border: 1px solid rgba(255, 255, 255, 0.05). Radius: 8px. Shadow: none. Padding: 0px 24px 28px."
- "Build navigation: static on `#08090a`. Inter Variable 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Pure Black (`#08090a`) — every component is composited against this exact base.
2. **Typography**: All type in Inter Variable, weight range 300–590. Never exceed 590 — heavier weights break the brand's tonal restraint.
3. **Accent**: Indigo (`#5e6ad2`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Focus**: Render focus rings in Indigo (`#5e69d1`) — never hide focus outlines. The ring color is distinct from the accent to avoid ambiguity.
5. **Motion**: All transitions use `cubic-bezier(0.25,0.46,0.45,0.94)`. Timing: 100ms for micro-interactions, 150ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
6. **Shape**: CTAs at `9999px`, cards at `8px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
7. **Spacing**: Use the `--ca-space-*` token scale (6px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
8. **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-canvas: #08090a;
  --ca-surface-2: #23252a;
  --ca-ink: #f7f8f8;
  --ca-ink-subtle: #8a8f98;
  --ca-primary: #5e6ad2;
  --ca-on-primary: #111111;
  --ca-primary-hover: #828fff;
  --ca-hairline: #ffffff;
  --ca-primary-focus: #5e69d1;
}

/* Typography */
:root {
  --ca-font-primary: "Inter Variable", system-ui, sans-serif;
  --ca-text-display: 72px;
  --ca-text-heading: 64px;
  --ca-text-body: 16px;
  --ca-text-small: 14px;
  --ca-text-caption: 12px;
  --ca-text-button: 13.3333px;
  --ca-text-mono: 14px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 6px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 56px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 32px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-speed-highlightFadeOut: 0.15s;
  --ca-ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
  --ca-ease-in-out-circ: cubic-bezier(0.785,0.135,0.15,0.86);
  --ca-speed-quickTransition: 0.1s;
  --ca-ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
  --ca-ease-out-quint: cubic-bezier(0.23,1,0.32,1);
  --ca-ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
  --ca-speed-highlightFadeIn: 0s;
  --ca-ease-out-expo: cubic-bezier(0.19,1,0.22,1);
  --ca-speed-regularTransition: 0.25s;
}
```


## 13. Page Structure Skeleton

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

```yaml
page-skeleton:
  - section: hero
    tag: div
    height: 10810px
    width: full-bleed
    layout: block
    children: 7
    bg: "rgb(8, 9, 10)"
    tone: dark
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: feature-section
    tag: main
    height: 10316px
    width: full-bleed
    layout: flex-column justify=normal
    children: 2
    vertical-padding: ~36px
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "72px 0px 0px"
  - section: feature-section
    tag: div
    height: 10810px
    width: full-bleed
    layout: flex-column justify=normal
    children: 3
    vertical-padding: ~36px
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: feature-section
    tag: div
    height: 1024px
    width: 1344px
    layout: block
    children: 9
  - section: feature-section
    tag: div
    height: 185px
    width: 1344px
    layout: block
    children: 4
    padding: "0px 32px"
  - section: testimonials
    tag: div
    height: 768px
    width: full-bleed
    layout: block
    children: 4
    vertical-padding: ~24px
    padding: "0px 0px 48px"
  - section: navigation
    tag: nav
    height: 704px
    width: 232px
    layout: block
    children: 3
    padding: "8px 14px 14px 8px"
  - section: sidebar
    tag: div
    height: 702px
    width: 1070px
    layout: grid: 2-col gap=normal
    children: 2
  - section: unknown
    tag: h2
    classes: ["exSLMF"]
    height: 144px
    width: 1250px
    layout: block
    children: 1
    padding: "0px 32px"
  - section: card-grid
    tag: div
    classes: ["hide-laptop"]
    height: 468px
    width: 1344px
    layout: grid: 12-col gap=0px
    children: 3
    padding: "0px 32px"
  - section: feature-section
    tag: section
    height: 1207px
    width: 1344px
    layout: block
    children: 3
    vertical-padding: ~112px (airy)
    padding: "96px 0px 128px"
  - section: content-section
    tag: div
    height: 626px
    width: full-bleed
    layout: block
    children: 2
    padding: "8px"
  - section: feature-section
    tag: section
    height: 1199px
    width: 1344px
    layout: block
    children: 3
    vertical-padding: ~112px (airy)
    padding: "96px 0px 128px"
  - section: pricing
    tag: div
    height: 618px
    width: 1344px
    layout: block
    children: 1
    padding: "8px"
  - section: feature-section
    tag: section
    height: 1155px
    width: 1344px
    layout: block
    children: 3
    vertical-padding: ~112px (airy)
    padding: "96px 0px 128px"
  - section: content-section
    tag: div
    height: 546px
    width: 1344px
    layout: block
    children: 1
    padding: "8px"
  - section: testimonials
    tag: section
    height: 1073px
    width: 1344px
    layout: block
    children: 2
    vertical-padding: ~112px (airy)
    padding: "96px 0px 128px"
  - section: testimonials
    tag: div
    classes: ["hide-mobile"]
    height: 584px
    width: 1344px
    layout: block
    children: 1
    padding: "8px"
  - section: feature-section
    tag: section
    height: 1179px
    width: 1344px
    layout: block
    children: 3
    vertical-padding: ~112px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "96px 0px 128px"
  - section: unknown
    tag: div
    height: 598px
    width: full-bleed
    layout: block
    children: 2
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "8px"
  - section: feature-section
    tag: div
    classes: ["hide-mobile"]
    height: 422px
    width: 1344px
    layout: block
    children: 5
  - section: content-section
    tag: section
    classes: ["hide-laptop"]
    height: 564px
    width: 1344px
    layout: block
    children: 3
  - section: footer
    tag: section
    height: 228px
    width: 1344px
    layout: flex-column justify=center
    children: 2
  - section: footer
    tag: footer
    height: 494px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(8, 9, 10)"
    tone: dark
  - section: footer
    tag: div
    height: 493px
    width: 1436px
    layout: block
    children: 1
    vertical-padding: ~56px (generous)
```

**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:
    - "A new species of product tool. Purpose-built for modern teams with AI workflows at its core, Linear"
    - "Make product operations self-driving"
    - "Changelog"
    - "Built for the future. Available today."
  sub-headings:
    - "Faster app launch"
    - "Product"
  ctas:
    - "Product"
    - "Linear"
    - "Inbox"
    - "Workspace"
    - "Faster app launch"
  navigation:
    - "Customers"
    - "Pricing"
    - "Now"
    - "Contact"
    - "Log in"
    - "Sign up"
  footer-links:
    - "Intake"
    - "Privacy"
```

**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:
  hero:
    count: 1
    avg-ratio: 1.84
    common-aspect: "~16:9 landscape"
  thumbnail:
    count: 25
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Avatar of Karri"
      - "Avatar of Karri"
```

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

**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** 3 · **cta** 2 · **auth** 1 · **pricing** 3 · **docs** 2 · **blog** 7 · **project** 5 · **social** 3 · **legal** 3 · **footer** 26 · **other** 5

**Primary actions (conversion path):**
- Account access — "Log in" (login/signup) → `https://linear.app/login`
- Primary call-to-action — "Sign up" (the conversion path) → `https://linear.app/signup`
- Primary call-to-action — "Get started" (the conversion path) → `https://linear.app/signup`

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


---
## Coverage: 91% 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 | 20 | 20 | 11 roles defined |
| Components | 16 | 20 | 4 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 10 | 10 | 635 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

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

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

- **Licensed web fonts (Inter Variable, Berkeley 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.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Dark mode** | Dark surface is the canonical medium; no separate light-mode variables detected | The dark canvas IS the design — reproduce it as the default. Do not generate a light-mode variant unless explicitly requested |

### Per-section confidence

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

2 font file(s) captured (501KB total). When running `prism add`, fonts are saved to `extractions/linear.app/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'Inter Variable';
  /* src: url('/fonts/Inter-Variable.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Variable';
  /* src: url('/fonts/Inter-Variable.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Berkeley Mono';
  /* src: url('/fonts/Berkeley-Mono.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes page_blink__6SLYY { ... }
@keyframes Author_open__MAved { ... }
@keyframes Author_close__klAn1 { ... }
@keyframes card_dialogIn__xt8Nh { ... }
@keyframes card_dialogOut__LlR_c { ... }
@keyframes gli-sprite { ... }
@keyframes Scrollable_scrollbarIn__QFU3h { ... }
@keyframes Scrollable_scrollbarOut__6_8Yh { ... }
@keyframes SlackIssue_shimmerSweep__SLG8B { ... }
@keyframes SlackIssue_cursorBlink__fm4bo { ... }
@keyframes sx-hef49w-B { ... }
@keyframes IssueView_shine__2AKuo { ... }
@keyframes IssueView_staggerIn__i7tSj { ... }
@keyframes IssueView_revealDots__fnitV { ... }
@keyframes page_dropdownInFromRight__rIEH8 { ... }
@keyframes page_dropdownInFromLeft__1ImJU { ... }
@keyframes page_dropdownOutToRight__Ja9n6 { ... }
@keyframes page_dropdownOutToLeft__TH0u8 { ... }
@keyframes page_blink__z5gkZ { ... }
@keyframes Hero_shine__Vj4A0 { ... }
@keyframes Tooltip_tooltipOpen__W8EHB { ... }
@keyframes Tooltip_tooltipClose__PpGeI { ... }
@keyframes CommandMenu_scaleIn__4iPk_ { ... }
@keyframes CommandMenu_scaleOut___cHlp { ... }
@keyframes CommandMenu_fadeIn__lE08G { ... }
@keyframes CommandMenu_fadeOut__CHecT { ... }
@keyframes CommandMenu_dialogBounce___53ip { ... }
@keyframes Collapsible_slideDown__3SeaJ { ... }
@keyframes Collapsible_slideUp__bbTHC { ... }
@keyframes Search_fadeIn__cnczE { ... }
@keyframes Search_fadeOut__YRs64 { ... }
@keyframes Search_contentShow__9t57i { ... }
@keyframes Search_contentHide__a_9yE { ... }
@keyframes WorkflowCard_dialogIn__oGjqP { ... }
@keyframes WorkflowCard_dialogOut__WsH20 { ... }
@keyframes GitHubSyncIllustration_arrowFlow__q5DtL { ... }
@keyframes Marquee_scroll__lpjIn { ... }
@keyframes Marquee_scroll-vertical__PJ_c6 { ... }
@keyframes Marquee_scroll-abs__bU3GF { ... }
@keyframes Marquee_scroll-abs-vertical__HiA0h { ... }
@keyframes PillarHero_pillarHeroPulse__Q7si_ { ... }
@keyframes Image_load__7V4j_ { ... }
@keyframes Blink_blink__wOrEi { ... }
@keyframes GitAutomationsIllustration_move__QFN_J { ... }
@keyframes GitAutomationsIllustration_offset__Db6DS { ... }
@keyframes GitAutomationsIllustration_offsetIsometric__2tMMu { ... }
@keyframes Dialog_dialogOpen__KHi96 { ... }
@keyframes Dialog_dialogClose__NQyZw { ... }
@keyframes Dialog_fadeIn__7RQYP { ... }
@keyframes Dialog_fadeOut__iSbyr { ... }
@keyframes Debug_fadeIn__WsYwQ { ... }
@keyframes ThemeToggle_fadeIn__76BIZ { ... }
@keyframes Collapsibles_highlight__B7IHy { ... }
@keyframes skeleton_loading__0AU8N { ... }
@keyframes ContextMenu_contextMenuIn__IAM9U { ... }
@keyframes ContextMenu_contextMenuOut__k4gAt { ... }
@keyframes Header_mobileMenuIn__LTfqt { ... }
@keyframes Header_mobileMenuOut__eGAVp { ... }
@keyframes Header_enterFromRight__Ngxbl { ... }
@keyframes Header_enterFromLeft__LSafj { ... }
@keyframes Header_exitToRight__ZLsky { ... }
@keyframes Header_exitToLeft__D37hd { ... }
@keyframes Header_scaleIn__RL1MP { ... }
@keyframes Header_scaleOut__8AEuy { ... }
@keyframes Header_fadeIn__xVeSe { ... }
@keyframes Header_fadeOut__iCals { ... }
@keyframes CTA_fadeIn__E9a3r { ... }
@keyframes x11lpqvw-B { ... }
@keyframes x9xrbjn-B { ... }
@keyframes x1bh8ax5-B { ... }
@keyframes x18re5ia-B { ... }
@keyframes xekv6nw-B { ... }
@keyframes x4yq7nq-B { ... }
@keyframes x1ph81ge-B { ... }
@keyframes DocumentationIllustration_highlightReveal__qRrmf { ... }
@keyframes DocumentationIllustration_cursorIn__npVAZ { ... }
```

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

```css
@keyframes page_blink__6SLYY{0%{visibility:visible}50%{visibility:hidden}
@keyframes Author_open__MAved{0%{opacity:0;transform:scale(.9)}
@keyframes Author_close__klAn1{0%{opacity:1;transform:scale(1)}
@keyframes card_dialogIn__xt8Nh{0%{opacity:0}
@keyframes card_dialogOut__LlR_c{0%{opacity:1}
@keyframes gli-sprite{0%{transform:translateZ(0)}5%{transform:translate3d(-100%,0,0)}5.0001%{transform:translateZ(0)}10%{transform:translate3d(-100%,0,0)}10.0001%{transform:translateZ(0)}15%{transform:translate3d(-100%,0,0)}15.0001%{transform:translateZ(0)}20%{transform:translate3d(-100%,0,0)}20.0001%{transform:translateZ(0)}25%{transform:translate3d(-100%,0,0)}25.0001%{transform:translateZ(0)}30%{transform:translate3d(-100%,0,0)}30.0001%{transform:translateZ(0)}35%{transform:translate3d(-100%,0,0)}35.0001%{transform:translateZ(0)}40%{transform:translate3d(-100%,0,0)}40.0001%{transform:translateZ(0)}45%{transform:translate3d(-100%,0,0)}45.0001%{transform:translateZ(0)}50%{transform:translate3d(-100%,0,0)}50.0001%{transform:translateZ(0)}55%{transform:translate3d(-100%,0,0)}55.0001%{transform:translateZ(0)}60%{transform:translate3d(-100%,0,0)}60.0001%{transform:translateZ(0)}65%{transform:translate3d(-100%,0,0)}65.0001%{transform:translateZ(0)}70%{transform:translate3d(-100%,0,0)}70.0001%{transform:translateZ(0)}75%{transform:translate3d(-100%,0,0)}75.0001%{transform:translateZ(0)}80%{transform:translate3d(-100%,0,0)}80.0001%{transform:translateZ(0)}85%{transform:translate3d(-100%,0,0)}85.0001%{transform:translateZ(0)}90%{transform:translate3d(-100%,0,0)}90.0001%{transform:translateZ(0)}95%{transform:translate3d(-100%,0,0)}95.0001%{transform:translateZ(0)}
@keyframes Scrollable_scrollbarIn__QFU3h{0%{opacity:0}
@keyframes Scrollable_scrollbarOut__6_8Yh{0%{opacity:1}
@keyframes SlackIssue_shimmerSweep__SLG8B{0%{background-position:150% 0}
@keyframes SlackIssue_cursorBlink__fm4bo{0%{opacity:1}49%{opacity:1}50%{opacity:0}99%{opacity:0}
@keyframes sx-hef49w-B{0%{background-position:300%center}
@keyframes IssueView_shine__2AKuo{0%{background-position:0}
@keyframes IssueView_staggerIn__i7tSj{0%{opacity:0;transform:translateY(4px)}}
@keyframes IssueView_revealDots__fnitV{0%{clip-path:inset(0 100% 0 0)}15%{clip-path:inset(0 66.6% 0 0)}30%{clip-path:inset(0 33.3% 0 0)}45%{clip-path:inset(0 0 0 0)}65%,to{clip-path:inset(0 100% 0 0)}}
@keyframes page_dropdownInFromRight__rIEH8{0%{opacity:0;transform:translateX(10%)}
@keyframes page_dropdownInFromLeft__1ImJU{0%{opacity:0;transform:translateX(-10%)}
@keyframes page_dropdownOutToRight__Ja9n6{0%{opacity:1;transform:translateX(0)}
@keyframes page_dropdownOutToLeft__TH0u8{0%{opacity:1;transform:translateX(0)}
@keyframes page_blink__z5gkZ{50%{visibility:hidden}}
@keyframes Hero_shine__Vj4A0{0%{background-position:0}
@keyframes Tooltip_tooltipOpen__W8EHB{0%{opacity:0;transform:scale(.9)}
@keyframes Tooltip_tooltipClose__PpGeI{0%{opacity:1;transform:scale(1)}
@keyframes CommandMenu_scaleIn__4iPk_{0%{transform:translateX(-50%) scale(.96);opacity:0}
@keyframes CommandMenu_scaleOut___cHlp{0%{transform:translateX(-50%) scale(1);opacity:1}
@keyframes CommandMenu_fadeIn__lE08G{0%{opacity:0}
@keyframes CommandMenu_fadeOut__CHecT{0%{opacity:1}
@keyframes CommandMenu_dialogBounce___53ip{50%{transform:translateX(-50%) scale(.98)}}
@keyframes Collapsible_slideDown__3SeaJ{0%{height:0;opacity:0;transform:translateY(-8px)}
@keyframes Collapsible_slideUp__bbTHC{0%{opacity:1;height:var(--radix-collapsible-content-height);transform:none}
@keyframes Search_fadeIn__cnczE{0%{opacity:0}
@keyframes Search_fadeOut__YRs64{0%{opacity:.85}
@keyframes Search_contentShow__9t57i{0%{opacity:0;transform:translate(-50%) scale(.96)}
@keyframes Search_contentHide__a_9yE{0%{opacity:1;transform:translate(-50%) scale(1)}
@keyframes WorkflowCard_dialogIn__oGjqP{0%{opacity:0}
@keyframes WorkflowCard_dialogOut__WsH20{0%{opacity:1}
@keyframes GitHubSyncIllustration_arrowFlow__q5DtL{to{translate:0 -84px}}
@keyframes Marquee_scroll__lpjIn{0%{transform:translateX(0)}
@keyframes Marquee_scroll-vertical__PJ_c6{0%{transform:translateY(0)}
@keyframes Marquee_scroll-abs__bU3GF{0%{transform:translateX(calc(100% + var(--Marquee-gap)))}
@keyframes Marquee_scroll-abs-vertical__HiA0h{0%{transform:translateY(calc(100% + var(--Marquee-gap)))}
@keyframes PillarHero_pillarHeroPulse__Q7si_{to{box-shadow:0 0 0 10px rgba(243,79,82,0)}}
@keyframes Image_load__7V4j_{to{opacity:1;-webkit-mask:var(--mask-end);mask:var(--mask-end)}}
@keyframes Blink_blink__wOrEi{50%{visibility:hidden}}
@keyframes GitAutomationsIllustration_move__QFN_J{0%{translate:0 0}
@keyframes GitAutomationsIllustration_offset__Db6DS{to{stroke-dashoffset:-8}}
@keyframes GitAutomationsIllustration_offsetIsometric__2tMMu{to{stroke-dashoffset:-6}}
@keyframes Dialog_dialogOpen__KHi96{0%{opacity:0;transform:translate(-50%,-49%) scale(.95)}
@keyframes Dialog_dialogClose__NQyZw{0%{opacity:1;transform:translate(-50%,-50%)}
@keyframes Dialog_fadeIn__7RQYP{0%{opacity:0}
@keyframes Dialog_fadeOut__iSbyr{0%{opacity:1}
@keyframes Debug_fadeIn__WsYwQ{0%{opacity:0}
@keyframes ThemeToggle_fadeIn__76BIZ{0%{opacity:0}
@keyframes Collapsibles_highlight__B7IHy{20%,80%{background-color:var(--bg);border-color:var(--border)}}
@keyframes skeleton_loading__0AU8N{0%{background-position:200% 0}
@keyframes ContextMenu_contextMenuIn__IAM9U{0%{opacity:0;transform:scale(.9)}
@keyframes ContextMenu_contextMenuOut__k4gAt{0%{opacity:1;transform:scale(1)}
@keyframes Header_mobileMenuIn__LTfqt{0%{opacity:0}
@keyframes Header_mobileMenuOut__eGAVp{0%{opacity:1}
@keyframes Header_enterFromRight__Ngxbl{0%{opacity:0;transform:translateX(var(--anim-amount))}
@keyframes Header_enterFromLeft__LSafj{0%{opacity:0;transform:translateX(calc(-1 * var(--anim-amount)))}
@keyframes Header_exitToRight__ZLsky{0%{opacity:1;transform:translateX(0)}
@keyframes Header_exitToLeft__D37hd{0%{opacity:1;transform:translateX(0)}
@keyframes Header_scaleIn__RL1MP{0%{opacity:0;transform:scale(.98)}
@keyframes Header_scaleOut__8AEu
```
</details>

### Brand Gradient Palette

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

```css
/* Gradient 1 */
background: linear-gradient(var(--color-bg-panel),var(--color-bg-panel));

/* Gradient 2 */
background: linear-gradient(135deg,var(--color-border-translucent-strong),var(--color-border-translucent) 50%,transparent);

/* Gradient 3 */
background: linear-gradient(180deg,rgba(255,255,255,.1) 40%,rgba(8,9,10,.1));

/* Gradient 4 */
background: linear-gradient(90deg,transparent 0,var(--color-text-primary) 50%,transparent 100%);

/* Gradient 5 */
background: linear-gradient(180deg,transparent 0,var(--color-bg-primary) 100%);

```

### Hover State CSS (Intercepted)

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

```css
.tweet-media-video_videoButton__PC36F:focus-visible,.tweet-media-video_videoButton__PC36F:hover{background-color:var(--tweet-color-blue-primary-hover)}

.tweet-media-video_watchOnTwitter__Uqdmw>a:hover{background-color:rgba(39,44,48,.75)}

.tweet-media-video_viewReplies__bzDyK:hover{background-color:var(--tweet-color-blue-primary-hover)}

@media (any-hover:hover){.Link_variant-none__aXaOH:hover{color:currentColor}

@media (any-hover:hover){.Link_variant-underline__z5z7W:hover{text-decoration-color:var(--color-text-tertiary)}

@media (any-hover:hover){.Link_variant-dimmed__kvcr0:hover{color:var(--color-text-primary)}

@media (any-hover:hover){.Link_variant-primary___PVxF:hover{color:var(--color-link-hover)}

@media (any-hover:hover){.Link_variant-fade__U2YWc:hover{color:var(--color-text-tertiary)}

.LinkAnchor_root__3QL80:where(:hover,:focus) .LinkAnchor_inline__sY3ns{opacity:1;visibility:visible;--visibility-delay:0s}

.LinkAnchor_root__3QL80:where(:hover,:focus) .LinkAnchor_icon__5L0U7{transform:translateY(-50%)}

@media (any-hover:hover){.JobListing_jobRow__zbFPQ:hover:before{opacity:1}

.JobListing_jobRow__zbFPQ:hover,.JobListing_jobRow__zbFPQ:hover+.JobListing_jobRow__zbFPQ{border-color:transparent}

.issues-not-stories_circle__fZSdC:hover{background:rgba(255,255,255,.01)}

.manage-design-projects_shapeWrapper__SlcMa:hover{filter:brightness(200%)}

@media (any-hover:hover){.momentum_wrapper__hF_AW{display:flex}

@media (any-hover:hover){.Craft_card__4ZVIm:hover .Craft_thumbnail__wHHC8{transform:translateY(-2px)}

.Craft_card__4ZVIm:hover .Craft_title__ksAGG{transform:translateY(-1px)}

.Craft_card__4ZVIm:hover .Craft_subtitle__bq2fr{color:var(--color-text-secondary);transform:translateY(-1px)}

.Craft_card__4ZVIm:hover .Craft_arrow__SRPXy{transform:none;opacity:1;color:var(--color-text-primary)}

@media (any-hover:hover){.card_card__QDKwA:hover .card_iconButton__3kjmQ{color:var(--color-text-primary);border-color:var(--color-bg-tertiary);background:var(--color-bg-tertiary)}
```

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

### Real Responsive Breakpoints
**20 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`560px` · `600px` · `640px` · `641px` · `700px` · `768px` · `769px` · `928px` · `1024px` · `1025px` · `1120px` · `1140px` · `1240px` · `1280px` … (+6 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×2389 · `14px`×577 · `12px`×338 · `13px`×312 · `15px`×232 · `13.3333px`×224 · `10px`×103 · `18px`×32

**Radius scale** (× = paint count): `2px`×71 · `50%`×50 · `6px`×44 · `12px`×43 · `4px`×41 · `9999px`×34 · `8px`×12 · `16px`×9

**Weights** (× = paint count): `400`×3881 · `510`×350 · `590`×37 · `300`×8

**Layout gaps** (× = paint count): `8px`×94 · `12px`×34 · `4px`×30 · `3px`×16 · `2px`×15 · `6px`×8 · `15px`×5 · `16px`×3

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px
rgba(0, 0, 0, 0.4) 0px 2px 4px 0px
rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset
rgba(8, 9, 10, 0.6) 0px 4px 32px 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(--color-bg-primary); color:var(--color-text-primary) }
header { background:linear-gradient(180deg,var(--header-bg) 0,color-mix(in oklab,var(--header-bg) 100%,transparent 5%) 100%); transition:var(--speed-quickTransition) var(--ease-out-quad) }
h1 { font-size:var(--title-8-size); font-weight:var(--font-weight-medium) }
h2 { font-size:var(--title-6-size); color:var(--color-text-tertiary); font-weight:var(--font-weight-medium) }
button { font-size:13px; color:var(--color-text-tertiary); border-radius:var(--radius-rounded); background:transparent; transition:var(--speed-quickTransition) var(--ease-out-quad); background-color:transparent }
a { background:var(--color-brand-bg); color:var(--color-brand-text); font-size:14px; font-weight:var(--font-weight-medium) }
input { color:var(--color-text-primary); background:transparent; font-size:16px; background-color:transparent }
```

> 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://linear.app | 2026-06-17T22:17:11.610Z*
*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.*