Shopify

Overview

Shopify is a comprehensive commerce platform designed for entrepreneurs, small businesses, and enterprises to build, launch, and scale their online stores. The design system embodies **Confident Minimalism**—a philosophy that pairs dark, sophisticated surfaces (#000000 background, #061a1c containers) with high-contrast interactive elements (pure white #ffffff CTAs, vibrant accent greens #36f4a4 and cyans #30deee) to create an interface that feels both powerful and approachable. The aesthetic draws from contemporary SaaS design, emphasizing clarity, performance, and accessibility without sacrificing visual distinction. Every interaction feels intentional: buttons use full-radius pill shapes (9999px) for friendliness, typography employs a light 330 font-weight for headlines to convey openness, and the color palette reserves bright accents for actions that matter. The brand voice is direct, optimistic, and action-oriented—speaking to merchants as partners in their success. Example: "Dream big and build fast on Shopify. The world's best commerce platform."

Colors

The color system operates on a **dark-first, accent-driven** model. The primary surface is pure black (#000000), with a graduated container stack (surface-container-low #061a1c, surface-container #0f2931, surface-container-high #142024) providing subtle depth without abandoning the dark aesthetic. Primary interactive color is pure white (#ffffff) for maximum contrast and trust—used on all primary CTAs, text on dark backgrounds, and focus states. Secondary accent is a vibrant pistachio green (#36f4a4, derived from --color-pistachio-10 #d4f9e0 inverted for dark mode), reserved for success states, highlights, and secondary actions. Tertiary accent is a bright cyan (#30deee) for informational elements and tertiary CTAs. The neutral scale (outline #a1a1aa, on-surface-variant #d4d4d8, outline-va

Typography

The type system uses **Shopify-Inter** (a custom Inter variant) across all scales, with a deliberate weight strategy: headlines employ a light 330 weight (display 56px, headline-lg 44px, headline-md 30px) to convey confidence and openness, while body text uses 400–420 weight for readability. CTAs and labels use 550–600 weight to signal interactivity. Letter-spacing is tightly controlled: headlines use -0.01em to -0.005em for visual cohesion, body text uses -0.006em for warmth, and labels use 0.01em for clarity. Line-height is generous (1.5–1.75 for body, 1.3–1.4 for labels) to ensure legibility on dark backgrounds. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm, 12px) when overlaid on photographic or gradient backgrounds to maintain contrast. The display tier (5

Layout

The layout uses a **12-column fluid grid** with a maximum container width of 1280px (--container-max-width), ensuring responsive scaling on mobile (320px+), tablet (640px+), and desktop (1200px+). Horizontal padding (gutter) is 24px on desktop, reducing to 16px on tablet and 12px on mobile via Tailwind responsive prefixes. Vertical rhythm is established through a semantic spacing scale: xs (4px) for micro-spacing within components, sm (12px) for component padding, md (24px) for section margins and card padding, lg (40px) for section separation, xl (64px) for major layout breaks, and 2xl (80px) for hero-to-content transitions. The hero section uses full-viewport height with a dark overlay (background-color: #000000 with opacity layering) over a photographic background, ensuring text legibil

Elevation & Depth

Depth is conveyed through **layered shadows and subtle surface separation** rather than bright highlights. The elevation system defines three levels: Level 1 (Base) uses no shadow—flat surfaces on the dark background. Level 2 (Raised Cards/Modals) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating a soft lift. Level 3 (Floating/Overlay) uses the full shadow stack: box-shadow: 0 8px 48px rgba(6, 6, 8, 0.08), 0 4px 8px rgba(24, 24, 27, 0.06), 0 0 2px rgba(24, 24, 27, 0.25), which combines a soft diffuse shadow, a mid-tone shadow, and a tight inner shadow for definition. All shadows use

Shapes

The shape philosophy is **Friendly Precision**—combining soft, approachable curves with technical clarity. Primary CTAs and secondary buttons use full-radius pill shapes (border-radius: 9999px) to signal warmth and approachability, reinforcing the brand's merchant-friendly positioning. Cards, input fields, and standard containers use md (0.75rem / 12px) radius for a balanced, modern appearance. Smaller UI elements (badges, chips) use full (9999px) radius to emphasize their compact, self-contained nature. Buttons and inputs never use sharp corners (0px radius); the minimum is DEFAULT (0.5rem /

Components

Action Elements

**Primary Button** (button-primary): 48px height, 12px 24px padding, full-radius (9999px), white background (#ffffff), black text (#000000), label-md typography (14px, 600 weight). On hover, background transitions to primary-container (#d4d4d8) with on-primary-container text (#18181b) over 150ms. On active, background shifts to outline (#a1a1aa). On disabled, background becomes outline-variant (#52525b) with 50% opacity and cursor: not-allowed. All state transitions use cubic-bezier(0.4, 0, 0.2, 1) easing.

**Secondary Button** (button-secondary): 48px height, 12px 24px padding, full-radius (9999px), transparent background with 1px solid white border (#ffffff), white text (#ffffff), label-md typography (14px, 600 weight). On hover, background becomes rgba(255, 255, 255

Do's and Don'ts

**Do**

• Do use white (#ffffff) for all primary CTAs and interactive text on dark backgrounds—it maximizes contrast (WCAG AAA) and signals trust.
• Do apply the secondary accent green (#36f4a4) sparingly for success states, highlights, and secondary actions; overuse dilutes its impact.
• Do maintain the dark background (#000000) as the default canvas; light-mode variants should be rare and explicitly toggled via data-color-mode attribute.
• Do use full-radius (9999px) exclusively for buttons and pill-shaped components; apply md-radius (12px) to cards and containers for visual distinction.
• Do pair headline text (330 weight) with generous line-height (1.3–1.4) and tight letter-spacing (-0.01em to -0.005em) for visual cohesion and readability.
• Do transition all interactive state changes (hover, active, focus) over 150ms using cubic-bezier(0.4, 0, 0.2, 1) easing to feel responsive without jarring.
• Do use semantic spacing tokens (md for padding, lg for section margins) rather than arbitrary pixel values to maintain rhythm and consistency.

**Don't**

• Don't use pure black text (#000000) on dark backgrounds; always use white (#ffffff) or on-surface-variant (#d4d4d8) for legibility.
• Don't apply shadows to buttons or inputs on default state; reserve shadows for Level 2+ (cards, modals) to maintain visual hierarchy.
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to avoid visual fragmentation.
• Don't use the secondary accent green (#36f4a4) for body text or large surfaces; it's reserved for interactive elements and highlights.
• Don't disable transitions or use instant state changes (transition: none); even 150ms easing improves perceived responsiveness and polish.
• Don't center-align body copy or long-form text; left-aligned text improves scannability and accessibility for users with dyslexia.
• Don't apply opacity to text for hierarchy; instead, use on-surface-variant (#d4d4d8) or outline (#a1a1aa) for supporting text to maintain WCAG contrast ratios.