---
title: "Shopify design system"
variant: extended
source: https://www.shopify.com/
captured_at: 2026-10-12
theme: dark
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/shopify-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Shopify · Design System

> Commerce stories against a cinematic dark canvas

**Theme:** dark · **Industry:** ecommerce · **Source:** https://www.shopify.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Shopify’s homepage pairs a cinematic, media-led opening with a long sequence of product features, merchant stories, and commerce proof points. Near-black sections, restrained green and blue accents, and oversized light typography keep the experience cohesive across varied content.

## North star

Use a cinematic near-black canvas and clear, spacious storytelling; let real merchant imagery carry the color.

## Overview

The page is built around a near-black canvas, with subtly distinct dark teal, forest-green, and midnight-blue bands dividing the story without breaking its immersive mood. White is reserved for prominent headings, navigation, and primary actions; muted gray-green tones carry supporting copy. Shopify-Inter supplies a light, modern voice: large headings use thin weights and tight negative tracking, while body copy stays calm and readable. A full-bleed, darkened merchant video leads into image galleries, product-interface collages, feature cards, proof points, and customer stories. Content alternates between single-column feature storytelling and multi-column card groups, generally aligned to a shared wide page frame. Rounded media panels and pill-shaped CTAs soften the dark technology aesthetic. Accents are selective: mint-green appears in small highlights and metrics, while saturated blue-violet gradients and vivid details are confined mostly to feature imagery. Generous section pauses give the long homepage a deliberate, paced rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Teal Black | `#02090a` | `--color-deep-teal-black` | surface | Primary dark section and navigation surface; the homepage’s recurring near-black teal foundation. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Headings, navigation, links, and high-contrast text; also the background of primary CTA pills. |
| Pure Black | `#000000` | `--color-pure-black` | surface | Page canvas behind content bands and the footer; also used for dark text on white buttons. |
| Forest Depth | `#041e18` | `--color-forest-depth` | surface | Green-tinted band behind checkout, merchant statistics, testimonials, and setup storytelling. |
| Midnight Navy | `#000a1e` | `--color-midnight-navy` | surface | Blue-black surface for the developer and AI commerce section, including its gradient-led feature imagery. |
| Quiet Gray | `#9797a2` | `--color-quiet-gray` | neutral | Muted body and link text against dark sections. |
| Soft Sage | `#99b3ad` | `--color-soft-sage` | neutral | Secondary muted copy and links, adding a subtle green cast on dark backgrounds. |
| Indigo Hairline | `#1b1f3a` | `--color-indigo-hairline` | semantic | Subtle card border color; low-contrast separation rather than prominent outlines. |
| Deep Petrol | `#061a1c` | `--color-deep-petrol` | surface | Dark teal surface within layered feature treatments and gradients. |
| Footer Silver | `#a1a1aa` | `--color-footer-silver` | neutral | Muted footer and navigation text against the black footer canvas. |
| Cool Mist | `#9dabad` | `--color-cool-mist` | neutral | Secondary link and supporting-text tone across dark content. |
| Pale Lavender Gray | `#bdbdca` | `--color-pale-lavender-gray` | neutral | Lighter secondary link and copy tone, distinct from pure white headings. |
| Signal Mint | `#36f4a4` | `--color-signal-mint` | accent | Small bright text highlights and fine accent details; use sparingly against dark green-black surfaces. |
| Pine Edge | `#11352d` | `--color-pine-edge` | semantic | Low-contrast outlines around dark cards and feature panels. |
| Electric Indigo | `#072670` | `--color-electric-indigo` | accent | Blue-violet gradient accent associated with AI and developer feature visuals, not a general page background. |
| Moss Border | `#133b32` | `--color-moss-border` | semantic | Subtle green card borders and layered gradient details. |

### Semantic aliases

`--color-canvas` → `#000000` (Pure Black) · `--color-surface` → `#02090a` (Deep Teal Black) · `--color-surface-2` → `#041e18` (Forest Depth) · `--color-surface-3` → `#000a1e` (Midnight Navy) · `--color-surface-4` → `#061a1c` (Deep Petrol) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#9797a2` (Quiet Gray) · `--color-text-subtle` → `#99b3ad` (Soft Sage) · `--color-border` → `#1b1f3a` (Indigo Hairline) · `--color-accent` → `#36f4a4` (Signal Mint) · `--color-accent-2` → `#072670` (Electric Indigo)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#02090a` | 20.08:1 | AAA |
| `#ffffff` | `#041e18` | 17.44:1 | AAA |
| `#ffffff` | `#000a1e` | 19.77:1 | AAA |
| `#9797a2` | `#000000` | 7.26:1 | AAA |
| `#9797a2` | `#02090a` | 6.94:1 | AA |
| `#9797a2` | `#041e18` | 6.03:1 | AA |
| `#9797a2` | `#000a1e` | 6.84:1 | AA |
| `#99b3ad` | `#000000` | 9.41:1 | AAA |
| `#99b3ad` | `#02090a` | 8.99:1 | AAA |

### Gradients

- `radial-gradient(rgba(18, 96, 255, 0.35), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0))`
- `linear-gradient(in oklab, rgb(44, 0, 127) 42.49%, rgb(0, 10, 29) 100%)`
- `linear-gradient(rgba(2, 8, 8, 0.5), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 90%, rgba(2, 8, 8, 0.5)), radial-gradient(at 87% 84%, rgba(2, 8, 8, 0.9) 0px, rgba(0, 0, 0, 0) 50%), radial-gradient(at 10% 8%, rgba(2, 8, 8, 0.9`
- `linear-gradient(290.7deg, rgb(6, 26, 28) 58.79%, rgb(13, 58, 45) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Shopify-Inter | `--font-body` | webfont | 400, 420, 330, 450, 300, 550, 500, 600 | Primary family for display headings, body copy, navigation, links, and buttons. | Inter |
| ui-monospace | `--font-mono` | system | 400 | Small uppercase code and technical labels in developer-focused content. | Roboto Mono |

- **Shopify-Inter:** Light display weights, compact negative tracking on large headings, regular-weight supporting text, and sentence-case labels.
- **ui-monospace:** Use sparingly for code-like details; uppercase treatment and slightly expanded tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.398, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 300 | 1.08 | -0.02em | — | Shopify-Inter | Oversized hero and major campaign-style display headings. |
| h1 | 64px | 330 | 1.08 | -0.02em | — | Shopify-Inter | Primary page-level and leading section headings. |
| h2 | 56px | 330 | 1.08 | -0.03em | — | Shopify-Inter | Large feature and major section headings. |
| h3 | 44px | 330 | 1.1 | -0.01em | — | Shopify-Inter | Feature-card and subsection headings. |
| h4 | 34px | 330 | 1.14 | -0.02em | — | Shopify-Inter | Smaller feature titles and supporting panel headings. |
| body | 18px | 400 | 1.4 | 0 | — | Shopify-Inter | Main descriptive copy and feature explanations. |
| caption | 16px | 400 | 1.5 | 0 | — | Shopify-Inter | Compact supporting notes and secondary details. |
| button | 56px | 330 | 1 | -0.02em | — | Shopify-Inter | Large primary CTA label styling. |
| nav | 14px | 420 | 1.29 | 0 | — | Shopify-Inter | Header navigation labels and compact menu text. |
| link | 16px | 400 | 1.5 | 0 | — | Shopify-Inter | Inline and supporting links throughout the page. |
| code | 12px | 400 | 1.5 | 0.02em | uppercase | ui-monospace | Technical labels and code-like developer content. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 8, 10, 12, 13, 16, 20, 24, 32, 40, 64, 80, 90, 128 px.
- Section rhythm 64px · element gap 16px · card padding 16px · max content width 1260px.

The homepage uses a wide centered content frame with full-bleed media and dark section bands. The opening hero overlays text on video; subsequent content shifts between single-column storytelling, two-column feature splits, and multi-column merchant or app cards. Headings generally align to the start of the content, with occasional centered statements and setup steps. Comfortable spacing separates major sections, while cards keep tighter internal groupings. Media-heavy blocks provide visual pauses in a long, scroll-led page.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `12px` · link `4px` · xs `4px` · sm `5px` · md `8px` · lg `12px` · xl `16px` · 2xl `20px` · pill `9999px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.03) 0px 0.929px 0px 0px inset, rgba(0, 0, `
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0p`
- Shadow `md-2` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 8px 8px 0px, rgba(0, 0, 0, 0.1) 0px 4px 4`
- Shadow `inset-2` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.05) 0px 1px 2px 0px, rgba(255, 255, 255, 0`
- Shadow `xl` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `md-3` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.3) 0px 1.5px 9px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system relies more on dark surface shifts and media layering than on pronounced shadows. Cards use subtle dark green or indigo hairlines, with rounded corners and restrained inset treatments. Product screenshots and videos create depth through overlap and contrast; avoid adding heavy shadows or glossy effects to ordinary content blocks.

## Imagery

Merchant photography and video are central, including the immersive opening and customer stories. Product interfaces, storefronts, app icons, checkout screens, and commerce diagrams appear in layered showcases and card groups. Media is framed in rounded dark panels and often sits against near-black backgrounds; introductory footage is visibly darkened so white copy remains legible. Bright color is largely carried by the featured imagery rather than the page chrome.

## Components

### Hero overlay

Full-bleed merchant video or photography with large, light-weight white headline, short copy, and paired pill CTAs.

### Primary CTA

White pill button with black Shopify-Inter text; secondary actions use a transparent fill and thin white outline.

### Merchant gallery

A row or grid of storefront and merchant images, introduced by a concise statement and set against a black section.

### Feature card

Dark media-led panel with rounded corners, a subtle outline, concise heading, and muted explanatory copy.

### Product showcase

Layered checkout, storefront, or admin interface imagery arranged as a feature visual rather than a plain screenshot.

### Proof point panel

Large white metrics and short labels on a forest-green surface, separated from nearby content with spacious layout.

### Footer navigation

Black footer with multiple link columns, compact muted text, and social or locale controls.

### Measured component styles

- **Primary button** (“Start for free”): background #ffffff · text #000000 · border 2px solid · radius 9999px · padding 12px 24px · 550 18px Shopify-Inter
- **Secondary button** (“Why we build Shopify”): transparent background · text #ffffff · border 2px solid #ffffff · radius 9999px · padding 12px 26px 12px 16px · 550 18px Shopify-Inter
- **Link** (“stevemadden.com”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Shopify-Inter
- **Card** (“Buy now”): background #ffffff · text #ffffff · radius 8px · padding 16px · 400 16px Shopify-Inter
- **Navigation item** (“Why Shopify Get started fast You could b”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Shopify-Inter

## Do

- Keep the overall canvas near-black and use section bands to distinguish chapters.
- Use white for primary headings and high-priority navigation.
- Choose merchant and product imagery as the main sources of visual color.
- Use thin, lightly weighted display typography with tight tracking.
- Make primary actions white pills and secondary actions outlined pills.
- Let long-form sections breathe with clear spacing and varied layouts.

## Don't

- Do not turn every section into a card grid.
- Do not use bright accents as large general-purpose backgrounds.
- Do not place dense copy over busy imagery without a dark treatment.
- Do not use heavy shadows or prominent borders on routine cards.
- Do not make every heading bold or tightly packed.
- Do not force the page into a uniformly centered layout.

## Agent prompt

Build a new Shopify-style page with a cinematic, commerce-first feel. Use Deep Teal Black (#02090a) and Pure Black (#000000) as the core canvas, with Forest Depth (#041e18) and Midnight Navy (#000a1e) reserved for deliberate section changes. Set headings in a light Shopify-Inter-like sans serif, with white text and tight tracking; keep body copy muted and concise. Use full-bleed merchant imagery, product interface compositions, and video-style framing as the main visual content. Keep CTA buttons white pill shapes with dark text, and use outlined white pills for secondary actions. Apply Signal Mint (#36f4a4) and Electric Indigo (#072670) selectively, mostly in small highlights or feature visuals. Alternate editorial feature splits, galleries, and proof-point sections within a wide centered frame. Favor subtle borders and layering over heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed media-led opening with overlay copy and CTAs. | Primary and secondary action, Scroll-led introduction | Darkened hero media, Oversized white heading, Pill buttons |
| 2 | gallery | Introductory statement above a multi-column merchant image gallery. | Merchant discovery, Brand examples | Black canvas, Image tiles, Large inline statement |
| 3 | feature-split | Two-column feature panel combining copy with an AI shopping visual. | Explain a new feature, Embedded product example | Dark teal panel, Chat interface visual, Muted copy |
| 4 | feature-grid | Section heading followed by a four-column, media-rich feature presentation. | Feature comparison, Cross-channel overview | Dark image cards, Short captions, Full-bleed media |
| 5 | product-showcase | Single-column heading above a wide international commerce interface visual. | Show product workflow, International selling | Layered product mockups, Dark panel, Caption beneath media |
| 6 | feature-grid | Three-column merchant story cards under a section heading. | Social proof, Different growth paths | Merchant photography, Captioned cards, Outlined CTA |
| 7 | feature-grid | Two-column AI feature cards with accompanying media. | Feature explanation, Video examples | Dark cards, Embedded video, AI accent details |
| 8 | integrations | Feature copy paired with a wide band of app icons. | Browse extensions, Discover capabilities | Icon wall, Dark background, Short explanatory copy |
| 9 | feature-split | Copy and developer interface showcase in a single-column section. | Developer proposition, Technical product preview | Midnight blue band, Code imagery, Gradient lighting |
| 10 | cta | Centered headline on a quiet section band. | Focused call to action | Centered white heading, Minimal dark space |
| 11 | product-showcase | Two-column checkout story with performance metrics and product visual. | Present conversion proof, Show checkout experience | Forest-green band, Large metrics, Checkout mockup |
| 12 | stats | Wide, media-rich statistics section with content split into two columns. | Quantify platform reach, Build trust through scale | Green-black background, Large numeric proof, Subtle card outlines |
| 13 | testimonials | Two-column merchant testimonial and funding information. | Customer testimonial, Explain business support | Merchant photo, Quote panel, Green section band |
| 14 | how-it-works | Centered heading with setup imagery and numbered steps. | Sequential onboarding, Begin setup | Numbered list, Merchant imagery, Primary CTA |
| 15 | footer | Black footer with Shopify mark, link columns, utility links, and social icons. | Browse site sections, Locale and legal links | Multi-column link lists, Muted footer text, Social controls |

## Source CSS custom properties (selected)

```css
--font-size-button-lg: 1.125rem;
--font-size-t8: 1rem;
--font-weight-t8: 450;
--letter-spacing-t8: 0;
--font-size-t7: 1.25rem;
--font-weight-t7: 450;
--letter-spacing-t7: 0;
--font-size-t6: 1.5rem;
--font-weight-t6: 400;
--letter-spacing-t6: -.01em;
--font-size-t5: 1.75rem;
--font-weight-t5: 360;
--letter-spacing-t5: -.01em;
--font-size-t4: 2.125rem;
--font-weight-t4: 330;
--letter-spacing-t4: 0;
--font-size-t3: 2.75rem;
--font-weight-t3: 330;
--letter-spacing-t3: -.01em;
--font-size-t2: 3.5rem;
--font-weight-t2: 330;
--letter-spacing-t2: -.01em;
--font-size-t1: 4rem;
--font-weight-t1: 330;
--letter-spacing-t1: -.02em;
--font-size-dsp: 6rem;
--font-weight-dsp: 300;
--letter-spacing-dsp: -.025em;
--font-size-body-lg: 1.25rem;
--font-weight-body-lg: 400;
--letter-spacing-body-lg: 0;
--font-size-body-base: 1.125rem;
--font-weight-body-base: 400;
--letter-spacing-body-base: 0;
--font-size-body-sm: .875rem;
--font-weight-body-sm: 420;
--letter-spacing-body-sm: 0;
--space-xs: .5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/shopify-com