shopify.com

DESIGN.md

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

---
version: alpha
name: shopify.com
description: "Dark-canvas product system built on #ffffff with #ffffff as the single brand accent. Type anchored in NeueHaasGrotesk at 96px / weight 400. Extracted automatically from https://shopify.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  shopify.com is built on a near-black canvas (rgb(0, 0, 0)).
  The system uses rgb(255, 255, 255) as the singular interactive color.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside NeueHaasGrotesk as the primary typeface.
  NeueHaasGrotesk is paired with Inter-Variable for secondary roles.
  A layered elevation system (13 distinct shadows) building a clear front-to-back hierarchy.
  Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

colors:
  surface-1: "#0e0e10"
  surface-2: "#02090a"
  ink: "#ffffff"
  ink-muted: "#e5e7eb"
  ink-subtle: "#d4d4d8"
  primary: "#ffffff"
  on-primary: "#111111"
  primary-hover: "#d4d4d8"
  hairline: "#71717a"

typography:
  display-xl:
    fontFamily: "NeueHaasGrotesk, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  display-md:
    fontFamily: "NeueHaasGrotesk, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 55px
    fontWeight: 330
    lineHeight: 1.16
    letterSpacing: 0
  headline:
    fontFamily: "NeueHaasGrotesk, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.3px
  body:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter-Variable, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 550
    lineHeight: 1.5
    letterSpacing: 0
  button:
    fontFamily: "Inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 30px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 64px

components:
  button-icon-button:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 24px
  card-standard-card:
    backgroundColor: "transparent"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 0px 90px

extracted_at: "2026-06-11T05:02:24.220Z"
completeness: 87
scoreVersion: "v2"

---

# Design System — shopify.com
> Extracted automatically by Prism from https://shopify.com
> 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**: animated  |  **Weight**: heavy  |  **Aesthetic**: dark-premium

| Dimension | Value | Signal |
|---|---|---|
| Canvas | dark | `#000000` |
| Type posture | sans-led (NeueHaasGrotesk) | "Be the next" |
| Color assertion | dual-accent | #ffffff |
| Whitespace | moderate | section rhythm 40px |
| Interaction | animated | 0 keyframes, 33 transitions |
| Radius language | soft-pill | from token scale |

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

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(0, 0, 0)` is the page background. Every component composits against this.
> - **Accent**: `rgb(255, 255, 255)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 40px 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 full-bleed image backdrop in the hero. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

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

Typography is anchored in **NeueHaasGrotesk**, deployed with OpenType features enabled globally (`"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 **650** in this system) — a deliberate signal that this design system is precisely tuned, not assembled from defaults. 

Body text reads in White (`#ffffff`) (contrast ratio 21.0:1, well above WCAG AA). **White** (`#ffffff`) provides interactive distinction without visual aggression. 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: Black (`#000000`)
- Primary typeface: IBMPlexMono
- Primary text: Whitesmoke (`#e5e7eb`)
- Accent: White (`#ffffff`)
- Display: 96px weight 400
- Shadow system: 13 distinct elevation levels
- Custom fonts loaded: IBMPlexMono, PolySans, DrukCondSuper, DrukTextHeavy, FT88, Roslindale, Trap, FeatureDisplay, GoodSans, GraphikCondensed, GTSuperDisplay, GTSuperTextBook, GTSuperText, NaturalMarkerItalic, NaturalMarker, GaramondNovaProCondensedLight, GaramondNovaProCondensedLightItalic, GTAmericaMono, Inter-Variable, ShopifySans, NeueHaasGrotesk, Inter

## 2. Color Palette & Roles

### Background & Surface
- **Black** (`#000000`): Page background (primary)
- **Near-Black** (`#0e0e10`): Surface / elevated background
- **Pure Black** (`#02090a`): Surface / elevated background
- **Jet Black** (`#051517`): Surface / elevated background
- **Near Black** (`#121c1e`): Surface / elevated background

### Text & Content
- **Black** (`#000000`): Primary body text
- **Mint** (`#7aeb9f`): Secondary text
- **#36f4a4** (`#36f4a4`): Secondary text
- **Cool Gray** (`#9dabad`): Secondary text
- **Silver** (`#bdbdca`): Secondary text

### Accent & Interactive
- **Link Dark Active** (`#a1a1aa`): Accent / interactive (CSS var)
- **Link Dark Focus** (`#ffffff`): Accent / interactive (CSS var)
- **Link Dark** (`#9797a2`): Accent / interactive (CSS var)
- **Link Dark Hover** (`#d4d4d8`): Accent / interactive (CSS var)
- **Link Dark Disabled** (`#71717a`): Accent / interactive (CSS var)
- **#751be9** (`#751be9`): Interactive / accent
- **Dark Gray** (`#224749`): Interactive / accent

### Border & Divider
- **Near Black** (`#102620`): Borders / dividers
- **Warm Brown** (`#1c2c30`): Borders / dividers
- **Deep Navy** (`#061a1c`): Borders / dividers
- **Charcoal** (`#1e2c31`): Borders / dividers
- **Deep Navy** (`#041e18`): Borders / dividers

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

- `#e5e7eb` — Whitesmoke
- `#f4f4f5` — Off-White
- `#e4e4e7` — Whitesmoke
- `#020a08` — Pure Black
- `#000a1e` — Deep Navy
- `#010624` — Deep Navy
- `#060607` — Pure Black
- `#11352d` — Charcoal
- `#99b3ad` — Cool Gray
- `#5a31f4` — Deep Purple
- `#072720` — Deep Navy
- `#133b32` — Charcoal
- `#e0e0e0` — Whitesmoke
- `#18181b` — Near-Black *(token)*
- `#c1fbd4` — #c1fbd4 *(token)*
- `#d4f9e0` — Light Gray *(token)*
- `#3f3f46` — Charcoal *(token)*
- `#52525b` — Charcoal *(token)*

### Gradients & Decorative Fills

- `linear-gradient(rgb(10, 44, 48), rgb(6, 21, 24) 80%)` — (card)

### CSS Custom Properties (Design Tokens)

**Spacing Token**
- `--letter-spacing-t8`: `0`
- `--letter-spacing-t1`: `0`
- `--space-xl`: `2.5rem`
- `--letter-spacing-b6`: `.02em`

**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`

**Font Weight Token**
- `--font-weight-b5`: `500`
- `--font-weight-b1`: `500`
- `--font-weight-t4`: `330`
- `--font-weight-bold`: `550`

**Font Size Token**
- `--font-size-t1`: `6rem`
- `--font-size-b1`: `1.75rem`
- `--font-size-t2`: `4.375rem`
- `--font-size-b3`: `1.25rem`

**Success**
- `--color-green-500`: `oklch(72.3% .219 149.579)`

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

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

**Warning**
- `--color-yellow-500`: `oklch(79.5% .184 86.047)`

**Other tokens**
- `--text-2xl`: `1.5rem`
- `--color-shade-100`: `#000`
- `--color-purple-500`: `oklch(62.7% .265 303.9)`
- `--font-base`: `Inter-Variable,Helvetica,Arial,sans-serif`
- `--color-shade-90`: `#18181b`
- `--text-lg`: `1.125rem`
- `--text-base--line-height`: `1.5rem`
- `--color-link-dark-active`: `#a1a1aa`

## 3. Typography Rules

### Font Families
- **Primary**: `NeueHaasGrotesk`
- **Secondary**: `IBMPlexMono`
- **Font 3**: `PolySans`
- **Font 4**: `DrukCondSuper`
- **Font 5**: `DrukTextHeavy`

### Custom Fonts Loaded
- **IBMPlexMono** weight 300 (normal)
- **IBMPlexMono** weight 400 (normal)
- **IBMPlexMono** weight 500 (normal)
- **IBMPlexMono** weight 600 (normal)
- **PolySans** weight 500 (normal)
- **PolySans** weight 600 (normal)
- **PolySans** weight 700 (normal)
- **DrukCondSuper** weight 900 (normal)
- **DrukTextHeavy** weight 700 (normal)
- **FT88** weight 700 (normal)
- **Roslindale** weight 500 (normal)
- **Trap** weight 400 (normal)
- **Trap** weight 500 (normal)
- **Trap** weight 700 (normal)
- **Trap** weight 800 (normal)
- **FeatureDisplay** weight 400 (normal)
- **FeatureDisplay** weight 500 (normal)
- **FeatureDisplay** weight 700 (normal)
- **GoodSans** weight 700 (normal)
- **GoodSans** weight 500 (normal)
- **GoodSans** weight 400 (normal)
- **PathwayGothicOne** weight 400 (normal)
- **GraphikCondensed** weight 600 (normal)
- **GTSuperDisplay** weight 300 (normal)
- **GTSuperDisplay** weight 400 (normal)
- **GTSuperDisplay** weight 500 (normal)
- **GTSuperTextBook** weight 300 (normal)
- **GTSuperText** weight 400 (normal)
- **GTSuperText** weight 500 (normal)
- **NaturalMarkerItalic** weight 400 (italic)
- **NaturalMarker** weight 400 (normal)
- **GaramondNovaProCondensedLight** weight 300 (normal)
- **GaramondNovaProCondensedLightItalic** weight 300 (normal)
- **GTAmericaMono** weight 400 (normal)
- **Inter-Variable** weight normal (normal)
- **ShopifySans** weight 300 (normal)
- **ShopifySans** weight 400 (normal)
- **ShopifySans** weight 500 (normal)
- **ShopifySans** weight 700 (normal)
- **ShopifySans** weight 800 (normal)
- **ShopifySans** weight 900 (normal)
- **NeueHaasGrotesk** weight 400 (normal)
- **NeueHaasGrotesk** weight 500 (normal)
- **NeueHaasGrotesk** weight 600 (normal)
- **Noto Sans JP** weight 300 (normal)
- **Noto Sans JP** weight 400 (normal)
- **Noto Sans JP** weight 500 (normal)
- **Noto Sans JP** weight 700 (normal)
- **Noto Sans JP** weight 800 (normal)
- **Noto Sans JP** weight 900 (normal)
- **Inter** weight 100 900 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | NeueHaasGrotesk | 96px | 400 | 1 | normal | Main headline (h1) |
| Sub-heading | NeueHaasGrotesk | 55px | 330 | 1.16 | normal | Third-level heading (h3) |
| Label Heading | NeueHaasGrotesk | 20px | 400 | 1.4 | 0.3px | Small heading (H4) |
| Card Title | NeueHaasGrotesk | 16px | 400 | 1.5 | normal | Card headings |
| Link Large | Inter-Variable | 16px | 550 | 1.5 | normal | Link (16px) — Decoration: none |
| Link Large | Inter-Variable | 16px | 400 | 1.5 | normal | Link (16px) — Decoration: none |
| Button | Inter | 14px | 400 | 1.5 | normal | Button label (14px) |
| Button | Inter | 14px | 700 | 1.71 | -0.32px | Button label (14px) |
| Link | Inter-Variable | 14px | 420 | 1.43 | normal | Link (14px) — Decoration: none |
| Link Small | Inter | 10px | 400 | 1.2 | normal | Link (10px) — Decoration: underline |

### Font Weight Scale

CSS custom properties define 35 explicit weight steps:
- `--font-weight-t4`: `330` — Light (custom, ~300)
- `--font-weight-t2`: `330` — Light (custom, ~300)
- `--font-weight-t1`: `330` — Light (custom, ~300)
- `--font-weight-t3`: `330` — Light (custom, ~300)
- `--font-weight-t5`: `360` — Regular (custom, ~400)
- `--font-weight-t6`: `400` — Regular
- `--font-weight-t7`: `400` — Regular
- `--font-weight-body-base`: `400` — Regular
- `--font-weight-normal`: `400` — Regular
- `--font-weight-dsp`: `400` — Regular
- `--text-body-lg--font-weight`: `400` — Regular
- `--text-body-sm--font-weight`: `420` — Regular (custom, ~400)
- `--font-weight-t8`: `450` — Regular (custom, ~400)
- `--font-weight-medium`: `450` — Regular (custom, ~400)
- `--font-weight-b5`: `500` — Medium
- `--font-weight-b1`: `500` — Medium
- `--font-weight-b2`: `500` — Medium
- `--font-weight-body-md`: `500` — Medium
- `--font-weight-body-lg`: `500` — Medium
- `--font-weight-b6`: `500` — Medium
- `--font-weight-body-sm`: `500` — Medium
- `--font-weight-b3`: `500` — Medium
- `--font-weight-b4`: `500` — Medium
- `--font-weight-bold`: `550` — Medium (custom, ~500)
- `--tw-font-weight`: `550` — Medium (custom, ~500)
- `--text-component-button-secondary-lg--font-weight`: `550` — Medium (custom, ~500)
- `--text-component-button-primary-lg--font-weight`: `550` — Medium (custom, ~500)
- `--text-component-link-sm--font-weight`: `550` — Medium (custom, ~500)
- `--text-theme-cta-lg--font-weight`: `550` — Medium (custom, ~500)
- `--text-component-button-primary-sm--font-weight`: `550` — Medium (custom, ~500)
- `--text-theme-cta-sm--font-weight`: `550` — Medium (custom, ~500)
- `--text-component-button-secondary-sm--font-weight`: `550` — Medium (custom, ~500)
- `--text-component-link-lg--font-weight`: `550` — Medium (custom, ~500)
- `--font-weight-semibold`: `600` — SemiBold
- `--font-weight-extrabold`: `650` — SemiBold (custom, ~600)

### Full Font Size Scale

Sizes detected in the design (descending): `96px`, `70px`, `55px`, `48px`, `32px`, `28px`, `24px`, `20px`, `18.29px`, `18px`, `16px`, `14px`, `13px`, `12px`, `10px`

> 9 size(s) detected outside the sampled hierarchy (70px, 48px, 32px, 28px, 24px, 18.2858px, 18px, 13px, 12px). 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: "ss03";
}
```

## 4. Component Stylings

### Buttons

**Icon Button**
- Background: `transparent`
- Text: `#ffffff` `{colors.primary}`
- Padding: 0px
- Radius: 4px
- Font: 14px weight 400
- Use: Toolbar/UI icons

**Ghost**
- Background: `transparent`
- Text: `#ffffff` `{colors.primary}`
- Padding: 0px 0px 0px 24px
- Radius: 0px
- Font: 14px weight 420
- Use: Subtle action, toolbar, nav button

### Cards & Containers

**Standard Card**
- Background: `transparent`
- Padding: 0px
- Radius: 12px
- Shadow: `rgba(0, 0, 0, 0.1) 0px 8px 8px 0px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px, rgba(0, ...`
- Use: Content containers, listing items

### Navigation

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


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative

- **Tab**:
  - **hover:** text #71717a → transparent

*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(255, 255, 255)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
  card:
    default:
      bg: "rgb(2, 9, 10)"
      fg: "rgb(255, 255, 255)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(113, 113, 122)"
    hover:
      bg: "transparent"
      fg: "rgba(0, 0, 0, 0)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
```

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

## 5. Layout Principles

### Layout Type
**hero + sections**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 8px |
| sm | 12px |
| md | 16px |
| base | 20px |
| lg | 24px |
| xl | 32px |
| 2xl | 40px |
| 3xl | 64px |

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `4px` |
| Cards & Containers | `12px` |
| Navigation | `none` |
| Page Body | `0px` |

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

**Full Radius Spectrum**: 0px, 4px, 5px, 7px, 8px, 12px, 16px, 20px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~64px internal vertical padding (up to 153px) — **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** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `16px` | Card padding, list-item spacing |
| **compact** | `12px` | Form fields, tight clusters, badge padding |
| **micro** | `8px` | 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:** "Be the nextAI all-star" — 96px left-aligned
- **Subheading:** "Dream big and build fast on Shopify. The world’s best commerce platform."
- **Media:** present, positioned top
- **CTAs:** 2 (primary: "Start for free")
- **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-left — Logo and links both on the left (CTAs typically right)
- **Height:** 72px
- **Logo:** ✓ present
- **Nav links:** 39 primary items
- **CTAs in nav:** 1
- **Clone instruction:** Build a static logo left links left navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

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

### Testimonial Pattern

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

### CTA Banner Pattern

- **Banner count:** 3
- **Position:** multiple
- **Visual treatment:** ✓ contrasting background✓ gradient fill
- **Primary CTA text:** "Pick a plan that fits"
- **Clone instruction:** Place multiple CTA banners across page sections. Use gradient background.

### Footer Pattern

- **Columns:** 1
- **Links:** 1 total
- **Height:** 56px
- **Includes:** ✗ no newsletter | ✗ no social |  
- **Clone instruction:** Build a 1-column footer with ~1 links per column.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.25) 0px 10px 50px 0px`,<br>`rgba(255, 255, 255, 0.25) 0px 0px 0px 1px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.1) 0px 20px 25px -5px`,<br>`rgba(0, 0, 0, 0.1) 0px 8px 10px -6px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(255, 255, 255, 0.08) 0px 0px 0px 1px`,<br>`rgba(0, 0, 0, 0.3) 0px 1px 3px 0px`,<br>`rgba(0, 0, 0, 0.2) 0px 5px 10px 0px` | Cards, elevated surfaces |
| Inset (Level 4) | <br>`rgba(0, 0, 0, 0.1) 0px 8px 8px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 4px 4px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 2px 2px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 0px 0px 1px`,<br>`rgba(255, 255, 255, 0.03) 0px 1px 0px 0px 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 |
| `--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 |
|--------------|-------|------|
| `--default-transition-duration` | `.15s` | Fast |
| `--tw-duration` | `.3s` | Normal |

### Copy-Paste Transition Snippets

**All Props**
```css
transition: 0.4s cubic-bezier(0.84, 0, 0.16, 1);
```

**All Props**
```css
transition: 0.4s cubic-bezier(0.84, 0, 0.16, 1) 0.08s;
```

**Background**
```css
transition: background-color 0.3s, color 0.3s;
```

**Transform**
```css
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), translate 0.3s cubic-bezier(0.4, 0, 0.2, 1), scale 0.3s cubic-bezier(0.4...;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `pulse` | Custom |  | Attention / status |
| `loop` | Custom |  | UI transition |
| `draw` | Custom |  | UI transition |
| `logo-group-marquee` | Custom |  | UI transition |
| `logo-group-marquee-reverse` | Custom |  | UI transition |
| `fade-in` | Custom |  | Element entrance |
| `shimmer` | Custom |  | Loading placeholder |
| `scroll-x` | Custom |  | UI transition |
| `factoid-fade-in` | Custom |  | Element entrance |

### Motion Fingerprint

- **Speed Character**: Cinematic & Slow (median duration: `700ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 9 unique animations (0 total including variants)

> This design moves with cinematic & slow timing using custom cubic-bezier curves, creating a UI that feels slow and cinematic.

## 8. Do's and Don'ts

### Do
- Use dark background (`#000000`) as the foundation — this is a dark-mode-native design
- Use NeueHaasGrotesk as the primary typeface — it defines the brand personality
- Use weight 650 for the heaviest text — this design uses a custom heavy weight, not the standard 700 (bold)
- 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 White (`#ffffff`) as the primary accent — it's the brand's signature interactive color
- Use 30px border-radius on primary buttons — the brand uses generously-rounded CTAs
- Use 12px border-radius on cards — consistent with the grid card corners
- 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
- 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
- Repeat the primary CTA across 3 banner sections — conversion paths are layered, not single

### 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 650 with the standard 700 — the custom value is part of the brand's type personality
- 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 sharp-cornered or pill buttons — 30px is the CTA border-radius standard
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't over-build the footer — this design keeps it minimal (1 cols, 1 links)


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

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

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 639px | Expanded mobile layout |
| Mobile Large | 759px | Expanded mobile layout |
| Desktop | 1039px | Full feature layout |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1420px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `96px` | `60px` |
| heading | line-height | `96px` | `60px` |
| hero | height | `823.719px` | `626.812px` |
| card | width | `1260px` | `358px` |

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

*No major structural differences detected between desktop and mobile widgets. The same blueprints scale rather than collapse — verify by inspecting actual mobile render.*


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image.
- **WebGL** — GPU 3D/shader graphics (hero atmosphere is rendered, not a flat gradient).
- **Mesh gradients** — 1 multi-stop organic color field(s) as background atmosphere.
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Blend modes** — 1 mix-blend layer(s).

> **Motion fingerprint**: WebGL/3D canvas, mesh gradients, non-rectangular shapes (10), blend modes

## 9b. Visual Tone & Photography

**Tone:** Photography-driven

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

**Canonical Brand Image (OG):**
- https://cdn.shopify.com/b/shopify-brochure2-assets/d617483c5e5cdd01ae8b4f2571c76f34.png?originalWidth=2400&originalHeight=1260
  *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.31:1 (landscape)
- Rendered size: 498×381px
- Alt text: "Image of Steve Madden website selling shoes and accessories"
- *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): 14 (32%)
- Portrait (<0.87): 13 (30%)
- Square (0.87–1.15): 10 (23%)
- Ultra-wide (>2.3): 7 (16%)

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

**Average rendered image size:** 475×334px
**Above-fold image count:** 3 / 44

**Decorative Patterns Detected:**
- 9 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 16 radial gradients — circular color blooms used for spotlight/glow effects

**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:**
- Source authentic photography (or licensed stock that matches the brand mood) — placeholders will visibly degrade the clone.
- Match the dominant aspect ratio (see above) so card grids and hero compositions hold.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Black (`#000000`)
- Primary text: White (`#ffffff`)
- Accent: White (`#ffffff`)
- Border: Slate Grey (`#71717a`)
- Font: NeueHaasGrotesk
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Black background (#000000). Headline at 96px NeueHaasGrotesk weight 400, line-height 1, color #ffffff."
- "Create the primary CTA button: `#ffffff` background, `#ffffff` text, 9999px border-radius, 11px 21px padding, 700 weight, NeueHaasGrotesk font."
- "Design a card on `transparent` background. Border: none. Radius: 12px. Shadow: use extracted shadow. Padding: 0px."
- "Build navigation: static on `#000000`. NeueHaasGrotesk 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Black (`#000000`) — every component is composited against this exact base.
2. **Typography**: All type in NeueHaasGrotesk, weight range 330–650. Never exceed 650 — heavier weights break the brand's tonal restraint.
3. **Accent**: White (`#ffffff`) is the sole interactive color. On hover → Mint (`#7aeb9f`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.84,0,0.16,1)`. Timing: 150ms for micro-interactions, 300ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `0px`, cards at `12px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (8px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-surface-1: #0e0e10;
  --ca-surface-2: #02090a;
  --ca-primary: #ffffff;
  --ca-ink-muted: #e5e7eb;
  --ca-primary-hover: #d4d4d8;
  --ca-on-primary: #111111;
  --ca-hairline: #71717a;
}

/* Typography */
:root {
  --ca-font-primary: "NeueHaasGrotesk", system-ui, sans-serif;
  --ca-text-display: 96px;
  --ca-text-body: 10px;
  --ca-text-small: 16px;
  --ca-text-button: 14px;
}

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

/* Motion */
:root {
  --ca-ease-in: cubic-bezier(.4,0,1,1);
  --ca-ease-in-out: cubic-bezier(.4,0,.2,1);
  --ca-ease-out: cubic-bezier(0,0,.2,1);
}
```


## 13. Page Structure Skeleton

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

```yaml
page-skeleton:
  - section: content-section
    tag: div
    classes: ["gap-y-[68px]", "text-sm", "opacity-0", "pt-[76px]"]
    height: 438px
    width: full-bleed
    layout: flex-row justify=normal
    children: 2
    bg: "rgb(2, 9, 10)"
    tone: dark
    padding: "40px 90px 0px"
  - section: hero
    tag: section
    classes: ["grid", "grid-cols-full", "pb-0", "bg-section-dark-bg"]
    height: 824px
    width: full-bleed
    layout: grid: 1-col gap=0px normal
    children: 2
    bg: "rgb(2, 9, 10)"
    bg-treatment: image
    tone: dark
    vertical-padding: ~36px
    padding: "72px 0px 0px"
  - section: hero
    tag: div
    classes: ["relative"]
    height: 11580px
    width: full-bleed
    layout: block
    children: 4
    vertical-padding: ~80px (generous)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: feature-section
    tag: main
    classes: ["focus-visible:outline-none"]
    height: 11023px
    width: full-bleed
    layout: block
    children: 15
    vertical-padding: ~128px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: feature-section
    tag: div
    classes: ["container", "pt-4xl", "pb-xl", "md:pb-3xl"]
    height: 672px
    width: 1260px
    layout: flex-column justify=flex-end
    children: 2
    vertical-padding: ~153px (airy)
    padding: "225px 0px 80px"
  - section: header
    tag: div
    classes: ["absolute", "top-0", "start-0", "w-full"]
    height: 438px
    width: full-bleed
    layout: block
    children: 2
  - section: header
    tag: div
    classes: ["absolute", "top-0", "start-0", "w-full"]
    height: 615px
    width: full-bleed
    layout: block
    children: 2
  - section: content-section
    tag: div
    height: 653px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~40px
  - section: content-section
    tag: section
    classes: ["grid", "gap-y-2xl", "grid-cols-full", "bg-section-dark-bg"]
    height: 653px
    width: full-bleed
    layout: grid: 1-col gap=64px normal
    children: 2
    bg: "rgb(2, 9, 10)"
    tone: dark
    vertical-padding: ~40px
    padding: "0px 0px 80px"
  - section: unknown
    tag: div
    classes: ["container"]
    height: 128px
    width: 1260px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["container", "max-lg:mr-0", "xl:overflow-hidden"]
    height: 381px
    width: 1260px
    layout: block
    children: 1
  - section: feature-section
    tag: section
    classes: ["grid", "gap-y-2xl", "grid-cols-full", "pb-2xl"]
    height: 653px
    width: full-bleed
    layout: grid: 1-col gap=64px normal
    children: 1
    bg: "rgb(2, 9, 10)"
    tone: dark
    vertical-padding: ~64px (generous)
    padding: "64px 0px"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 525px
    width: 1260px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["video-container", "h-full"]
    height: 525px
    width: 630px
    layout: block
    children: 1
  - section: feature-section
    tag: section
    classes: ["grid", "gap-y-2xl", "grid-cols-full", "pb-2xl"]
    height: 1477px
    width: full-bleed
    layout: grid: 1-col gap=64px normal
    children: 1
    bg: "rgb(2, 9, 10)"
    tone: dark
    vertical-padding: ~64px (generous)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "64px 0px"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 1349px
    width: 1260px
    layout: block
    children: 3
    vertical-padding: ~32px
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: unknown
    tag: div
    classes: ["video-container", "h-full", "relative", "w-full"]
    height: 549px
    width: 1164px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["video-container", "absolute", "size-full", "sm:static"]
    height: 487px
    width: 409px
    layout: flex-row justify=center
    children: 1
  - section: feature-section
    tag: section
    classes: ["grid", "gap-y-2xl", "grid-cols-full", "pb-2xl"]
    height: 828px
    width: full-bleed
    layout: grid: 1-col gap=64px normal
    children: 1
    bg: "rgb(2, 9, 10)"
    tone: dark
    vertical-padding: ~64px (generous)
    padding: "64px 0px"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 700px
    width: 1260px
    layout: block
    children: 2
    vertical-padding: ~32px
  - section: unknown
    tag: div
    classes: ["card", "bg-white", "absolute", "inset-0"]
    height: 310px
    width: 236px
    layout: flex-column justify=normal
    children: 3
    bg: "rgb(255, 255, 255)"
    padding: "16px"
  - section: unknown
    tag: div
    classes: ["video-container", "h-full", "flex"]
    height: 346px
    width: 320px
    layout: flex-row justify=normal
    children: 1
  - section: feature-section
    tag: section
    classes: ["grid", "gap-y-2xl", "grid-cols-full", "pb-4xl"]
    height: 931px
    width: full-bleed
    layout: grid: 1-col gap=64px normal
    children: 1
    bg: "rgb(2, 9, 10)"
    tone: dark
    vertical-padding: ~96px (airy)
    padding: "64px 0px 128px"
  - section: feature-section
    tag: div
    classes: ["container"]
    height: 739px
    width: 1260px
    layout: block
    children: 3
    vertical-padding: ~32px
  - section: feature-section
    tag: section
    classes: ["grid", "gap-y-2xl", "grid-cols-full", "bg-section-dark-bg"]
    height: 857px
    width: full-bleed
    layout: grid: 1-col gap=64px normal
    children: 1
    bg: "rgb(2, 9, 10)"
    bg-treatment: linear-gradient
    tone: dark
    vertical-padding: ~100px (airy)
    padding: "100px 0px"
```

**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:
    - "store they line up for"
    - "Your brand has entered the chat"
    - "Meet your secret weapon, Sidekick"
    - "There’s no better place for you to build"
  sub-headings:
    - "Sell more in more places"
    - "Grow around the world"
    - "For anyone from entrepreneurs to enterprise"
    - "Your very own commerce AI"
    - "What winning looks like"
    - "Customize everything with apps"
  ctas:
    - "Reject all"
    - "Skip to Content"
    - "Get started fast You could be selling by tomorrow."
    - "World's best checkout Proven to convert better."
    - "Sidekick Your commerce-obsessed AI assistant."
    - "Sidekick Pulse"
  navigation:
    - "Website Builder"
    - "Themes"
    - "Domains"
    - "Customer Accounts"
    - "Sidekick"
    - "Online"
    - "AI Chats"
    - "Point of Sale"
    - "Shop App"
    - "Social & Marketplaces"
  footer-links:
    - "Hell Babes"
    - "What is Shopify?"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 1
    avg-ratio: 3.50
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Shopify"
  hero:
    count: 4
    avg-ratio: 3.50
    common-aspect: "~16:6 banner"
  product:
    count: 6
    avg-ratio: 0.97
    common-aspect: "~1:1 square"
    sample-alts:
      - "Get started fast"
      - "Switch to Shopify"
      - "Trusted by enterprise brands"
  editorial:
    count: 3
    avg-ratio: 0.57
    common-aspect: "~9:16 portrait"
    sample-alts:
      - "Image of Ornot website selling cycling apparel"
      - "Image of Kotn website selling ethically made essentials"
      - "Image of FTC website selling skateboarding apparel"
  thumbnail:
    count: 6
    avg-ratio: 0.95
    common-aspect: "~1:1 square"
    sample-alts:
      - "ChatGPT"
      - "Google"
      - "Copilot"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Action
</button>
```
_Source pattern detected: padding `0px` · radius `0px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `72px 0px 0px` · radius `0px` · 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** 37 · **cta** 2 · **auth** 1 · **pricing** 1 · **social** 3 · **legal** 1 · **footer** 2 · **other** 13

**Primary actions (conversion path):**
- Primary call-to-action — "Get started fast You could be selling by tomorro" (the conversion path) → `https://www.shopify.com/start`
- Account access — "Log in" (login/signup) → `https://www.shopify.com/login?ui_locales=en`
- Primary call-to-action — "Start for free" (the conversion path) → `https://admin.shopify.com/signup?locale=en&language=en&signup_page=https%3A%2F%2Fwww.shopify.com%2F&signup_types%5B%5D=paid_trial_experience`

**Signals:** 44/60 links carry a featured image · dominant link roles: navigation (37), inline-link (10), footer-link (6).


---
## Extraction Completeness: 87/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 22 named colors |
| Typography | 20 | 20 | 10 roles defined |
| Components | 12 | 20 | 3 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes (intercepted CSS), easing vars |
| CSS Custom Properties | 10 | 10 | 309 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 (IBMPlexMono, PolySans, DrukCondSuper)** — 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 |
|----------|----------------|-------------------|
| **Keyframe animations** | No @keyframes declarations found (transitions only) | Use CSS transitions for state changes; avoid complex scroll-based animations |
| **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 | 309 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 10 typography roles inferred |
| §4 Components | Medium | 3 component variants captured |
| §7 Motion | Medium | Transitions only |
| §8 Do's/Don'ts | High | 23 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 44 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

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

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'IBMPlexMono';
  /* src: url('/fonts/IBMPlexMono.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBMPlexMono';
  /* src: url('/fonts/IBMPlexMono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBMPlexMono';
  /* src: url('/fonts/IBMPlexMono.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBMPlexMono';
  /* src: url('/fonts/IBMPlexMono.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PolySans';
  /* src: url('/fonts/PolySans.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PolySans';
  /* src: url('/fonts/PolySans.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PolySans';
  /* src: url('/fonts/PolySans.woff2') format('woff2'); */
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'PolySans';
  /* src: url('/fonts/PolySans.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DrukCondSuper';
  /* src: url('/fonts/DrukCondSuper.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DrukTextHeavy';
  /* src: url('/fonts/DrukTextHeavy.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FT88';
  /* src: url('/fonts/FT88.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roslindale';
  /* src: url('/fonts/Roslindale.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trap';
  /* src: url('/fonts/Trap.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trap';
  /* src: url('/fonts/Trap.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trap';
  /* src: url('/fonts/Trap.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trap';
  /* src: url('/fonts/Trap.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FeatureDisplay';
  /* src: url('/fonts/FeatureDisplay.woff2') format('opentype'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FeatureDisplay';
  /* src: url('/fonts/FeatureDisplay.woff2') format('opentype'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FeatureDisplay';
  /* src: url('/fonts/FeatureDisplay.woff2') format('opentype'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GoodSans';
  /* src: url('/fonts/GoodSans.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'GoodSans';
  /* src: url('/fonts/GoodSans.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'GoodSans';
  /* src: url('/fonts/GoodSans.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'PathwayGothicOne';
  /* src: url('/fonts/PathwayGothicOne.woff2') format('truetype'); */
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'GraphikCondensed';
  /* src: url('/fonts/GraphikCondensed.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'GTSuperDisplay';
  /* src: url('/fonts/GTSuperDisplay.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GTSuperDisplay';
  /* src: url('/fonts/GTSuperDisplay.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GTSuperDisplay';
  /* src: url('/fonts/GTSuperDisplay.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GTSuperTextBook';
  /* src: url('/fonts/GTSuperTextBook.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GTSuperText';
  /* src: url('/fonts/GTSuperText.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GTSuperText';
  /* src: url('/fonts/GTSuperText.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NaturalMarkerItalic';
  /* src: url('/fonts/NaturalMarkerItalic.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NaturalMarker';
  /* src: url('/fonts/NaturalMarker.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GaramondNovaProCondensedLight';
  /* src: url('/fonts/GaramondNovaProCondensedLight.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GaramondNovaProCondensedLightItalic';
  /* src: url('/fonts/GaramondNovaProCondensedLightItalic.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GTAmericaMono';
  /* src: url('/fonts/GTAmericaMono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter-Variable';
  /* src: url('/fonts/Inter-Variable.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ShopifySans';
  /* src: url('/fonts/ShopifySans.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ShopifySans';
  /* src: url('/fonts/ShopifySans.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ShopifySans';
  /* src: url('/fonts/ShopifySans.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ShopifySans';
  /* src: url('/fonts/ShopifySans.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ShopifySans';
  /* src: url('/fonts/ShopifySans.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ShopifySans';
  /* src: url('/fonts/ShopifySans.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NeueHaasGrotesk';
  /* src: url('/fonts/NeueHaasGrotesk.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NeueHaasGrotesk';
  /* src: url('/fonts/NeueHaasGrotesk.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NeueHaasGrotesk';
  /* src: url('/fonts/NeueHaasGrotesk.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  /* src: url('/fonts/Noto-Sans-JP.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  /* src: url('/fonts/Noto-Sans-JP.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  /* src: url('/fonts/Noto-Sans-JP.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  /* src: url('/fonts/Noto-Sans-JP.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  /* src: url('/fonts/Noto-Sans-JP.woff2') format('woff2'); */
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  /* src: url('/fonts/Noto-Sans-JP.woff2') format('woff2'); */
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes pulse { ... }
@keyframes loop { ... }
@keyframes draw { ... }
@keyframes logo-group-marquee { ... }
@keyframes logo-group-marquee-reverse { ... }
@keyframes fade-in { ... }
@keyframes shimmer { ... }
@keyframes scroll-x { ... }
@keyframes factoid-fade-in { ... }
```

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

```css
@keyframes pulse{50%,to{opacity:0;transform:scale(1.4)}}
@keyframes loop{0%{offset-distance:var(--start-offset,-20%)}40%,to{offset-distance:var(--offset,80%)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes logo-group-marquee{0%{transform:translate(calc(-100% - 1.5rem))}
@keyframes logo-group-marquee-reverse{0%{transform:translate(0)}
@keyframes fade-in{0%{opacity:0}
@keyframes shimmer{0%{background-position:100%}
@keyframes scroll-x{0%{transform:translate(-100%)}
@keyframes factoid-fade-in{0%{opacity:0}
```
</details>

### Brand Gradient Palette

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

```css
/* Gradient 1 */
background: linear-gradient(to right,#0000 -1rem,#0000 0%,#ff450033 0%,#ff450033 calc(25% - 1rem*(.75);

/* Gradient 2 */
background: linear-gradient(to right,#0000 -1rem,#0000 0%,#ff450033 0%,#ff450033 calc(12.5% - 1rem*(.875);

/* Gradient 3 */
background: linear-gradient(to right,#0000 -1rem,#0000 0%,#ff450033 0%,#ff450033 calc(8.3% - 1rem*(.9);

/* Gradient 4 */
background: linear-gradient(to right,#0000 -1.5rem,#0000 0%,#ff450033 0%,#ff450033 calc(8.3% - 1.5rem*(.9);

/* Gradient 5 */
background: radial-gradient(#1c4e50,#133032 34%,#091a1c 70%,#061a1c 100%);

```

### Hover State CSS (Intercepted)

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

```css
div[data-mode=dark] input:-webkit-autofill:hover{-webkit-background-clip:text}

[data-mode=light] input:-webkit-autofill:hover{-webkit-background-clip:text}

.richtext a:not(.no-richtext a):hover,.link:hover,.richtext a:not(.no-richtext a):active,.link:active{text-decoration-line:none}

a.arrow-animation:hover:after,span.arrow-animation:hover:after,.arrow-animation>a:hover:after{--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y);opacity:1}
```

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

### Real Responsive Breakpoints
**32 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`320px` · `430px` · `480px` · `499px` · `500px` · `639px` · `640px` · `759px` · `760px` · `768px` · `771px` · `899px` · `900px` · `1039px` … (+18 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×838 · `14px`×404 · `18px`×91 · `96px`×90 · `20px`×48 · `55px`×28 · `12px`×22 · `48px`×16

**Radius scale** (× = paint count): `12px`×36 · `4px`×17 · `9999px`×12 · `5px`×12 · `8px`×11 · `340px`×6 · `20px`×6 · `48px`×5

**Weights** (× = paint count): `400`×945 · `420`×375 · `500`×136 · `330`×50 · `550`×28 · `360`×12 · `450`×8 · `600`×6

**Layout gaps** (× = paint count): `normal 16px`×25 · `64px normal`×13 · `12px`×9 · `16px`×8 · `6px`×8 · `40px normal`×6 · `normal 2px`×4 · `24px`×4

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.1) 0px 8px 8px 0px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px, rgba(0, 0, 0, 0.1) 0px 2px 2px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset
rgb(0, 0, 0) 0px 0px 0px 2px
rgba(255, 255, 255, 0.03) 0px 0.929px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 0.929px, rgba(0, 0, 0, 0.1) 0px 1.858px 1.858px 0px, rgba(0, 0, 0, 0.1) 0px 3.717px 3.717px 0px
rgba(0, 0, 0, 0.25) 0px 25px 50px -12px
```

### 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-color:var(--color-black) }
body { font-family:var(--font-neuehaas) }
header { font-family:var(--font-base) }
header { color:var(--color-theme-content-header) }
h1 { font-size:var(--font-size-dsp); font-weight:var(--tw-font-weight,var(--font-weight-dsp)) }
h2 { font-size:var(--font-size-dsp); font-weight:var(--tw-font-weight,var(--font-weight-dsp)) }
button { font-family:Inter, Helvetica, Arial, sans-serif; font-size:14px }
a { font-family:Inter, Helvetica, Arial, sans-serif; font-size:14px }
a { color:white }
a { font-size:clamp(8px, 2.5cqw, 10px); color:white }
card { background-color:#02090a }
card { color:#fff }
```

> 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://shopify.com | 2026-06-11T05:02:24.278Z*
*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.*