Shopify

---
version: alpha
name: "Shopify Marketing 2024"
description: "Primary visual anchor uses #e5e7eb with dividers, borders, and hairlines across the page; highest frequency color in cssom (1043 hits). Typography baseline relies on NeueHaasGrotesk, Helvetica, Arial, sans-serif for hero headline — 'be the next household name'; confirmed by probe h2.text-dsp fontsize:96px."
colors:
  border-gray: "#e5e7eb"
  dark-teal-surface: "#061a1c"
  light-gray-surface: "#f4f4f5"
  near-black: "#000000"
  surface-dark: "#02090a"
  muted-gray: "#a1a1aa"
  shopify-green: "#36f4a4"
  white: "#ffffff"
typography:
  display-hero:
    fontFamily: "NeueHaasGrotesk, Helvetica, Arial, sans-serif"
    fontSize: "96px"
    fontWeight: "400"
    lineHeight: "96px"
  display-large:
    fontFamily: "NeueHaasGrotesk, Helvetica, Arial, sans-serif"
    fontSize: "55px"
    fontWeight: "330"
    lineHeight: "64px"
  display-medium:
    fontFamily: "NeueHaasGrotesk, Helvetica, Arial, sans-serif"
    fontSize: "48px"
    fontWeight: "330"
    lineHeight: "54.72px"
  heading-3:
    fontFamily: "NeueHaasGrotesk, Helvetica, Arial, sans-serif"
    fontSize: "32px"
    fontWeight: "360"
    lineHeight: "36.48px"
    letterSpacing: "0.32px"
  subheading:
    fontFamily: "NeueHaasGrotesk, Helvetica, Arial, sans-serif"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "28px"
    letterSpacing: "0.3px"
  label-uppercase:
    fontFamily: "NeueHaasGrotesk, Helvetica, Arial, sans-serif"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "22.56px"
    letterSpacing: "0.72px"
  body-base:
    fontFamily: "NeueHaasGrotesk, Helvetica, Arial, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  ui-base:
    fontFamily: "Inter-Variable, Helvetica, Arial, sans-serif"
    fontSize: "14px"
    fontWeight: "420"
    lineHeight: "20px"
  ui-small:
    fontFamily: "Inter-Variable, Helvetica, Arial, sans-serif"
    fontSize: "12px"
    fontWeight: "420"
    lineHeight: "14.4px"
    letterSpacing: "0.72px"
  button-large:
    fontFamily: "NeueHaasGrotesk, Helvetica, Arial, sans-serif"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "22.56px"
    letterSpacing: "0.72px"
  code:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  shopify-sans-small:
    fontFamily: "Shopify Sans"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "21px"
rounded:
  radius-sm: "4px"
  radius-md: "8px"
  radius-lg: "12px"
  radius-xl: "16px"
  radius-2xl: "30px"
  radius-pill: "9999px"
  radius-card-hero: "340px"
spacing:
  space-1: "4px"
  space-2: "8px"
  space-3: "12px"
  space-4: "16px"
  space-5: "24px"
  space-6: "32px"
  space-7: "40px"
  space-8: "64px"
  space-9: "80px"
  space-10: "90px"
  space-11: "128px"
---

## Overview

Primary visual anchor uses #e5e7eb with dividers, borders, and hairlines across the page; highest frequency color in cssom (1043 hits). Typography baseline relies on NeueHaasGrotesk, Helvetica, Arial, sans-serif for hero headline — 'be the next household name'; confirmed by probe h2.text-dsp fontsize:96px.

This system uses a 4px base grid with scale values 4, 8, 12, 16, 24, 32, 40, 64, 80, 90, 128.

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## Colors

The palette uses 8 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **surface-background** maps to `surface-dark`: Role "background" is grounded by usage context "Hero section and primary dark surface background; confirmed by probe backgroundColor: rgb(2,9,10) on hero section".
- **action-text** maps to `white`: Role "text" is grounded by usage context "Primary text on dark surfaces, nav links, hero headline, button labels".
- **surface-text** maps to `shopify-green`: Role "text" is grounded by usage context "Brand accent color used in logo mark, highlight elements, and decorative accents on dark backgrounds".
- **border-primary** maps to `border-gray`: Role "primary" is grounded by usage context "Dividers, borders, and hairlines across the page; highest frequency color in CSSOM (1043 hits)".

### Primary Brand
- **Border Gray** (#e5e7eb): Dividers, borders, and hairlines across the page; highest frequency color in CSSOM (1043 hits). Role: primary. {authored: rgb(229, 231, 235), space: rgb}

### Text Scale
- **Muted Gray** (#a1a1aa): Secondary/subdued text, footer links, disabled states. Role: text. {authored: rgb(161, 161, 170), space: rgb}
- **Shopify Green** (#36f4a4): Brand accent color used in logo mark, highlight elements, and decorative accents on dark backgrounds. Role: text. {authored: rgb(54, 244, 164), space: rgb}
- **White** (#ffffff): Primary text on dark surfaces, nav links, hero headline, button labels. Role: text. {authored: rgb(255, 255, 255), space: rgb, alpha: 0.1}

### Surface & Shadows
- **Dark Teal Surface** (#061a1c): Deep teal-black surface used in lower page sections. Role: background. {authored: rgb(6, 26, 28), space: rgb}
- **Light Gray Surface** (#f4f4f5): Light card and section backgrounds in footer/content areas. Role: background. {authored: rgb(244, 244, 245), space: rgb}
- **Near Black** (#000000): Navigation bar background and deep surface fills. Role: background. {authored: rgb(0, 0, 0), space: rgb}
- **Surface Dark** (#02090a): Hero section and primary dark surface background; confirmed by probe backgroundColor: rgb(2,9,10) on hero section. Role: background. {authored: rgb(2, 9, 10), space: rgb}

## Typography

Typography uses NeueHaasGrotesk, Helvetica, Arial, sans-serif, Inter-Variable, Helvetica, Arial, sans-serif, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace, Shopify Sans across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes NeueHaasGrotesk, Helvetica, Arial, sans-serif and Inter-Variable, Helvetica, Arial, sans-serif and ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace and Shopify Sans for visual contrast. Weight range spans regular, medium. Sizes range from 12px to 96px.

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero headline — 'Be the next household name'; confirmed by probe h2.text-dsp fontSize:96px | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 96px | 400 | 96px | normal | NeueHaasGrotesk, Helvetica, Arial, sans-serif | Extracted token |
| Large section headings and sub-hero display text | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 55px | 330 | 64px | normal | NeueHaasGrotesk, Helvetica, Arial, sans-serif | Extracted token |
| Mid-page section headings | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 48px | 330 | 54.72px | normal | NeueHaasGrotesk, Helvetica, Arial, sans-serif | Extracted token |
| Tertiary headings and feature section titles | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 32px | 360 | 36.48px | 0.32px | NeueHaasGrotesk, Helvetica, Arial, sans-serif | Extracted token |
| Subheadings and lead body text | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 20px | 400 | 28px | 0.3px | NeueHaasGrotesk, Helvetica, Arial, sans-serif | Extracted token |
| Section labels, eyebrow text, and navigation items | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 18px | 500 | 22.56px | 0.72px | NeueHaasGrotesk, Helvetica, Arial, sans-serif | Extracted token |
| Primary body copy; most frequent typography tuple (463 hits) | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 16px | 400 | 24px | normal | NeueHaasGrotesk, Helvetica, Arial, sans-serif | Extracted token |
| UI labels, nav items, footer links, and small interactive elements (240 hits) | Inter-Variable, Helvetica, Arial, sans-serif | 14px | 420 | 20px | normal | Inter-Variable, Helvetica, Arial, sans-serif | Extracted token |
| Micro labels, badges, and caption text | Inter-Variable, Helvetica, Arial, sans-serif | 12px | 420 | 14.4px | 0.72px | Inter-Variable, Helvetica, Arial, sans-serif | Extracted token |
| CTA button text; confirmed by probe button.self-center fontSize:18px | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 18px | 500 | 22.56px | 0.72px | NeueHaasGrotesk, Helvetica, Arial, sans-serif | Extracted token |
| Code snippets and technical content | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace | 16px | 400 | 24px | normal | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace | Extracted token |
| Internal Shopify Sans usage for specific branded UI elements | Shopify Sans | 14px | 400 | 21px | normal | Shopify Sans, Helvetica, Arial, sans-serif; features: "ss03" | Extracted token |

## Layout

Layout rhythm is inferred from spacing tokens and responsive breakpoint evidence.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| space-1 | 4px | 4 | Extracted spacing token |
| space-2 | 8px | 8 | Extracted spacing token |
| space-3 | 12px | 12 | Extracted spacing token |
| space-4 | 16px | 16 | Extracted spacing token |
| space-5 | 24px | 24 | Extracted spacing token |
| space-6 | 32px | 32 | Extracted spacing token |
| space-7 | 40px | 40 | Extracted spacing token |
| space-8 | 64px | 64 | Extracted spacing token |
| space-9 | 80px | 80 | Extracted spacing token |
| space-10 | 90px | 90 | Mapped to --space-xl |
| space-11 | 128px | 128 | Mapped to --space-2xl |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-color | rgb(255, 255, 255) ; rgb(161, 161, 170) ; rgb(0, 0, 0) |
| Light | outline-width | 3px ; 2px |
| Light | outline-offset | 0px ; 2px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -1571.78, 0) ; matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.02, 0, 0, -20, 1.4) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 4px | 4 | Subtle corner |
| radius-md | 8px | 8 | Control corner |
| radius-lg | 12px | 12 | Control corner |
| radius-xl | 16px | 16 | Card corner |
| radius-2xl | 30px | 30 | Large surface corner |
| radius-card-hero | 340px | 340 | Large surface corner |
| radius-pill | 9999px | 9999 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 4px | px |
| radius-md | 8px | px |
| radius-lg | 12px | px |
| radius-xl | 16px | px |
| radius-2xl | 30px | px |
| radius-pill | 9999px | px |
| radius-card-hero | 340px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Core token rhythm without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints

No distinct responsive breakpoints were extracted.

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.