# Shopify — Marketing Site Design Spec

> Source: shopify.com (live DOM, computed styles + color census), 2026-07-06; motion + backgrounds re-captured 2026-07-07.
> Coverage: marketing site (current dark theme). Product (Admin / Polaris): `needs-dashboard` (login required). Responsive: not captured (stylesheets cross-origin).

## 1. Visual Theme & Atmosphere

Bold, editorial, confident commerce — the merchant platform presented as a fashion campaign. The canvas runs black to deep green, lit by a single bright mint accent that appears as a highlighted word, a mark, or a link. Type carries the design: huge Neue Haas Grotesk display set at regular/light weights, poster-scale and Swiss in character. Controls stay quiet — crisp white pill CTAs and translucent secondary chips — so the accent and the display type do the talking. Feels: ambitious, sleek, credible.

## 2. Color Palette & Roles

### Surfaces (near-black → deep green)
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Base canvas |
| ink-900 | `#02090a` | Deepest panel |
| green-950 | `#061a1c` | Deep teal-green section |
| green-900 | `#041e18` | Deep green block |
| green-800 | `#102620` | Raised green surface |
| navy-950 | `#000a1e` | Deep blue-green variant |

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| border | `rgba(255,255,255,.1)` | Hairline dividers on dark |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Primary text |
| gray-400 | `#a1a1aa` | Secondary text |
| gray-green | `#9dabad` | Muted text on green surfaces |
| black | `#000000` | Text on the white pill button |

### Accent
| Token | Hex | Role / usage |
|---|---|---|
| mint | `#36f4a4` | Signature bright accent — highlights, marks, links on dark |
| polaris-green | `#008060` | Classic Shopify Admin (Polaris) green — product/admin UI only |

Rule: the marketing canvas is black + deep-green with white text; the bright mint `#36f4a4` is the single loud accent (a highlighted word, a mark, a link). Buttons are white, not mint. The classic `#008060` belongs to the Admin product surface.

## 3. Typography Rules

- Font stack: `NeueHaasGrotesk, Helvetica, Arial, sans-serif`. Neue Haas Grotesk — a crisp Swiss grotesque.
- Body: 16px / 400 / white on dark.
- **Display is huge at regular/light weights** (400, some sections ~330 via the variable axis) — editorial, poster-scale.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 96 / 96 | 400 | ~0 (some lines +2.4px) |
| Section (h2) | 55 | 330–400 | 0 |
| Subhead | 20–24 | 400 | 0 |
| Body | 16 / 24 | 400 | 0 |
| UI / button | 16–18 | 550 | 0 |
| Caption | 13–14 | 400 | 0 |

Pattern: enormous Swiss display at regular/light weight (poster feel), neutral tracking; buttons carry a slightly heavier 550. Type is the hero, not decoration.

## 4. Component Stylings

### Buttons
- **Primary**: bg white, black text, weight 550, full pill (`9999px`), h44–56, 16–18px, padding `8–12px 20–24px`. Hover: subtle dim.
- **Secondary**: translucent white `rgba(255,255,255,.2)` fill, white text, radius 4, h47, 16/400, padding `12px 16px`. Used for "Build for AI"-style chips.
- **Ghost / link**: transparent white text; mint `#36f4a4` for accent links.

### Inputs
- Dark surface, 1px `rgba(255,255,255,.1)` border, radius 4–8, white text, gray placeholder. Focus: mint or white border.

### Cards / panels
- Radius 12; deep-green or translucent-white surfaces on dark; product/feature imagery. Admin/storefront mockups pair white cards with the Polaris green.

### Admin / storefront motif (product)
- Shopify Admin (Polaris): light UI with `#008060` green primary buttons, product tables, order rows, sidebar. Storefront: product grid, cart, checkout. On marketing these appear as floating mockups.

### Nav
- Dark/transparent, wordmark left, mega-menu links (white), right: ghost log-in + white pill "Start for free".

## 5. Layout Principles

- Nav: ~72px, dark.
- Hero: giant 96px white headline (a word may be mint) on black/deep-green, subhead, white pill CTA, with a product or brand-campaign image.
- Body: alternating black / deep-green full-bleed sections; 12px-radius cards; big editorial imagery; mint accents; logo wall.
- Spacing: 4px grid; large editorial sections, poster whitespace. Wide poster-like composition, generous whitespace.

## 6. Depth & Elevation

- Radii: buttons/pills `9999px` (full), cards `12px`, chips/secondary buttons `4px`, small `5–8px`, avatars 100%.
- Control heights: primary pill `44–56px`; secondary chip `47px`.
- Elevation: flat on dark; separation via near-black vs deep-green blocks and translucent-white overlays (`rgba(255,255,255,.1–.2)`). Product mockups float with soft shadow.

## 7. Motion

- Scroll reveals: 300–450ms opacity + translate slide-fades — `opacity .3s cubic-bezier(0.4,…)` (45 els), opacity/translate `.3s` (32 + 14 els), opacity/transform/scale `.45s cubic-bezier(0.5,…)` (16 els).
- Interactive micro-transitions: 150–200ms — color/background/border `.2s` (26 els), transform `.15s` (13 els).
- 22 live WAAPI animations at capture. One CSS animation at rest: `scroll-x 240s infinite` — an ultra-slow marquee.
- One full-bleed autoplay background video loop (1512px wide) plus click-to-play product demos; mockups animate content within frames.
- No GSAP / Three.js / Lottie globals detected. Character: cinematic, premium, editorial pacing; mint highlights and marks draw attention.

## 8. Backgrounds, Effects & WebGL

- No canvas/WebGL, no backdrop-filter — atmosphere comes from layered CSS gradients and video, not filters.
- Signature: layered deep-green atmospheric radial glows, with teal `rgb(21,112,118)` as the light-source color fading into black-green `rgb(6,26,28)`:
  - teal glow: radial `rgb(21,112,118)` → transparent; `rgba(21,112,118,.4/.6)` → `rgb(6,26,28)`
  - vignettes: radial `rgb(28,78,80)` → `rgb(19,48,50)` → `rgb(9,26,28)` → `rgb(6,26,28)`; radial `rgb(62,70,70)` → `rgb(15,51,53)` → `rgb(6,26,28)`; radial `rgb(42,67,68)` → `rgb(6,26,28)`
  - dark section fills: linear `rgb(6,26,28)` → `rgb(13,58,45)`; linear `rgb(10,44,48)` → `rgb(6,21,24)`
- Accent gradient: linear mint `rgb(95,213,182)` → purple `rgb(134,92,255)`.
- Photo scrim: linear `rgba(0,0,0,.1)`. Full-bleed autoplay background video as a hero backdrop.

## 9. Do's and Don'ts

### Do
- Keep the marketing canvas black + deep-green with white text; secondary text `#a1a1aa`, muted-on-green `#9dabad`.
- Use bright mint `#36f4a4` as the single loud accent — a highlighted word, a mark, or a link on dark.
- Make primary buttons white full pills with black text at weight 550 (44–56px tall).
- Use translucent-white `rgba(255,255,255,.2)` chips (radius 4) for secondary actions.
- Set display type huge at regular/light weight (96px hero at 400, sections at 330–400) with near-neutral tracking — type is the hero.
- Keep elevation flat: separate sections with near-black vs deep-green blocks, `rgba(255,255,255,.1)` hairlines, and translucent overlays; let product mockups float with soft shadow.
- Space on a 4px grid with large editorial sections and poster whitespace.
- Build atmosphere with layered deep-green radial glows — teal `rgb(21,112,118)` as the light source fading into black-green `rgb(6,26,28)` — over flat fills.
- Keep motion cinematic: 300–450ms opacity+translate scroll reveals, 150–200ms interactive micro-transitions; marquees crawl (240s).

### Don't
- Don't put mint `#36f4a4` on buttons — buttons are white, not mint.
- Don't use the classic `#008060` Polaris green on the marketing surface — it belongs to the Admin product UI.
- Don't introduce a second loud accent — mint is the single loud accent.
- Don't treat type as decoration — the display type carries the design.
- Don't reach for backdrop-filter blurs or WebGL — none observed; depth comes from gradients and video.

## 10. Responsive Behavior

Not captured — shopify.com serves its stylesheets cross-origin, so media-query breakpoints could not be extracted this pass.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Text `#ffffff` · Muted `#a1a1aa` · Border `rgba(255,255,255,.1)` · Accent `#36f4a4`
- Font: `NeueHaasGrotesk, Helvetica, Arial, sans-serif` · Body: 16px · Radius: 9999px pill / 12px card / 4px chip · Control height: 44–56px
- Focus: mint or white input border (ring recipe not captured)

<shopify_design_language>
Use the Shopify (current marketing) design language: a black-to-deep-green dark canvas — base #000 with deep teal-green blocks #061a1c / #041e18 / #102620 — white text (#a1a1aa secondary), separated by rgba(255,255,255,.1) hairlines and translucent overlays. The single loud accent is bright MINT #36f4a4 (a highlighted word, a mark, a link), never on buttons; the classic #008060 Polaris green belongs to the Admin product UI. Font is Neue Haas Grotesk (Swiss grotesque): display is HUGE at regular/light weight (96px hero, weight 400, near-neutral tracking) — poster-scale, editorial; buttons step to 550. Primary button is a WHITE full pill with black text (44-56px); secondary is a translucent-white rgba(255,255,255,.2) chip, radius 4. Cards radius 12, pills 9999, chips 4. Flat elevation on dark via near-black vs deep-green blocks and translucent overlays; product mockups float with soft shadow. Motion 150-300ms, cinematic. Feels: bold, ambitious, sleek, credible commerce. Avoid: mint on buttons, #008060 Polaris green on marketing surfaces, a second loud accent, or treating the display type as mere decoration.
</shopify_design_language>