Design System Inspired by Shopify

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

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

### 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-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.

### Border Radius Scale

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

### Breakpoints

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

### Touch Targets

• Minimum touch target: 44x44px (WCAG AAA)

• Pill buttons: 48px height minimum with generous horizontal padding

• Nav links: 44px touch area

• Card surfaces: full card is tappable where linked

### Collapsing Strategy

• Navigation: Full horizontal links → hamburger menu below 1024px; logo and CTA button remain visible

• Hero section: 96px display → 70px at tablet → 48px on mobile; maintains single-column center alignment

• Feature sections: 2-column text+image → stacked single column below 768px

• Stats: Horizontal row → stacked vertical on mobile

• Section padding: 64px → 40px → 24px → 16px as viewport narrows

• Cards: Grid → stack, maintaining full-width on mobile

### Image Behavior

• Product screenshots: responsive within dark containers, maintain aspect ratio

• Hero images: full-width on all breakpoints, lazy loaded with dark placeholders

• Admin UI previews: scale proportionally, may crop on mobile

• All images use CDN (cdn.shopify.com) with responsive srcset

### Quick Color Reference

• Primary CTA: Shopify White (#FFFFFF)

• Page background: Void Black (#000000)

• Card surface: Deep Teal (#02090A)

• Section bg: Dark Forest (#061A1C)

• Elevated bg: Forest (#102620)

• Accent: Neon Green (#36F4A4)

• Body text: White (#FFFFFF)

• Muted text: Muted (#A1A1AA)

• Border dark: Dark Card Border (#1E2C31)

### Example Component Prompts

• "Create a hero section on true black (#000000) background with a 96px/330 NeueHaasGrotesk headline in white, a 20px/500 subtitle in #A1A1AA, and two pill buttons: white filled (9999px radius) and ghost with 2px white border"

• "Design a feature card on Deep Teal (#02090A) with 1px #1E2C31 border, 12px radius, multi-layer shadow (1px ring + 2px/4px/8px blur at 10% black), containing a 32px/360 white heading and 18px/400 #A1A1AA body text"

• "Build a stats section on Dark Forest (#061A1C) with 96px/750 white numbers (NeueHaasGrotesk), 16px/400 #A1A1AA descriptive labels, and generous 64px spacing between stat blocks"

• "Create a sticky nav with transparent background (becomes #102620 on scroll), white Shopify logo left, 18px/500 white nav links with 0.72px letter-spacing, and a white pill 'Start for free' button right"

• "Design a tag/badge with rgba(255,255,255,0.2) frosted glass background, 4px radius, 12px 16px padding, white 16px text — floating over a dark card surface"

### Iteration Guide

When refining existing screens generated with this design system:

1. Focus on ONE component at a time

2. Reference specific color names and hex codes from this document

3. Remember: this is a DARK-FIRST design — light surfaces are the exception, not the rule

4. Display text should always feel feather-light (weight 330-400) — if it looks heavy, reduce the weight

5. Neon Green (#36F4A4) is precious — use sparingly for focus and accent only

6. The dark surface hierarchy (black → deep teal → dark forest → forest) creates subtle depth

7. Shadows are multi-layered — a single box-shadow value won't capture the Shopify card feel

8. ss03 OpenType feature must be active on all text for typographic consistency