--- 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 (13 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 107 keyframe animations plus transition-driven interactions. colors: canvas: "#08090a" surface-2: "#23252a" ink: "#f7f8f8" ink-muted: "#8a8f98" ink-subtle: "#8a8f98" primary: "#5e6ad2" on-primary: "#111111" primary-hover: "#828fff" hairline: "#62666d" 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: "#ffffff" typography: "{typography.button}" rounded: "{rounded.xs}" padding: 0px 4px button-icon-button: backgroundColor: "transparent" textColor: "{colors.hairline}" typography: "{typography.button}" rounded: "{rounded.xs}" card-standard-card: backgroundColor: "#0f1011" typography: "{typography.headline}" rounded: "{rounded.sm}" padding: 0px 24px 28px input-text-input: backgroundColor: "#ffffff" textColor: "#d0d6e0" typography: "{typography.button}" rounded: "{rounded.xs}" padding: 12px 14px code-block-inline-code--pre: backgroundColor: "#ffffff" textColor: "#d0d6e0" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 1.225px 6px extracted_at: "2026-06-11T05:10:58.748Z" completeness: 91 scoreVersion: "v2" --- # Design System — linear.app > Extracted automatically by Prism from https://linear.app > Date: 2026-06-11 > Viewport: Desktop 1440x900 + Mobile 390x844 > Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted). ## 0. Design DNA **Density**: 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 | 107 keyframes, 13 transitions | | Radius language | 6px-rounded | from token scale | **Prism fingerprint**: `dark-canvas · sans-display · dual-accent · 6px-rounded · 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 (13 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: 13 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 **62 colors rendered on the page** + **99** more declared in design tokens (CSS custom properties — not necessarily painted). (23 categorized above + 138 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 - `#62666d` — Text Quaternary - `#090a0b` — Pure Black - `#e2e4e6` — Whitesmoke - `#585a5c` — Slate Grey - `#e2e4e7` — Whitesmoke - `#121314` — Near-Black - `#161718` — Near-Black - `#2e2e32` — Charcoal - `#27a644` — Green - `#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 - `#4ea7fc` — Blue - `#0f3338` — Navy Blue - `#422222` — Warm Brown - `#3b3b3b` — Charcoal - *…+106 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` **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 (normal) - **Berkeley Mono** weight 100 900 (normal) ### 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) | | Caption / Badge | Inter Variable | 12px | 510 | normal | 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) ### 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 - Focus: backgroundColor: `rgba(255, 255, 255, 0.06)`, color: `rgb(201, 204, 208)`, border: `0px none rgb(201, 204, 208)` **Ghost** - Background: `transparent` - Text: `#ffffff` - Padding: 0px 4px - Radius: 4px - Font: 13.3333px weight 400 - Use: Subtle action, toolbar, nav button - Focus: backgroundColor: `rgba(255, 255, 255, 0.06)`, color: `rgb(201, 204, 208)`, border: `0px none rgb(201, 204, 208)` **Icon Button** - Background: `transparent` - Text: `#62666d` `{colors.hairline}` - Padding: 0px - Radius: 6px - Font: 13.3333px weight 400 - Use: Toolbar/UI icons - Focus: backgroundColor: `rgba(255, 255, 255, 0.06)`, color: `rgb(201, 204, 208)`, border: `0px none rgb(201, 204, 208)` **Icon Button** - Background: `rgba(255, 255, 255, 0.02)` - Text: `#e2e4e7` - Padding: 0px - Radius: 6px - Border: 1px solid rgb(36, 40, 44) - Font: 13.3333px weight 400 - Use: Toolbar/UI icons - Focus: backgroundColor: `rgba(255, 255, 255, 0.06)`, color: `rgb(201, 204, 208)`, border: `0px none rgb(201, 204, 208)` **Ghost** - Background: `transparent` - Text: `#d0d6e0` - Padding: 0px 6px - Radius: 6px - Font: 13px weight 510 - Use: Subtle action, toolbar, nav button - Focus: backgroundColor: `rgba(255, 255, 255, 0.06)`, color: `rgb(201, 204, 208)`, border: `0px none rgb(201, 204, 208)` **Primary Brand** - Background: `#5e6ad2` `{colors.primary}` - Text: `#ffffff` - Padding: 0px 16px - Radius: 0px - Font: 14px weight 510 - Use: Primary CTA / brand action - Focus: backgroundColor: `rgba(255, 255, 255, 0.06)`, color: `rgb(201, 204, 208)`, border: `0px none rgb(201, 204, 208)` **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 - Focus: backgroundColor: `rgba(255, 255, 255, 0.06)`, color: `rgb(201, 204, 208)`, border: `0px none rgb(201, 204, 208)` ### 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)` - 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)` - 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**: - **focus:** bg transparent → rgba(255, 255, 255, 0.06), text #8a8f98 → #c9ccd0, border changes - **FooterLink**: - **hover:** text #f7f8f8 → #dfe1e3, 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)" focus: bg: "rgba(255, 255, 255, 0.06)" fg: "rgb(201, 204, 208)" 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)" footerLink: default: bg: "rgba(0, 0, 0, 0)" fg: "rgb(247, 248, 248)" hover: bg: "transparent" fg: "rgb(223, 225, 227)" ``` **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, 4px, 6px, 7px, 8px, 12px (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):** 1-up grid - **Card dimensions:** 1432×764px (aspect 1.87:1) - **Gap:** 0px between cards - **Content:** ✓ image - **Image position:** top - **Clone instruction:** Build a 1-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:** 38 total - **Height:** 464px - **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) |
`rgba(0, 0, 0, 0.01) 0px 5px 2px 0px`,
`rgba(0, 0, 0, 0.04) 0px 3px 2px 0px`,
`rgba(0, 0, 0, 0.07) 0px 1px 1px 0px`,
`rgba(0, 0, 0, 0.08) 0px 0px 1px 0px` | Cards, elevated surfaces | | Layered (Level 2) |
`rgba(0, 0, 0, 0.1) 0px 0px 0px 2px` | Cards, elevated surfaces | | Layered (Level 3) |
`rgba(0, 0, 0, 0.2) 0px 0px 0px 1px` | Cards, elevated surfaces | | Inset (Level 4) |
`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-agent` | Fade | opacity | UI transition | | `grid-dot-0-0-upDown` | Fade | opacity | UI transition | | `grid-dot-0-0-pong` | Fade | opacity | UI transition | | `grid-dot-0-0-empty-once` | 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**: 11 unique animations (107 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 - Use weight 680 for the heaviest text — this design uses a custom heavy weight, not the standard 700 (bold) - 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 - 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, ~38 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 substitute weight 680 with the standard 700 — the custom value is part of the brand's type personality - 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 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 ## 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: Dim Gray (`#62666d`) - 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–680. Never exceed 680 — heavier weights break the brand's tonal restraint. 3. **Accent**: Indigo (`#5e6ad2`) is the sole interactive color. On hover → Indigo (`rgba(94, 106, 210, 0.15)`). Use CSS transitions, not opacity/brightness filters. 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: #62666d; --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: 10781px 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: 10317px 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: 10781px 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: 1025px width: 1344px layout: block children: 9 - section: feature-section tag: div height: 186px 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: 464px width: full-bleed layout: block children: 1 bg: "rgb(8, 9, 10)" tone: dark - section: footer tag: div height: 463px 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: 24 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 ``` _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** 4 · **footer** 25 · **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). --- ## Extraction Completeness: 91/100 (A) | Category | Score | Max | Detail | |----------|-------|-----|--------| | Colors & Palette | 25 | 25 | 23 named colors | | Typography | 20 | 20 | 12 roles defined | | Components | 16 | 20 | 4 specs extracted | | Motion & Interaction | 15 | 15 | Keyframes, easing vars | | CSS Custom Properties | 10 | 10 | 633 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. - **1 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 | |----------|----------------|-------------------| | **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 | 633 CSS vars (semantic naming requires ≥20 for high) | | §3 Typography | High | 12 typography roles inferred | | §4 Components | Medium | 4 component variants captured | | §7 Motion | High | Keyframes + transitions | | §8 Do's/Don'ts | High | 27 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 `