Bold dark commerce: black-to-deep-green canvas, bright mint #36f4a4 accent, huge Neue Haas display, white pill CTAs, and the Polaris green admin.
Browse Shopify in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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).
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.
| 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 |
| Token | Hex | Role / usage |
|---|---|---|
| border | rgba(255,255,255,.1) | Hairline dividers on dark |
| 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 |
| 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.
NeueHaasGrotesk, Helvetica, Arial, sans-serif. Neue Haas Grotesk — a crisp Swiss grotesque.| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.