Shopify

Design System Inspired by Shopify

1. Visual Theme & Atmosphere

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:

• Dark-first design with deep forest-teal undertones (not pure black)

• Ultra-light display typography (weight 330) at monumental scale (96px) creating an ethereal presence

• Neon Green (#36F4A4) as the singular high-energy accent against darkness

• Full-pill buttons (9999px radius) as the primary interactive shape

• Layered, multi-stage box shadows creating photographic depth

• Product screenshots embedded in dark UI contexts, matching the surrounding darkness

• Zinc-based neutral scale for text hierarchy — balanced between warm and cool

2. Color Palette & Roles

Primary

• Shopify White (#FFFFFF): Primary text on dark surfaces, button fills, high-contrast elements

• Shopify Black (#000000): Body background, button text on white, maximum contrast base (--color-shade-100)

Secondary & Accent

• Neon Green (#36F4A4): The signature accent — focus rings, interactive highlights, active state indicators. Electric and bioluminescent

• Aloe (#C1FBD4): Soft green wash for decorative backgrounds, atmospheric cards (--color-aloe-10)

• Pistachio (#D4F9E0): Lightest green tint for subtle surface differentiation (--color-pistachio-10)

Surface & Background

• Void (#000000): Root page background — true black for maximum depth

• Deep Teal (#02090A): Card surfaces, content containers — near-black with green undertone

• Dark Forest (#061A1C): Section backgrounds with visible green character

• Forest (#102620): Elevated dark surfaces, header backgrounds — the warmest dark shade

• Dark Card Border (#1E2C31): Card borders on dark surfaces, subtle boundary definition

Neutrals & Text (Zinc Scale)

• Shade-30 (#D4D4D8): Lightest neutral, barely-there borders on dark (--color-shade-30)

• Muted Text (#A1A1AA): Secondary text, metadata, descriptions — the quiet voice

• Shade-50 (#71717A): Tertiary text, timestamps, least important info (--color-shade-50)

• Shade-60 (#52525B): Disabled text, decorative neutrals (--color-shade-60)

• Shade-70 (#3F3F46): Subtle dividers, barely-visible UI boundaries (--color-shade-70)

• Light Border (#E4E4E7): Borders on light surfaces (rare — only in light-mode modals)

Semantic & Accent

• Link Muted (#9797A2): Muted link text with underline decoration

• Link Sage (#9DABAD): Teal-tinted muted links

• Link Lavender (#BDBDCA): Lighter link variant

• Link Mint (#99B3AD): Green-tinted link variant for themed sections

Gradient System

• Dark Teal Wash: Radial gradient from #102620 center to #02090A edge — used behind product showcases

• Green Atmospheric: Subtle green-tinted ambient gradients behind hero sections, creating depth without solid colors

• Spotlight: Focused bright area fading to black — creates keynote-style presentation lighting

3. Typography Rules

Font Family

Display: NeueHaasGrotesk (refined Helvetica descendant, variable font)

• Fallbacks: Helvetica, Arial, sans-serif

• OpenType features: ss03 (stylistic set 3 — distinctive letterform alternates)

• Available weights: 330, 360, 400, 500, 750 (variable)

• Used for all headings, hero text, and large display elements

Body: Inter-Variable

• Fallbacks: Helvetica, Arial, sans-serif

• OpenType features: ss03

• Available weights: 400, 420, 450, 500, 550 (variable)

• Used for body text, links, buttons, UI elements

Mono: ui-monospace

• Fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New

• Used for code snippets, data labels, technical content

Hierarchy

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

Principles

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.

4. Component Stylings

Buttons

Primary (White Fill)

• Background: White (#FFFFFF)

• Text: Black (#000000)

• Border: 2px solid transparent

• Border radius: full pill (9999px)

• Padding: 12px 26px 12px 16px (asymmetric — more right padding for visual balance)

• Hover: slight opacity reduction or background shift

• Focus: 2px #36F4A4 (Neon Green) outline ring

• Transition: all 200ms ease

Secondary (Ghost/Outlined)

• Background: transparent

• Text: White (#FFFFFF)

• Border: 2px solid White (#FFFFFF)

• Border radius: full pill (9999px)

• Padding: 12px 26px 12px 16px

• Hover: fills to white bg with black text

• Focus: 2px #36F4A4 outline

Badge/Tag (Neutral Filled)

• Background: rgba(255, 255, 255, 0.2) (frosted glass)

• Text: White (#FFFFFF)

• Border: none

• Border radius: subtly rounded (4px)

• Padding: 12px 16px

• Font: 16px regular

Cards & Containers

• Background: Deep Teal (#02090A) on dark pages

• Border: 1px solid #1E2C31 (Dark Card Border) — barely visible boundary

• Border radius: 8px for standard cards, 12px for featured cards, 20px 20px 0 0 for top-rounded cards

• Shadow: Multi-layered system:

• Resting: rgba(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

• The inset white highlight creates a subtle top-edge glow

• Hover: shadow expands, card may slightly brighten

• Transition: box-shadow 300ms ease, transform 200ms ease

Inputs & Forms

• Background: transparent or Dark Forest (#061A1C)

• Text: White (#FFFFFF)

• Border: 1px solid #3F3F46 (Shade-70)

• Border radius: 8px

• Padding: 12px 16px

• Focus: 2px solid #36F4A4 (Neon Green focus ring)

• Placeholder: Shade-50 (#71717A)

• Transition: border-color 200ms ease

Navigation

• Background: transparent (overlaid on dark hero), becomes Forest (#102620) on scroll

• Height: ~64px

• Left: Shopify wordmark logo (SVG, white on dark)

• Center/Right: nav links in 18px/500 NeueHaasGrotesk, white, letter-spacing 0.72px

• CTA: White pill button "Start for free" (right)

• Secondary CTA: Ghost button with white border

• Hover: links shift to Muted Text (#A1A1AA) or gain underline

• Mobile: hamburger menu, full-screen dark overlay

• Transition: background 300ms ease on scroll

Image Treatment

• Product screenshots: embedded in dark UI contexts, matching the surrounding darkness

• Admin interface previews: shown on dark backgrounds with subtle card borders

• Aspect ratios: varied — hero images are wide (16:9-ish), feature shots are flexible

• All images sit flush within dark containers — no bright borders or frames

• Lazy loading with dark placeholder surfaces

Trust Indicators

• Statistics displayed prominently: "15+" (years), "150M+" (buyers)

• Numbers at display scale in NeueHaasGrotesk

• Partner/developer ecosystem callout sections

• Dark-themed testimonials integrated into the page flow

5. Layout Principles

Spacing System

Base 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

Grid & Container

• Max container width: ~1280px (centered)

• Hero: full-width, edge-to-edge dark background with centered text

• Feature sections: 2-column layouts with text and product screenshots

• Stats sections: horizontal layout with large numbers

• Horizontal padding: 64px desktop, 32px tablet, 16px mobile

• Grid gap: 24-32px between major content blocks

Whitespace Philosophy

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-sty