packages/shared-skills/skills/frontend/references/design/shopify.md
Shopify.com is a dark-first digital theatre — a website that stages its commerce platform like a cinematic premiere. The entire experience unfolds against an abyss of near-black surfaces that carry the faintest whisper of deep forest green (#02090A, #061A1C, #102620), creating a nocturnal atmosphere that feels less like a SaaS marketing page and more like an exclusive product reveal at a tech keynote. This darkness isn't cold or corporate — it's the warm, enveloping dark of a luxury experience, like sitting in the front row of a darkened auditorium.
The typography is the undeniable star. NeueHaasGrotesk — a refined Helvetica descendant — appears at monumental scale (96px) with impossibly light weight (330-400), creating headlines that feel etched in light rather than printed in ink. The ss03 OpenType feature gives letterforms a distinctive character that separates Shopify's type from generic Helvetica usage. Below the display layer, Inter Variable handles body text with surgical precision, using equally unusual variable weights (420, 450, 550) that live in the spaces between traditional weight stops. This precision signals a company that sweats every detail.
Color is used with extreme restraint. The primary accent is Shopify Neon Green (#36F4A4) — an electric mint that appears exclusively on focus rings and accent highlights, pulsing like a bioluminescent signal against the dark canvas. Softer green tints (Aloe #C1FBD4, Pistachio #D4F9E0) provide atmospheric washes. White is the only text color that matters on dark surfaces, while a zinc-based neutral scale (#A1A1AA through #3F3F46) handles the hierarchy of quiet information. The result is a design that makes commerce technology feel like it belongs in a science-fiction future.
Key Characteristics:
#36F4A4) as the singular high-energy accent against darkness#FFFFFF): Primary text on dark surfaces, button fills, high-contrast elements#000000): Body background, button text on white, maximum contrast base (--color-shade-100)#36F4A4): The signature accent — focus rings, interactive highlights, active state indicators. Electric and bioluminescent#C1FBD4): Soft green wash for decorative backgrounds, atmospheric cards (--color-aloe-10)#D4F9E0): Lightest green tint for subtle surface differentiation (--color-pistachio-10)#000000): Root page background — true black for maximum depth#02090A): Card surfaces, content containers — near-black with green undertone#061A1C): Section backgrounds with visible green character#102620): Elevated dark surfaces, header backgrounds — the warmest dark shade#1E2C31): Card borders on dark surfaces, subtle boundary definition#D4D4D8): Lightest neutral, barely-there borders on dark (--color-shade-30)#A1A1AA): Secondary text, metadata, descriptions — the quiet voice#71717A): Tertiary text, timestamps, least important info (--color-shade-50)#52525B): Disabled text, decorative neutrals (--color-shade-60)#3F3F46): Subtle dividers, barely-visible UI boundaries (--color-shade-70)#E4E4E7): Borders on light surfaces (rare — only in light-mode modals)#9797A2): Muted link text with underline decoration#9DABAD): Teal-tinted muted links#BDBDCA): Lighter link variant#99B3AD): Green-tinted link variant for themed sections#102620 center to #02090A edge — used behind product showcasesDisplay: NeueHaasGrotesk (refined Helvetica descendant, variable font)
ss03 (stylistic set 3 — distinctive letterform alternates)Body: Inter-Variable
ss03Mono: ui-monospace
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|
| Display XL | 96px | 400 | 1.00 | — | NeueHaasGrotesk, hero headlines, "ss03" |
| Display XL Bold | 90.74px | 750 | 1.00 | 4.54px | NeueHaasGrotesk, emphasis display |
| Display XL Tracked | 96px | 400 | 1.00 | 2.4px | NeueHaasGrotesk, spaced display |
| Display Light | 96px | 330 | 0.96 | — | NeueHaasGrotesk, ethereal display |
| Heading 1 | 70px | 330 | 1.00 | — | NeueHaasGrotesk, section titles |
| Heading 2 | 55px | 330 | 1.16 | — | NeueHaasGrotesk, subsections |
| Heading 3 | 48px | 330 | 1.14 | — | NeueHaasGrotesk, feature titles |
| Heading 4 | 32px | 360 | 1.14 | 0.32px | NeueHaasGrotesk, card headings |
| Heading 5 | 28px | 500 | 1.28 | 0.42px | NeueHaasGrotesk, small headings |
| Heading 6 | 24px | 400 | 1.14 | 0.36px | NeueHaasGrotesk, minor headings |
| Body Large | 20px | 500 | 1.40 | 0.3px | NeueHaasGrotesk / Inter, lead paragraphs |
| Body | 18px | 400 | 1.56 | — | Inter-Variable, standard body |
| Body Medium | 18px | 550 | 1.56 | — | Inter-Variable, emphasized body |
| Body Small | 16px | 400 | 1.50 | — | Inter / NeueHaasGrotesk, compact body |
| Body Small Medium | 16px | 420 | 1.50 | — | Inter-Variable, slightly emphasized |
| Button | 16px | 400 | 1.50 | — | NeueHaasGrotesk, CTA text |
| Nav Link | 18px | 500 | 1.25 | 0.72px | NeueHaasGrotesk, navigation items |
| Caption | 14px | 500 | 1.49 | 0.28px | NeueHaasGrotesk / Inter, metadata |
| Caption Medium | 14px | 550 | 1.49 | 0.28px | Inter-Variable, emphasized caption |
| Overline | 15.36px | 400 | 1.50 | 1.54px | NeueHaasGrotesk, wide-tracked labels |
| Micro | 13px | 500 | 1.50 | -0.13px | Inter, tight-tracked small text |
| Label | 12px | 400 | 1.20 | 0.72px | Inter, uppercase labels |
| Code | 16px | 400 | 1.50 | — | ui-monospace, uppercase, code blocks |
| Code Small | 12px | 400 | 1.33 | — | ui-monospace, uppercase, inline code |
Shopify's typography is a masterclass in variable font precision. The display layer lives almost exclusively at weights 330-400 — featherweight text that appears to hover above the dark background like projected light. This is the opposite of the bold, heavy approach most SaaS sites take: where others shout, Shopify whispers at scale. The 96px headlines at weight 330 create a paradox of enormous size and delicate stroke that feels both monumental and fragile. The ss03 OpenType feature activates a stylistic set that gives specific characters (likely 'a', 'g', and certain numerals) a more refined appearance, distinguishing Shopify's typography from standard Helvetica Neue usage. Inter Variable handles the body layer with surgical precision, using weights like 420 and 550 that exist between the traditional stops — every piece of text has exactly the visual weight it needs.
Primary (White Fill)
#FFFFFF)#000000)#36F4A4 (Neon Green) outline ringSecondary (Ghost/Outlined)
#FFFFFF)#FFFFFF)#36F4A4 outlineBadge/Tag (Neutral Filled)
rgba(255, 255, 255, 0.2) (frosted glass)#FFFFFF)#02090A) on dark pages#1E2C31 (Dark Card Border) — barely visible boundaryrgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px + rgba(255,255,255,0.03) 0px 1px 0px inset#061A1C)#FFFFFF)#3F3F46 (Shade-70)#36F4A4 (Neon Green focus ring)#71717A)#102620) on scroll#A1A1AA) or gain underlineBase unit: 8px
| Token | Value | Use |
|---|---|---|
| space-1 | 4px | Tight inline gaps |
| space-2 | 8px | Base unit, icon gaps |
| space-3 | 12px | Card padding, tight margins |
| space-4 | 16px | Standard element padding |
| space-5 | 24px | Card gaps, section padding |
| space-6 | 28px | Medium section spacing |
| space-7 | 32px | Section breaks |
| space-8 | 36px | Large padding |
| space-9 | 40px | Major section padding |
| space-10 | 64px | Hero section padding, large gaps |
Shopify's whitespace strategy is theatrical. Sections are separated by vast expanses of dark space — 80px to 120px of pure black breathing room — that create the pacing of a presentation, not a webpage. Each content block is its own "slide" in a keynote-style scroll. Within sections, spacing is tighter and more deliberate, creating focal density against the expansive void. The contrast between macro-level emptiness and micro-level precision is what gives the site its cinematic cadence.
| Value | Context |
|---|---|
| 4px | Tags, badges, micro-elements |
| 8px | Standard cards, inputs, video containers |
| 12px | Featured cards, image containers, buttons (non-pill) |
| 20px | Top-rounded cards (20px 20px 0 0), modal headers |
| 340px | Large rounded decorative elements |
| 9999px | Pill buttons, pill badges, nav elements |
| Level | Treatment | Use |
|---|---|---|
| Base | No shadow, dark surface | Default page background |
| Subtle | rgba(0,0,0,0.1) 0px 0px 0px 1px + inset white glow | Resting cards |
| Medium | Multi-layer: 1px ring + 2px + 4px + 8px shadow stack | Elevated cards, featured sections |
| High | rgba(0,0,0,0.25) 0px 25px 50px -12px | Modals, dropdowns, overlays |
| Focus | 0px 0px 0px 2px #36F4A4 | Keyboard focus ring (Neon Green) |
Shopify's shadow system is unusually sophisticated. Rather than single-value shadows, cards use a stacked, multi-layer approach: a 1px ring for boundary definition, 2px/4px/8px progressive blurs for natural light falloff, and a delicate inset white glow (rgba(255,255,255,0.03)) that simulates a top-lit glass surface. On dark backgrounds, shadows darken from already-dark surfaces, so the shadows function more as "ambient occlusion" than traditional elevation — the card appears to sink slightly into the surface rather than float above it.
#36F4A4) exclusively for focus states and critical accent highlightsss03 OpenType feature across all text — it's part of the typographic identity| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, hamburger nav, display text scales to 48px, 16px padding |
| Tablet | 640-1024px | 2-column grids begin, display text at 70px, 32px padding |
| Desktop | 1024-1440px | Full layout, expanded nav, 96px display, 64px padding |
| Large Desktop | >1440px | Max-width container centered, increased section spacing |
cdn.shopify.com) with responsive srcset#FFFFFF)#000000)#02090A)#061A1C)#102620)#36F4A4)#FFFFFF)#A1A1AA)#1E2C31)When refining existing screens generated with this design system:
box-shadow value won't capture the Shopify card feelss03 OpenType feature must be active on all text for typographic consistency