Shopify Design System

Shopifi runs two parallel design tracks that share typographic DNA and a single button vocabulary, but diverge in canvas polarity. The marketing track lives on {colors.canvas-night} (#000000) — full-bleed cinematic photography of merchants, giant {typography.display-xxl} headlines in Neue Haas Grotesk Display set at weight 330 (a thin, almost editorial cut), and a single CTA: a white-stroked black pill with the form button-outline-on-dark. The pages read like the spread of a high-end print magazine: lots of black, lots of negative space, photography that doesn't compete with text, and one and only one action per band.

The transactional track flips to {colors.canvas-light} and {colors.canvas-cream} (an off-white that's barely warmer than pure white). Pricing tiers, comparison tables, and signup flows sit on this lighter canvas, with the same pill button system but in inverse polarity (a solid black pill with white text, or a {colors.aloe-10} mint pill for the featured / "Start free trial" tier). The accents — {colors.aloe-10} mint and {colors.pistachio-10} pistachio — show up only on the light track, never on the cinematic dark hero pages.

...

Key Characteristics:

• Two-canvas system: {colors.canvas-night} for cinematic marketing, {colors.canvas-light} / {colors.canvas-cream} for transactional surfaces — never blended.
• ...

> Source pages: home (/), /start, /website/builder, /pricing.

Brand & Accent

• Aloe ({colors.aloe-10} — #c1fbd4): The featured-tier and "growth" accent. Used as a pill button background on light surfaces and as a feature-card fill in the pricing comparison band.
• Pistachio ({colors.pistachio-10} — #d4f9e0): Softer than aloe; used as a wide section band fill on the light track to signal a different category of feature without leaving the green family.
• ...

Surface

• Canvas Night ({colors.canvas-night} — #000000): Pure black hero, cinematic feature pages, footer.
• Canvas Night Elevated ({colors.canvas-night-elevated} — #0a0a0a): Cards on cinematic surfaces, video frames.
• ...

Shade Ladder

• Shade-30 ({colors.shade-30} — #d4d4d8): Tag / chip background on light, footer hairline on dark.
• Shade-40 ({colors.shade-40} — #a1a1aa): Tertiary text on light, secondary text on dark.
• ...

Text

• Ink ({colors.ink} — #000000): All text on light canvas.
• On Primary ({colors.on-primary} — #ffffff): All text on dark canvas + filled-pill labels.

Font Family

The display tier is Neue Haas Grotesk Display at thin weights (330–500). When unavailable, fall back to Helvetica at light weight, then Arial. The thin-weight cut is the brand — no substitution should default to weight 400+.

The UI tier is Inter Variable at 420–550 — a variable font with sub-weight precision that lets the system span body (420), strong (550), and caption (500) without jumping to heavier tiers. Inter is open-source via Google Fonts.

...

Hierarchy

Principles

• Display thinness is the brand. Always render display sizes at weight 330 — never 400+. The thinness is a deliberate editorial choice that makes the giant size feel quiet.
• Display in NHGD, body in Inter. Don't push body roles up to NHGD; don't push display roles down to Inter.
• ...

Note on Font Substitutes

Spacing System

• Base unit: 8px (with denser sub-units 1, 2, 3, 4 for fine work).
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 64px.
• ...

Grid & Container

• Cinematic hero pages use a wide max-width container (~1440–1600px) with edge-bleeding photography that escapes the container.
• Pricing collapses through 4-up → 2-up → 1-up tiers based on viewport.
• ...

Whitespace Philosophy

Decorative Depth

Border Radius Scale

Photography Geometry

Buttons

button-primary-pill — the dominant CTA across the system.

• Background {colors.primary} (black), text {colors.on-primary}, type {typography.body-md}, padding {spacing.md} {spacing.xl} (12px 24px), rounded {rounded.pill} 9999px.
• ...

• Background {colors.canvas-night} (transparent on the canvas), 2px solid {colors.on-primary} border, text {colors.on-primary}, same pill geometry.

• Background {colors.canvas-light}, 1px solid {colors.ink} border, text {colors.ink}, same pill geometry.

• Background {colors.aloe-10}, text {colors.ink}, same pill geometry. Used for the "Start free trial" tier.

Cards & Containers

card-pricing — the standard tier card on the pricing page.

• Background {colors.canvas-light}, padding {spacing.xxl}, rounded {rounded.lg} 12px, 1px {colors.hairline-light} border. Title in {typography.heading-xl}, price in {typography.display-md}, body in {typography.body-md}, CTA pinned to the bottom as button-primary-pill.

• Background {colors.aloe-10}, otherwise identical to card-pricing. The mint fill (rather than a brand-color border) is the brand's distinctive featured-tier choice.

• Background {colors.canvas-night-elevated}, text {colors.on-primary}, rounded {rounded.lg}, often with a top-edge inset highlight (Level 1 elevation). Holds full-bleed photography or a single large statement.

• Background {colors.pistachio-10}, text {colors.ink}, rounded {rounded.lg} 12px, padding {spacing.xxl}.

• Background {colors.canvas-night}, padding 0, rounded {rounded.xl} 20px (often top-only). The photo IS the content; no inner padding, no overlay text inside the card.

Inputs & Forms

text-input — standard text input on light surfaces.

• Background {colors.canvas-light}, text {colors.ink}, type {typography.body-md}, padding {spacing.sm}+ {spacing.md} (10px 12px), rounded {rounded.md} 8px, 1px {colors.hairline-light} border.

Navigation

nav-bar-light — top nav on light pages.

• Background {colors.canvas-light}, text {colors.ink}, padding {spacing.lg} {spacing.xl}. Logo wordmark on the left, nav items center, two pill buttons on the right (button-outline-on-light for "Log in", button-primary-pill for "Start free trial").

• Background {colors.canvas-night}, text {colors.on-primary}, otherwise identical structure. Two pill buttons on the right (button-outline-on-dark for both, with the rightmost subtly more prominent via type weight).

Pills, Tags, and Chips

pill-tag-mint — small tag on light surfaces, signaling a feature category.

• Background {colors.aloe-10}, text {colors.ink}, type {typography.eyebrow-cap}, padding {spacing.xs} {spacing.md}, rounded {rounded.pill}.

• Background {colors.shade-30}, text {colors.ink}, otherwise same shape as pill-tag-mint.

Signature Components

Cinematic Photography Layer — full-bleed merchant photos on the hero. No overlay scrim, no text-on-image; instead, the type sits in clean negative space above or below the photo. The brand treats photography as an editorial spread, not as decoration.

Stacked Tiny Shadows (Level 3 Elevation) — pricing cards on the light track use 4 stacked tiny drop shadows (each 1–8px Y offset, 10% black) to produce a soft, layered paper halo. This is the brand's distinctive depth on light.

link-on-dark — inline link on cinematic pages.

• Color {colors.on-primary}, no underline by default (links rely on context); for tertiary footer links, color shifts to one of the cool muted tones ({colors.link-cool-1} etc.) with a persistent underline.

• Background {colors.canvas-night}, text {colors.on-primary}, type {typography.caption}, padding {spacing.huge} {spacing.xl}. Contains 4–5 columns of muted-tone link groups, social icons, and a small legal row.

• Background {colors.canvas-light}, text {colors.ink}, otherwise same structure.

Do

• Reserve {colors.aloe-10} and {colors.pistachio-10} for the light track only — they don't appear on cinematic black pages.
• Always use {rounded.pill} for buttons; never {rounded.md} or {rounded.lg}.
• Render display tiers at weight 330; bumping to 400 or 500 breaks the brand's thin-display signature.
• Use full-bleed photography on cinematic pages — let it escape the container.
• Apply font-feature-settings: "ss03" globally; the stylistic set is the brand's typographic signature.
• Pair black canvas with white type and white-stroked outline pills; pair light canvas with black type and filled-black pills.

Don't

• Don't introduce a third canvas color — stick to black or light/cream. Greys, beiges, and blues are not in the system.
• Don't add drop shadows on cinematic dark cards beyond the subtle inset top-highlight; the cinematic track wants flat blackness.
• Don't shrink display tiers below {typography.display-md} (48px) on hero surfaces; below that they read as section heads, not display.
• Don't put aloe / pistachio greens behind type — they're surface fills, not text colors.
• Don't replace the pill shape with a rounded-rectangle button anywhere.

Breakpoints

Touch Targets

• Pill buttons hit ≥ 44×44px on mobile via 12px vertical padding × 16px line-height. WCAG AAA compliant.
• Form fields stay at the 44px minimum height across all breakpoints.

Collapsing Strategy

• Display sizes scale down through the breakpoint stair: 96 → 70 → 55 → 48 → 36px on mobile.
• Cinematic photography crops aggressively at smaller widths, prioritizing focal subject over edge-bleed.
• ...

Image Behavior

1. Focus on ONE component at a time. 2. Reference component names and tokens directly ({colors.aloe-10}, {button-primary-pill}-pressed, {rounded.pill}).

• ...

The parsed design tokens extracted from the core stylesheet of this design system: