--- version: alpha name: warp.dev description: "Dark-canvas product system built on #121212 with #1c1a18 as the single brand accent. Type anchored in Matter at 64px / weight 400. Extracted automatically from https://warp.dev/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)." narrative: | warp.dev is built on a near-black canvas (#121212). The system uses rgb(28, 26, 24) as a near-neutral accent (low saturation). Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside Matter as the primary typeface. Matter is paired with Inter Fallback for secondary roles. A layered elevation system (9 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 8 keyframe animations plus transition-driven interactions. colors: canvas: "#121212" surface-2: "#1c1a18" ink: "#f8f5ee" ink-muted: "#a5a39d" ink-subtle: "#a5a39d" primary: "#1c1a18" on-primary: "#ffffff" primary-hover: "#bda6f7" hairline: "#5f5d59" primary-focus: "#5e5c58" semantic-error: "#f23539" semantic-success: "#52c153" semantic-warning: "#feb800" typography: display-xl: fontFamily: "Matter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 64px fontWeight: 400 lineHeight: 1.1 letterSpacing: -1.6px display-md: fontFamily: "Matter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 36px fontWeight: 400 lineHeight: 1.22 letterSpacing: -0.9px body: fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 caption: fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.78 letterSpacing: 0 button: fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 rounded: none: 0px xs: 4px sm: 6px md: 14px lg: 20px xl: 32px pill: 9999px spacing: xxs: 2px xs: 2px sm: 10px md: 32px lg: 48px xl: 64px xxl: 120px components: button-icon-button: backgroundColor: "transparent" textColor: "#605d59" typography: "{typography.button}" rounded: "{rounded.xs}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.xs}" padding: 4px 10px button-ghost-2: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.xs}" padding: 0px 12px card-standard-card: backgroundColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.none}" navigation-main-nav: backgroundColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 10px 40px testimonial-quote-card: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 112px 0px tab-ghost-tab: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 0px 4px extracted_at: "2026-06-11T05:03:02.043Z" completeness: 81 scoreVersion: "v2" --- # Design System — warp.dev > Extracted automatically by Prism from https://warp.dev > Date: 2026-06-11 > Viewport: Desktop 1440x900 + Mobile 390x844 > Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted). ## 0. Design DNA **Density**: sparse  |  **Motion**: subtle  |  **Weight**: medium  |  **Aesthetic**: product-neutral | Dimension | Value | Signal | |---|---|---| | Canvas | neutral | `#121212` | | Type posture | sans-led (Inter) | "Ship better software with any " | | Color assertion | dual-accent | #1c1a18 | | Whitespace | sparse | section rhythm 112px | | Interaction | subtle | 8 keyframes, 11 transitions | | Radius language | 2px-rounded | from token scale | **Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 2px-rounded · subtle-motion` > **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc): > > - **Canvas**: `#121212` is the page background. Every component composits against this. > - **Accent**: `rgb(28, 26, 24)` for primary CTAs ONLY. Never decorative. > - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role. > - **Section rhythm**: 112px between major bands. Card padding: 48px. > - **Default radius**: 6px 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 warp.dev commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is a dark surface (`#121212`) where surfaces are layered through stepped luminance — each elevated level is slightly less dark than the one beneath it, creating depth without color shifts. Headlines are set in **Matter**, a sans-serif display face (the dominant type signature, e.g. "Ship better software with any agent" at 64px). Body text is set in **Inter**. Negative letter-spacing at display sizes (-1.6px at 64px) compresses headlines into engineered blocks, dense and authoritative. Body text reads in Off-White (`#f8f5ee`). **Near-Black** (`#1c1a18`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (9 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. Motion design uses smooth easing curves for polished state transitions. **Key Characteristics:** - Background: Near-Black (`#121212`) - Primary typeface: Inter - Primary text: Off-White (`#f8f5ee`) - Accent: Near-Black (`#1c1a18`) - Display: 64px weight 400, letter-spacing -1.6px - Shadow system: 9 distinct elevation levels - Custom fonts loaded: Inter, Inter Fallback, DM Mono, DM Mono Fallback, Instrument Serif, Instrument Serif Fallback, Abel, Abel Fallback, Matter ## 2. Color Palette & Roles ### Background & Surface - **Background** (`#121212`): Page background (primary) - **Surface** (`#1c1a18`): Surface / elevated background (CSS var) - **Black** (`#000000`): Surface / elevated background - **Pure Black** (`#0b0b0b`): Surface / elevated background - **Near-Black** (`#111111`): Surface / elevated background ### Text & Content - **Text** (`#f8f5ee`): Primary body text - **Text Secondary** (`#a5a39d`): Text (CSS var) - **Lavender** (`#bda6f7`): Secondary text - **Lavender** (`#c7aeff`): Secondary text ### Accent & Interactive - **Accent Purple** (`#cbb0f7`): Accent / interactive (CSS var) ### Border & Divider - **Border** (`#464542`): Border (CSS var) - **Near Black** (`#1c1a26`): Borders / dividers ### Full Extracted Palette **14 colors rendered on the page** + **2** more declared in design tokens (CSS custom properties — not necessarily painted). (12 categorized above + 4 additional below.) Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out. - `#ffffff` — White - `#5f5d59` — Muted - `#2c2b29` — Panel *(token)* - `#c178ff` — Tertiary *(token)* ### CSS Custom Properties (Design Tokens) **Primary Brand Color** - `--color-primary-yellow`: `lab(79.2935% 13.5666 82.2486)` - `--color-accent-purple`: `#cbb0f7` - `--color-accent`: `#a5a39d` - `--color-primary-green`: `lab(69.7863% -53.411 45.1934)` **Shadow Token** - `--tw-inset-shadow-alpha`: `100%` - `--tw-ring-shadow`: `0 0 #0000` - `--tw-drop-shadow-alpha`: `100%` - `--tw-inset-ring-shadow`: `0 0 #0000` **Warning** - `--color-amber-400`: `lab(80.1641% 16.6016 99.2089)` - `--color-amber-600`: `lab(60.3514% 40.5624 87.1228)` - `--color-amber-500`: `lab(72.7183% 31.8672 97.9407)` - `--color-warning`: `lab(79.2935% 13.5666 82.2486)` **Spacing Token** - `--space-xl`: `calc(2rem*1)` - `--scroll-padding-top`: `5.25rem` - `--space-section`: `calc(4rem*1)` - `--space-2xl`: `calc(3rem*1)` **Border Radius Token** - `--btn-radius`: `0.125rem` - `--radius-sm`: `calc(0.125rem*.5)` - `--radius`: `0.125rem` - `--radius-2xl`: `calc(0.125rem*3)` **Text Color** - `--color-text-secondary`: `#a5a39d` - `--color-text-body`: `lab(76.8314% .247538 3.04846)` - `--color-text`: `#f8f5ee` **Success** - `--color-green-500`: `lab(70.5521% -66.5147 45.8073)` - `--color-success`: `lab(69.7863% -53.411 45.1934)` - `--color-green-700`: `lab(47.0329% -47.0239 31.4788)` **Error / Destructive** - `--color-red-400`: `lab(63.7053% 60.745 31.3109)` - `--color-red-500`: `lab(55.4814% 75.0732 48.8528)` - `--color-red-700`: `lab(40.4273% 67.2623 53.7441)` - `--color-error`: `lab(53.6853% 69.6775 43.7724)` **Font Weight Token** - `--font-weight-bold`: `700` - `--font-weight-extralight`: `200` - `--font-weight-light`: `300` - `--font-weight-black`: `900` **Motion Token** - `--easing`: `cubic-bezier(0.4, 0, 0.2, 1)` - `--duration-slow`: `calc(.4s*1)` - `--default-transition-duration`: `.15s` **Background** - `--color-background`: `#121212` - `--color-surface`: `#1c1a18` **Font Family Token** - `--default-font-family`: `"Inter","Inter Fallback", 'Inter', system-ui, sans-serif` - `--default-mono-font-family`: `"DM Mono","DM Mono Fallback",ui-monospace,monospace` **Secondary Color** - `--color-muted`: `#5f5d59` **Border** - `--color-border`: `#464542` **Other tokens** - `--section-bg-alt`: `transparent` - `--text-2xl`: `1.5rem` - `--color-indigo-400`: `lab(59.866% 22.4834 -64.4485)` - `--color-purple-500`: `lab(52.0183% 66.11 -78.2316)` - `--color-violet-600`: `lab(41.088% 68.9966 -91.995)` - `--text-7xl`: `4.5rem` - `--text-lg`: `1.125rem` - `--color-blue-700`: `lab(36.9089% 35.0961 -85.6872)` ## 3. Typography Rules ### Font Families - **Primary**: `Inter` - **Secondary**: `Matter` - **Font 3**: `Inter Fallback` - **Font 4**: `DM Mono` - **Font 5**: `DM Mono Fallback` ### Custom Fonts Loaded - **Inter** weight 100 900 (italic) - **Inter Fallback** weight normal (normal) - **DM Mono** weight 400 (normal) - **DM Mono** weight 500 (normal) - **DM Mono Fallback** weight normal (normal) - **Instrument Serif** weight 400 (italic) - **Instrument Serif Fallback** weight normal (normal) - **Abel** weight 400 (normal) - **Abel Fallback** weight normal (normal) - **Matter** weight 400 (normal) - **Matter** weight 500 (normal) ### Typography Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | Display Hero | Matter | 64px | 400 | 1.1 | -1.6px | Main headline (h1) | | Sub-heading | Matter | 36px | 400 | 1.22 | -0.9px | Third-level heading (h3) | | Caption | Inter | 18px | 400 | 1.78 | normal | Image caption, helper text | | Card Title | Inter | 16px | 400 | 1.5 | normal | Card headings | | Button | Inter | 14px | 400 | 1.43 | normal | Button label (14px) | | Button | Inter | 14px | 500 | 2 | normal | Button label (14px) | ### Font Weight Scale CSS custom properties define 9 explicit weight steps: - `--font-weight-thin`: `100` — Thin - `--font-weight-extralight`: `200` — ExtraLight - `--font-weight-light`: `300` — Light - `--font-weight-normal`: `400` — Regular - `--font-weight-medium`: `500` — Medium - `--font-weight-semibold`: `600` — SemiBold - `--font-weight-bold`: `700` — Bold - `--font-weight-extrabold`: `800` — ExtraBold - `--font-weight-black`: `900` — Black ### Full Font Size Scale Sizes detected in the design (descending): `72px`, `64px`, `44.80px`, `36px`, `30px`, `24px`, `18px`, `16px`, `14px`, `12px`, `11px`, `10px` > 7 size(s) detected outside the sampled hierarchy (72px, 44.8px, 30px, 24px, 12px, 11px, 10px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles. ## 4. Component Stylings ### Buttons **Icon Button** - Background: `transparent` - Text: `#605d59` - Padding: 0px - Radius: 4px - Font: 14px weight 400 - Use: Toolbar/UI icons - Hover: backgroundColor: `#000000`, color: `#5f5d59`, border: `0px solid oklab(0.479999 0.000654012 0.00697976)` - Focus: backgroundColor: `oklab(0.14 0.000375051 0.00398531 / 0.000898747)`, color: `oklab(0.473888 0.000648998 0.00692594)`, border: `0px solid oklab(0.473888 0.000648998 0.00692594)` **Ghost** - Background: `transparent` - Text: `#f8f5ee` `{colors.ink}` - Padding: 4px 10px - Radius: 3px - Font: 14px weight 500 - Use: Subtle action, toolbar, nav button - Hover: backgroundColor: `#000000`, color: `#5f5d59`, border: `0px solid oklab(0.479999 0.000654012 0.00697976)` - Focus: backgroundColor: `oklab(0.14 0.000375051 0.00398531 / 0.000898747)`, color: `oklab(0.473888 0.000648998 0.00692594)`, border: `0px solid oklab(0.473888 0.000648998 0.00692594)` **Ghost** - Background: `transparent` - Text: `#f8f5ee` `{colors.ink}` - Padding: 0px 12px - Radius: 3px - Font: 14px weight 500 - Use: Subtle action, toolbar, nav button - Hover: backgroundColor: `#000000`, color: `#5f5d59`, border: `0px solid oklab(0.479999 0.000654012 0.00697976)` - Focus: backgroundColor: `oklab(0.14 0.000375051 0.00398531 / 0.000898747)`, color: `oklab(0.473888 0.000648998 0.00692594)`, border: `0px solid oklab(0.473888 0.000648998 0.00692594)` **Secondary** - Background: `#1c1a18` `{colors.primary}` - Text: `#f8f5ee` `{colors.ink}` - Padding: 4px - Radius: 2px - Font: 16px weight 400 - Use: Secondary action - Hover: backgroundColor: `#000000`, color: `#5f5d59`, border: `0px solid oklab(0.479999 0.000654012 0.00697976)` - Focus: backgroundColor: `oklab(0.14 0.000375051 0.00398531 / 0.000898747)`, color: `oklab(0.473888 0.000648998 0.00692594)`, border: `0px solid oklab(0.473888 0.000648998 0.00692594)` **Light / Invert** - Background: `#f8f5ee` `{colors.ink}` - Text: `#121212` `{colors.canvas}` - Padding: 0px 20px - Radius: 2px 0px 0px 2px - Font: 14px weight 500 - Use: Bright CTA on dark sections - Hover: backgroundColor: `#000000`, color: `#5f5d59`, border: `0px solid oklab(0.479999 0.000654012 0.00697976)` - Focus: backgroundColor: `oklab(0.14 0.000375051 0.00398531 / 0.000898747)`, color: `oklab(0.473888 0.000648998 0.00692594)`, border: `0px solid oklab(0.473888 0.000648998 0.00692594)` **Icon Button** - Background: `transparent` - Text: `#a5a39d` `{colors.ink-subtle}` - Padding: 0px - Radius: 9999px - Font: 14px weight 400 - Use: Toolbar/UI icons - Hover: backgroundColor: `#000000`, color: `#5f5d59`, border: `0px solid oklab(0.479999 0.000654012 0.00697976)` - Focus: backgroundColor: `oklab(0.14 0.000375051 0.00398531 / 0.000898747)`, color: `oklab(0.473888 0.000648998 0.00692594)`, border: `0px solid oklab(0.473888 0.000648998 0.00692594)` **Light / Invert** - Background: `#f8f5ee` `{colors.ink}` - Text: `#121212` `{colors.canvas}` - Padding: 4px 16px - Radius: 2px - Font: 14px weight 500 - Use: Bright CTA on dark sections - Hover: backgroundColor: `#000000`, color: `#5f5d59`, border: `0px solid oklab(0.479999 0.000654012 0.00697976)` - Focus: backgroundColor: `oklab(0.14 0.000375051 0.00398531 / 0.000898747)`, color: `oklab(0.473888 0.000648998 0.00692594)`, border: `0px solid oklab(0.473888 0.000648998 0.00692594)` ### Cards & Containers **Standard Card** - Background: `#1c1a18` `{colors.primary}` - Padding: 0px - Radius: 2px - Use: Content containers, listing items ### Navigation **Main Nav** - Background: `#ffffff` `{colors.on-primary}` - Padding: 10px 40px - Radius: none - Font: 16px weight 400 - Use: Fixed/sticky block nav — N/A items ### Testimonials **Quote Card** - Background: `transparent` - Text: `#121212` `{colors.canvas}` - Padding: 112px 0px - Radius: 0px - Font: 16px weight 400 - Use: Customer quote with avatar + company attribution ### Tabs **Ghost Tab** - Background: `transparent` - Text: `#121212` `{colors.canvas}` - Padding: 0px 4px - Radius: 9999px - Font: 16px weight 400 - Use: Navigation tabs, filter tabs ## 4b. Component Behaviors (State Matrix) ### Interaction State Narrative - **Button**: - **hover:** bg transparent → #000000, text #605d59 → #5f5d59, border changes - **focus:** bg transparent → #0a0907, text #605d59 → #5e5c58, border changes - **FooterLink**: - **hover:** opacity 0.8 *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: "lab(39.7069 0.226021 2.6737)" hover: bg: "oklab(0 0 0 / 0)" fg: "oklab(0.479999 0.000654012 0.00697976)" focus: bg: "oklab(0.14 0.000375051 0.00398531 / 0.000898747)" fg: "oklab(0.473888 0.000648998 0.00692594)" link: default: bg: "rgba(0, 0, 0, 0)" fg: "lab(2.48527 0.0667796 0.668094)" card: default: bg: "rgb(28, 26, 24)" fg: "rgb(165, 163, 157)" navLink: default: bg: "rgba(0, 0, 0, 0)" fg: "rgb(248, 245, 238)" tab: default: bg: "rgba(0, 0, 0, 0)" fg: "rgb(18, 18, 18)" footerLink: default: bg: "rgba(0, 0, 0, 0)" fg: "rgb(165, 163, 157)" hover: bg: "transparent" fg: "inherit" ``` **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: `Icon Button`, `Ghost`, `Secondary`, `Light / Invert` - **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 ### Navigation - **1 shape(s)** in this system: `Main Nav` - **DO NOT introduce new navigation variants** without justification ### Testimonials - **1 shape(s)** in this system: `Quote Card` - **DO NOT introduce new testimonials variants** without justification ### Tabs - **1 shape(s)** in this system: `Ghost Tab` - **DO NOT introduce new tabs variants** without justification ## 5. Layout Principles ### Layout Type **top-nav + content** ### Grid Single column, centered content ### Max Width 80rem ### Spacing System Generous spacing — editorial breathing room | Token | Value | |-------|-------| | xxs | 2px | | xs | 2px | | sm | 10px | | md | 32px | | base | 40px | | lg | 48px | | xl | 64px | | 2xl | 112px | | 3xl | 120px | ### Border Radius Scale | Name | Value | Use | |------|-------|-----| | None | 0px | No rounding | | Xs | 4px | Tiny corners (badges, micro elements) | | Sm | 6px | Buttons, inputs, small elements | | Md | 14px | 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 | `4px` | | Cards & Containers | `2px` | | Navigation | `none` | | Testimonials | `0px` | | Tabs | `9999px` | | Page Body | `0px` | **Shape Personality**: Sharp + Pill Contrast — Angular precision with pill-shaped accents (status badges, tags). Creates strong visual hierarchy. **Full Radius Spectrum**: 0px, 2px, 3px, 4px, 6px, 7px (from `allBorderRadii` scan) ## 5b. Spacing Rhythm Names **Measured section padding**: bands use ~64px internal vertical padding (up to 112px) — **generous**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone. *Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.* | Name | Value | Use case | |------|-------|----------| | **hero** | `120px` | Top/bottom of full-bleed hero sections | | **section** | `64px` | Between major bands (color change, content shift) | | **subsection** | `48px` | Within a section, between content groups | | **card** | `32px` | Card padding, list-item spacing | | **compact** | `10px` | Form fields, tight clusters, badge padding | | **micro** | `2px` | 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). **6/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:** "Ship better software with any agent" — 64px left-aligned - **Subheading:** "Warp is an open agentic development environment born from the terminal. Run coding agents locally and in the cloud, across any model, any harness, rep" - **Media:** present, positioned top - **CTAs:** 2 (primary: "Download") - **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:** unknown — Layout not classified - **Height:** 84px - **Logo:** ✓ present - **Nav links:** 3 primary items - **CTAs in nav:** 1 - **Clone instruction:** Build a static unknown navigation. Reserve 1 slot for primary CTA. ### Card Grid Pattern - **Card count:** 4 cards detected - **Columns (desktop):** 2-up grid - **Card dimensions:** 832×722px (aspect 1.15:1) - **Gap:** 80px between cards - **Content:** ✓ image + CTA - **Image position:** top - **Clone instruction:** Build a 2-column grid (desktop) with cards at ~1.15:1 aspect ratio. Each card has an image at the top. ### Testimonial Pattern - **Count:** 7 testimonial blocks - **Layout:** grid - **Avg quote length:** 148 chars (medium quote) - **Includes:** ✗ no avatars | ✗ no logos | ✓ star ratings - **Clone instruction:** Build a grid of 7 testimonials. Display ratings prominently. ### CTA Banner Pattern - **Banner count:** 1 - **Position:** mid-page - **Visual treatment:** ✓ contrasting background - **Primary CTA text:** "Learn More" - **Clone instruction:** Place a single CTA banner mid-page. Use contrasting solid background. ### Footer Pattern - **Columns:** 5 - **Links:** 31 total - **Height:** 468px - **Includes:** ✗ no newsletter | ✓ social icons | ✓ copyright - **Clone instruction:** Build a 5-column footer with ~6 links per column, social media links, and a copyright line. ## 6. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Page background, content blocks | | Layered (Level 1) |
`rgb(70, 69, 66) 0px 0px 0px 1px`,
`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px`,
`rgba(0, 0, 0, 0.1) 0px 4px 6px -4px` | Cards, elevated surfaces | | Inset (Level 2) |
`rgb(31, 31, 31) 0px 0px 0px 1px inset` | Buttons, pressed-state elements | | Inset (Level 3) |
`rgb(55, 50, 69) 0px 0px 0px 1px inset` | Buttons, pressed-state elements | | Inset (Level 4) |
`rgb(70, 69, 66) 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` | `cubic-bezier(.4,0,1,1)` | Custom Ease — Balanced | | `--easing` | `cubic-bezier(0.4, 0, 0.2, 1)` | Material Standard — Balanced | | `--ease-in-out` | `cubic-bezier(.4,0,.2,1)` | Ease Out — Decelerating | | `--default-transition-timing-function` | `cubic-bezier(.4,0,.2,1)` | Ease Out — Decelerating | | `--ease-out` | `cubic-bezier(0,0,.2,1)` | Ease Out — Decelerating | ### Duration Scale | CSS Variable | Value | Tier | |--------------|-------|------| | `--duration-slow` | `calc(.4s*1)` | Slow | | `--default-transition-duration` | `.15s` | Fast | | `--duration-fast` | `calc(.1s*1)` | Fast | | `--duration-normal` | `calc(.2s*1)` | Normal | ### Copy-Paste Transition Snippets **Color / Background** ```css transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cub...; ``` **Transform** ```css transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), translate 0.2s cubic-bezier(0.4, 0, 0.2, 1), scale 0.2s cubic-bezier(0.4...; ``` **Opacity** ```css transition: opacity 0.15s, scale 0.15s, display 0.15s allow-discrete, overlay 0.15s allow-discrete; ``` **Color / Background** ```css transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-...; ``` ### Keyframe Animation Catalog | Animation Name | Type | Animated Props | Use Hint | |----------------|------|----------------|----------| | `reveal` | Fade + Move | opacity, transform | UI transition | | `fill-progress` | Custom | width | UI transition | | `scroll-left` | Slide | transform | UI transition | | `scroll-right` | Slide | transform | UI transition | | `loading-spinner-in` | Fade | opacity | Loading indicator | | `spin-slow` | Rotate / Spin | transform | Loading indicator | | `spin` | Rotate / Spin | transform | Loading indicator | | `hero-left-photo-carousel` | Fade | opacity | UI transition | ### Motion Fingerprint - **Speed Character**: Balanced Pacing (median duration: `200ms`) - **Dominant Easing**: custom cubic-bezier curves - **Animation Library**: 8 unique animations (8 total including variants) > This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid. ## 8. Do's and Don'ts ### Do - Use dark background (`#121212`) as the foundation — this is a dark-mode-native design - Use Inter as the primary typeface — it defines the brand personality - Use negative letter-spacing (-1.6px) at display sizes for compressed, editorial headlines - Use the extracted shadow patterns for elevation — they are tuned to match the brand palette - Use Surface (`#1c1a18`) as the primary accent — it's the brand's signature interactive color - Use small 3px radius for buttons — this design system uses subtle rounding, not pill shapes - Use 2px border-radius on cards — consistent with the grid card corners - Maintain nav height at 84px — consistent vertical space for the navigation bar - Transition button background to Black (`#000000`) on hover — this is the extracted interactive state - Respect the 2px–64px spacing range — the design uses a wide scale for visual breathing room - Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar - Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose - Each card includes a top image — imagery is part of the card identity, not optional - Lay out testimonials in a grid (7+ items) — quantity signals scale and trust - Build a content-dense footer (5 columns, ~31 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 increase letter-spacing on headings — the type is designed to run tight at scale - Don't invent new shadow values — use only the extracted shadow levels - Don't introduce additional saturated accent colors — the palette is intentionally controlled - Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners - 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 `#121212` as the base canvas" why: "Every component is designed to composit against this exact tone" test: "document.body.style.backgroundColor === '#121212'" - id: brand-canvas-002 type: dont rule: "Do NOT use pure white (`#ffffff`) for surfaces" why: "This is a dark-mode-native system — white surfaces break the tonal contract" test: "!querySelectorAll('[style*=\"background: #fff\"], [style*=\"background: white\"]').length" - id: brand-accent-001 type: do rule: "Reserve `rgb(28, 26, 24)` for primary CTAs and brand-mark signals only" why: "Single chromatic assertion device — overuse dilutes meaning" test: "querySelectorAll('[style*=\"rgb(28, 26, 24)\"]').length <= 3 per fold" ``` ## 9. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | 640px | Single column layout | | Tablet | 768px | 2-column grids | | Desktop | 1024px | Full layout | | Large Desktop | 1280px | Maximum width | ### Token Diff — Desktop vs Mobile | Element | Property | Desktop | Mobile | |---------|----------|---------|--------| | heading | font-size | `64px` | `40px` | | heading | line-height | `70.4px` | `44px` | | heading | letter-spacing | `-1.6px` | `-1px` | ### Collapsing Strategy - Headlines: 64px → 40px on mobile - Navigation: horizontal links → hamburger menu on mobile - Cards: multi-column → stacked vertical on mobile - Footer: multi-column → stacked single column on mobile ### Touch Targets - Buttons: 0px padding - Navigation: adequate spacing between items - Interactive elements: minimum 44px touch target recommended ### Collapsing Narrative How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions): - **Navigation collapses to hamburger** — 3 links visible on desktop, 0 on mobile (the rest hide behind a menu toggle). - **Nav CTAs reduced** on mobile (1 → 0) — the design prioritizes content over conversion buttons at small sizes. - **Card grid: 2-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile. - **Footer columns collapse:** 5 columns (desktop) → 2 columns (mobile). ## 9b. Visual Tone & Photography **Tone:** Mixed photography + illustration A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents. **Canonical Brand Image (OG):** - https://www.warp.dev/og/default.png (1200×630px) *This is the image shown when the site is shared on social media — represents the brand visual essence.* **Hero Image (above-fold dominant visual):** - Aspect: 1.6:1 (landscape (16:9-ish)) - Rendered size: 1200×750px - Alt text: "Warp agent prompt and orchestration interface" - *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): 10 (77%) - Portrait (<0.87): 0 (0%) - Square (0.87–1.15): 0 (0%) - Ultra-wide (>2.3): 3 (23%) **Media Format Mix:** **Average rendered image size:** 747×421px **Above-fold image count:** 2 / 13 **Decorative Patterns Detected:** - **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic **Clone instruction for decorative work:** Glassmorphism is a brand signature — use `backdrop-filter: blur(20px)` on overlapping surfaces. **Imagery Guidance for clones:** - Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents. - Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone. ## 10. Agent Prompt Guide ### Quick Reference - Background: Near-Black (`#121212`) - Primary text: Off-White (`#f8f5ee`) - Accent: Near-Black (`#1c1a18`) - Border: Slate Grey (`#5f5d59`) - Font: Inter - Body: 16px weight 400 ### Example Component Prompts - "Create a hero section on Near-Black background (#121212). Headline at 64px Inter weight 400, line-height 1.1, letter-spacing -1.6px, color #f8f5ee." - "Create the primary CTA button: `#1c1a18` background, `#605d59` text, 4px border-radius, 11px 21px padding, 600 weight, Inter font." - "Design a card on `#1c1a18` background. Border: none. Radius: 2px. Shadow: none. Padding: 0px." - "Build navigation: static on `#121212`. Inter 16px weight 400 for links." ### Iteration Guide 1. **Canvas**: Set the dark canvas to Near-Black (`#121212`) — every component is composited against this exact base. 2. **Typography**: All type in Inter, weight range 100–900. Never exceed 900 — heavier weights break the brand's tonal restraint. 3. **Accent**: Near-Black (`#1c1a18`) is the sole interactive color. On hover → Lavender (`#bda6f7`). Use CSS transitions, not opacity/brightness filters. 4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Timing: 100ms for micro-interactions, 200ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality. 5. **Shape**: CTAs at `4px`, cards at `2px`. Apply border-radius from the extracted scale only — don't invent intermediate values. 6. **Spacing**: Use the `--ca-space-*` token scale (2px–64px). All padding, margin, and gap values are multiples from this scale — no magic numbers. 7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent. ## 11. CSS Design Tokens Raw Export *Copy-paste ready `:root {}` block — all values extracted directly from the live site.* ```css /* Colors */ :root { --ca-canvas: #121212; --ca-primary: #1c1a18; --ca-ink: #f8f5ee; --ca-ink-subtle: #a5a39d; --ca-on-primary: #ffffff; --ca-primary-hover: #bda6f7; --ca-hairline: #5f5d59; --ca-primary-focus: #5e5c58; --ca-semantic-error: #f23539; --ca-semantic-success: #52c153; --ca-semantic-warning: #feb800; } /* Typography */ :root { --ca-font-primary: "Matter", system-ui, sans-serif; --ca-text-display: 64px; --ca-text-body: 14px; --ca-text-caption: 18px; --ca-text-button: 14px; } /* Spacing & Radius */ :root { --ca-space-xxs: 2px; --ca-space-xs: 2px; --ca-space-sm: 10px; --ca-space-md: 32px; --ca-space-base: 40px; --ca-space-lg: 48px; --ca-space-xl: 64px; --ca-space-2xl: 112px; --ca-space-3xl: 120px; --ca-radius-none: 0px; --ca-radius-xs: 4px; --ca-radius-sm: 6px; --ca-radius-md: 14px; --ca-radius-lg: 20px; --ca-radius-xl: 32px; --ca-radius-full: 9999px; } /* Motion */ :root { --ca-ease-in: cubic-bezier(.4,0,1,1); --ca-duration-slow: calc(.4s*1); --ca-duration-fast: calc(.1s*1); --ca-ease-in-out: cubic-bezier(.4,0,.2,1); --ca-ease-out: cubic-bezier(0,0,.2,1); --ca-duration-normal: calc(.2s*1); } ``` ## 13. Page Structure Skeleton *The actual layout the source site uses. Reproduce these sections in order to match the site structure.* ```yaml page-skeleton: - section: header tag: header classes: ["sticky", "top-0", "z-10", "bg-[var(--color-background)]/70"] height: 84px width: full-bleed layout: block children: 2 bg: "oklab(0.182203 0.00000827759 0.00000365078 / 0.6)" - section: navigation tag: nav height: 84px width: full-bleed layout: block children: 2 - section: hero tag: main classes: ["isolate", "overflow-clip"] height: 7419px width: full-bleed layout: block children: 7 - section: feature-section tag: section classes: ["py-16"] height: 1162px width: full-bleed layout: block children: 1 vertical-padding: ~64px (generous) padding: "64px 0px" - section: feature-section tag: section classes: ["py-[var(--space-section)]"] height: 416px width: full-bleed layout: block children: 1 vertical-padding: ~64px (generous) padding: "64px 0px" - section: feature-section tag: section classes: ["bg-[var(--color-background)]", "py-[var(--space-section)]", "text-[var(--color-text)]"] height: 3400px width: full-bleed layout: block children: 1 bg: "rgb(18, 18, 18)" tone: dark vertical-padding: ~64px (generous) padding: "64px 0px" - section: navigation tag: nav classes: ["hidden", "lg:sticky", "lg:top-24", "lg:block"] height: 228px width: 320px layout: block children: 1 - section: feature-section tag: section classes: ["py-[var(--space-section)]"] height: 1098px width: full-bleed layout: block children: 1 vertical-padding: ~64px (generous) padding: "64px 0px" - section: testimonials tag: section classes: ["relative", "overflow-hidden", "py-20", "text-[var(--testimonial-fg)]"] height: 864px width: full-bleed layout: block children: 2 vertical-padding: ~112px (airy) padding: "112px 0px" - section: section tag: section classes: ["py-0"] height: 480px width: full-bleed layout: block children: 1 - section: testimonials tag: section classes: ["bg-[var(--color-surface)]", "py-[var(--space-section)]"] height: 729px width: full-bleed layout: block children: 1 vertical-padding: ~64px (generous) padding: "64px 0px" - section: footer tag: footer classes: ["pt-0"] height: 468px width: full-bleed layout: block children: 1 vertical-padding: ~48px - section: content-section tag: div classes: ["bg-[var(--color-surface)]", "pt-[var(--space-xl)]", "pb-[var(--space-section)]", "text-[var(--color-text)]"] height: 468px width: full-bleed layout: block children: 1 bg: "rgb(28, 26, 24)" tone: dark vertical-padding: ~48px padding: "32px 0px 64px" - section: navigation tag: nav classes: ["grid", "grid-cols-2", "gap-6", "sm:grid-cols-3"] height: 280px width: 1200px layout: grid: 5-col gap=24px children: 5 ``` **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: - "Proud partner of industry leaders" - "Be more productive. Stay in control." sub-headings: - "Start in the terminal" - "Mac" - "PRODUCT" ctas: - "Products" - "Pricing" - "61k" - "Contact sales" - "Download $ winget install Warp.Warp" - "Download" - "$ winget install Warp.Warp" - "Contact Sales" navigation: - "Pricing" - "61k" - "Download D" - "WARP TERMINAL" - "OZ AGENT PLATFORM" - "WARP AGENT" - "SCALE ACROSS YOUR TEAM" - "Open Source" - "GitHub" - "YouTube" footer-links: - "Download" - "All Systems Operational" ``` **Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording. ## 15. Asset Inventory (Image Roles & Ratios) *Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.* ```yaml assets: logo: count: 4 avg-ratio: 4.17 common-aspect: "~16:6 banner" sample-alts: - "GitHub dark logo" - "Retool dark logo" - "GitHub dark logo" ``` **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` · radius `4px` · weight `400`_ ### Generic Card ```html
``` _Source pattern detected: padding `0px` · radius `2px` · shadow `none`_ **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 · **product** 1 · **pricing** 1 · **docs** 4 · **blog** 4 · **project** 1 · **social** 9 · **footer** 26 · **other** 11 **Signals:** 20/60 links carry a featured image · device mockups detected: laptop ×4 · dominant link roles: footer-link (37), content-card (13), inline-link (4). --- ## Extraction Completeness: 81/100 (B) | Category | Score | Max | Detail | |----------|-------|-----|--------| | Colors & Palette | 17 | 25 | 12 named colors | | Typography | 15 | 20 | 6 roles defined | | Components | 20 | 20 | 5 specs extracted | | Motion & Interaction | 15 | 15 | Keyframes, easing vars | | CSS Custom Properties | 10 | 10 | 238 vars | | Responsive Breakpoints | 4 | 5 | 4 breakpoints | | Variable Fonts | 0 | 5 | None detected | ## 12. Known Gaps & Confidence Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback. *Auto-detected extraction limitations — understand before building:* - **Licensed web fonts (Inter, DM Mono, Instrument Serif)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics). | 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 | | **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside | ### Per-section confidence | Section | Confidence | Reason | |---------|------------|--------| | §1 Visual Theme | High | Body bg extracted via getComputedStyle() | | §2 Colors | High | 238 CSS vars (semantic naming requires ≥20 for high) | | §3 Typography | High | 6 typography roles inferred | | §4 Components | High | 5 component variants captured | | §7 Motion | High | Keyframes + transitions | | §8 Do's/Don'ts | High | 24 rules generated; design-decisions.json has evidence per rule | | §9 Responsive | High | 4 breakpoints detected | | §9b Photography | High | 13 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 `