Shopify Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

22tokens

12type steps

5radius steps

2pxspacing base

Shopify, in one page

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.

Typography is split across three families. Neue Haas Grotesk Display at thin weights (330–500) handles every display, headline, and editorial moment — the brand's identity is that thin display cut. Inter Variable at 420–550 weights handles every UI body, button label, caption, and form field — utility text that doesn't fight the display. ui-monospace appears only in code blocks and rare technical eyebrows. Across all three families, the OpenType ss03 stylistic set is enabled — it's the brand's character-level signature, applied universally.

Key Characteristics:

Two-canvas system: {colors.canvas-night} for cinematic marketing, {colors.canvas-light} / {colors.canvas-cream} for transactional surfaces — never blended.
Pill-shape ({rounded.pill}) is the only button shape across both tracks; rounded rectangles do not exist for buttons.
Thin-weight (330) display typography is the signature; {typography.display-xxl} at 96px / weight 330 is the brand's loudest visual.
Aloe and pistachio greens ({colors.aloe-10}, {colors.pistachio-10}) are reserved for the light track — they signal commerce, growth, transactional success.
Photography is full-bleed, edge-to-edge, never inset in cards on the cinematic track; merchants and storefront imagery do the heavy visual lifting that gradients and illustrations would do elsewhere.
The OpenType ss03 stylistic set is enabled across every text role — a character-level unifier that tracks across both tracks.
Tight letter-spacing on display sizes (2.4px positive tracking on 96px display) gives the thin weight extra optical air.

Do's and don'ts

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.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Shopify design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #000000
- ink: #000000
- on-primary: #ffffff
- on-dark: #ffffff
- canvas-night: #000000
- canvas-night-elevated: #0a0a0a
- canvas-light: #ffffff
- canvas-cream: #fbfbf5
- surface-elevated-dark: #1e2c31
- shade-30: #d4d4d8

Type:
- families: NeueHaasGrotesk Display, Helvetica, Arial, Inter Variable
- scale: 12, 13, 14, 16, 18, 20, 24, 28, 48
- weights: 330, 400, 420, 500, 550

Shape:
- radius: 4, 5, 8, 12, 20

Spacing: 2, 4, 8, 12, 16, 24, 32, 64

Rules:
- 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.

Avoid:
- 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.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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.
Cool Link Tones ({colors.link-cool-1} #9dabad, {colors.link-cool-2} #9797a2, {colors.link-cool-3} #bdbdca, {colors.link-mint} #99b3ad): Muted footer / tertiary link colors used on dark surfaces to create a quiet hierarchy below the primary white type.

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.
Surface Elevated Dark ({colors.surface-elevated-dark} — #1e2c31): Dark teal-shifted surface used on a small subset of dark cards to introduce subtle depth without breaking the black.
Canvas Light ({colors.canvas-light} — #ffffff): Pricing, signup, comparison tables.
Canvas Cream ({colors.canvas-cream} — #fbfbf5): Slightly warm off-white used on the pricing-page background canvas — invisibly different from #ffffff but adds editorial warmth.
Hairline Light ({colors.hairline-light} — #e4e4e7): 1px borders on light cards, table dividers.
Hairline Dark ({colors.hairline-dark} — #1e2c31): 1px borders on the rare dark cards that have visible chrome.

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.
Shade-50 ({colors.shade-50} — #71717a): Secondary text on light.
Shade-60 ({colors.shade-60} — #52525b): Tertiary text on light, deep on dark.
Shade-70 ({colors.shade-70} — #3f3f46): Pressed-state of the primary pill button; deep dark surface accent.

Text

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

Type scaleRead the full spec

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.

The code tier is ui-monospace, the system mono — preferred over a webfont mono to avoid unnecessary downloads.

The OpenType ss03 stylistic set is enabled across every role. It alters specific glyph forms (lowercase a, g, single-story numerals) for a slightly more geometric character. Apply via font-feature-settings: "ss03" on the body element or root.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xxl}`	96px	330	1.0	2.4px	Cinematic hero headline
`{typography.display-xl}`	70px	330	1.0	0	Section opener on cinematic pages
`{typography.display-lg}`	55px	330	1.16	0	Pricing-page page title
`{typography.display-md}`	48px	330	1.14	0	Sub-section headline on light track
`{typography.heading-xl}`	28px	500	1.28	0.42px	Card title / pricing tier name
`{typography.heading-lg}`	24px	400	1.14	0.36px	Compact card title
`{typography.heading-md}`	20px	500	1.4	0.3px	Section sub-heading
`{typography.heading-sm}`	18px	500	1.25	0.72px	Eyebrow / mini-section label
`{typography.body-lg}`	18px	550	1.56	0	Marketing body lead, large body
`{typography.body-md}`	16px	420	1.5	0	Default UI body, pill-button labels
`{typography.body-strong}`	16px	550	1.5	0	Emphasized body run
`{typography.caption}`	14px	500	1.49	0.28px	Helper copy, footnotes
`{typography.micro}`	13px	500	1.5	-0.13px	Pricing fine print
`{typography.eyebrow-cap}`	12px	400	1.2	0.72px	All-caps eyebrow above large headlines
`{typography.code}`	16px	400	1.5	0	Code blocks

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.
Tracking lifts on display. The 96px hero gets +2.4px positive tracking — the thin glyphs need air. At 70px and below, tracking returns to 0.

Note on Font Substitutes

Open substitutes for Neue Haas Grotesk Display: Helvetica Now Display (proprietary) or Inter Display at light weights (open-source) are the closest matches. Avoid Helvetica Neue at default weight — it's too heavy for the brand's thin tier. Inter Variable is open-source via Google Fonts and is the canonical body face — no substitute needed.

Components and layoutRead the full spec

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.
Pressed state button-primary-pill-pressed: background lifts to {colors.shade-70}.

button-outline-on-dark — the cinematic hero CTA.

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

button-outline-on-light — the light-track equivalent.

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

button-aloe-pill — the featured CTA on pricing pages.

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.

card-pricing-featured — the highlighted pricing tier.

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.

card-feature-cinematic — feature card on the cinematic track.

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.

card-pistachio-band — wide horizontal band card used to highlight a category of features on the light track.

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

card-photo-frame — full-bleed photography container on cinematic pages.

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").

nav-bar-dark — top nav on cinematic pages.

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

pill-tag-shade — neutral tag on light surfaces.

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.

footer-dark — full-page-width footer on the cinematic track.

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.

footer-light — equivalent on the transactional track.

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

Spacing System

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
Wide	≥ 1440px	Full cinematic hero with edge-bleeding photography; pricing 4-up
Desktop	1024–1440px	Default content max-width; pricing 4-up tightens
Tablet	768–1023px	Pricing 2-up; cinematic hero photography crops
Mobile	< 768px	Pricing 1-up; hamburger nav; display-xxl drops to ~56–64px

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.
Pricing tiers stair-step 4-up → 2-up → 1-up; the featured aloe tier stays visually distinguished at every step.
Top nav collapses to hamburger below 768px; menu inherits canvas polarity.

Image Behavior

Photography uses responsive srcset with art-direction crops at major breakpoints. Mobile crops favor close subjects; wide crops favor environmental / storefront context.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-shopify {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #000000;
  --link-hover-color: #000000;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #000000;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-inter);
  --card-border-radius: 8px;
}

Download theme.css

Where this came from

Source document: volt/design-md/shopify/DESIGN.md · 26.3 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.