Shopify Design System

---

version: alpha

name: Shopifi-Inspired-design-analysis

description: An inspired interpretation of Shopifi's design language — a cinematic commerce platform that runs two parallel design tracks. The marketing-hero and product-narrative pages live on near-black canvases with full-bleed photography of merchants, giant Neue Haas Grotesk display type at thin weights, and a single black-pill CTA stroked in white. The transactional pages (pricing, signup, dashboards) flip to a cream-mint canvas with pastel aloe and pistachio greens, the same pill button vocabulary, and Inter for UI body. The two tracks share typographic DNA but diverge sharply in canvas polarity — and that choice is the brand.

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"

shade-40: "#a1a1aa"

shade-50: "#71717a"

shade-60: "#52525b"

shade-70: "#3f3f46"

hairline-light: "#e4e4e7"

hairline-dark: "#1e2c31"

aloe-10: "#c1fbd4"

pistachio-10: "#d4f9e0"

link-cool-1: "#9dabad"

link-cool-2: "#9797a2"

link-cool-3: "#bdbdca"

link-mint: "#99b3ad"

typography:

display-xxl:

fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"

fontSize: 96px

fontWeight: 330

lineHeight: 1.0

letterSpacing: 2.4px

fontFeature: ss03

display-xl:

fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"

fontSize: 70px

fontWeight: 330

lineHeight: 1.0

letterSpacing: 0

fontFeature: ss03

display-lg:

fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"

fontSize: 55px

fontWeight: 330

lineHeight: 1.16

letterSpacing: 0

fontFeature: ss03

display-md:

fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"

fontSize: 48px

fontWeight: 330

lineHeight: 1.14

letterSpacing: 0

fontFeature: ss03

heading-xl:

fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"

fontSize: 28px

fontWeight: 500

lineHeight: 1.28

letterSpacing: 0.42px

fontFeature: ss03

heading-lg:

fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"

fontSize: 24px

fontWeight: 400

lineHeight: 1.14

letterSpacing: 0.36px

fontFeature: ss03

heading-md:

fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"

fontSize: 20px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0.3px

fontFeature: ss03

heading-sm:

fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"

fontSize: 18px

fontWeight: 500

lineHeight: 1.25

letterSpacing: 0.72px

fontFeature: ss03

body-lg:

fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif"

fontSize: 18px

fontWeight: 550

lineHeight: 1.56

letterSpacing: 0

fontFeature: ss03

body-md:

fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif"

fontSize: 16px

fontWeight: 420

lineHeight: 1.5

letterSpacing: 0

fontFeature: ss03

body-strong:

fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif"

fontSize: 16px

fontWeight: 550

lineHeight: 1.5

letterSpacing: 0

fontFeature: ss03

caption:

fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif"

fontSize: 14px

fontWeight: 500

lineHeight: 1.49

letterSpacing: 0.28px

fontFeature: ss03

micro:

fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif"

fontSize: 13px

fontWeight: 500

lineHeight: 1.5

letterSpacing: -0.13px

fontFeature: ss03

eyebrow-cap:

fontFamily: "Inter Variable, Inter, Helvetica, Arial, sans-serif"

fontSize: 12px

fontWeight: 400

lineHeight: 1.2

letterSpacing: 0.72px

fontFeature: ss03

code:

fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

fontFeature: ss03

rounded:

xs: 4px

sm: 5px

md: 8px

lg: 12px

xl: 20px

pill: 9999px

spacing:

xxs: 2px

xs: 4px

sm: 8px

md: 12px

lg: 16px

xl: 24px

xxl: 32px

huge: 64px

components:

button-primary-pill:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.pill}"

padding: 12px 24px

button-primary-pill-pressed:

backgroundColor: "{colors.shade-70}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.pill}"

padding: 12px 24px

button-outline-on-dark:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.pill}"

padding: 12px 26px

button-outline-on-light:

backgroundColor: "{colors.canvas-light}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.pill}"

padding: 12px 24px

button-aloe-pill:

backgroundColor: "{colors.aloe-10}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.pill}"

padding: 12px 24px

text-input:

backgroundColor: "{colors.canvas-light}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 10px 12px

card-pricing:

backgroundColor: "{colors.canvas-light}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

card-pricing-featured:

backgroundColor: "{colors.aloe-10}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

card-feature-cinematic:

backgroundColor: "{colors.canvas-night-elevated}"

textColor: "{colors.on-primary}"

typography: "{typography.body-lg}"

rounded: "{rounded.lg}"

padding: 32px

card-pistachio-band:

backgroundColor: "{colors.pistachio-10}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

card-photo-frame:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.xl}"

padding: 0px

pill-tag-mint:

backgroundColor: "{colors.aloe-10}"

textColor: "{colors.ink}"

typography: "{typography.eyebrow-cap}"

rounded: "{rounded.pill}"

padding: 4px 12px

pill-tag-shade:

backgroundColor: "{colors.shade-30}"

textColor: "{colors.ink}"

typography: "{typography.eyebrow-cap}"

rounded: "{rounded.pill}"

padding: 4px 12px

nav-bar-light:

backgroundColor: "{colors.canvas-light}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 16px 24px

nav-bar-dark:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 16px 24px

link-on-dark:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.on-primary}"

typography: "{typography.body-md}"

rounded: "{rounded.xs}"

padding: 0px

footer-dark:

backgroundColor: "{colors.canvas-night}"

textColor: "{colors.on-primary}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 64px 24px

footer-light:

backgroundColor: "{colors.canvas-light}"

textColor: "{colors.ink}"

typography: "{typography.caption}"

rounded: "{rounded.xs}"

padding: 64px 24px

---

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

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

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.

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

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.

The cinematic track treats whitespace as the brand's most valuable asset — sections often have 128–192px of vertical air between content blocks, with photography filling the rest. The transactional track tightens to ~48–64px between bands because users are scanning, comparing, and acting. The contrast between the two whitespace philosophies is part of the brand voice.

| Level | Treatment | Use |

|---|---|---|

| 0 | Flat, no shadow | Default surface |

| 1 | `0 1px 2px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.04)` | Subtle inset highlight on dark cards (a top-edge sheen) |

| 2 | `0 0 0 1px rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.2)` | Dark elevated cards with hairline + drop shadow stack |

| 3 | `0 8px 8px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.1)` | Stacked-shadow card on light surfaces; layered tiny shadows produce a soft halo |

| 4 | `0 25px 50px -12px rgba(0,0,0,0.25)` | Modal / floating panel on light |

On the cinematic track, depth comes from photography — full-bleed merchant imagery layered behind cards, with subtle inset top-edge highlights creating the illusion of light hitting a glass surface. On the light track, the layered tiny-shadow stack (Level 3) produces a soft, paper-like halo around pricing cards — depth without harshness.

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Inputs, hairline tags |

| `{rounded.sm}` | 5px | Image containers (small) |

| `{rounded.md}` | 8px | Form inputs, video frames, smaller cards |

| `{rounded.lg}` | 12px | Pricing cards, feature cards |

| `{rounded.xl}` | 20px (top-only on some asymmetric cards) | Hero photo frames, cinematic card chrome |

| `{rounded.pill}` | 9999px | All buttons, pill tags, mint chips |

Photography is full-bleed with no border. On cinematic pages it escapes the container entirely; on transactional pages it sits inside `{rounded.lg}` containers with no shadow. Avatar treatments in customer-logo strips are simple greyscale wordmarks at uniform height (~24–32px), aligned in a single horizontal strip.

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

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

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

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

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

**`card-pricing-featured`** — the highlighted pricing tier.

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

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

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

**`text-input`** — standard text input on light surfaces.

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

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

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

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

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

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

**`footer-light`** — equivalent on the transactional track.

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

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

1. Focus on ONE component at a time.

2. Reference component names and tokens directly (`{colors.aloe-10}`, `{button-primary-pill}-pressed`, `{rounded.pill}`).

3. Run `npx @google/design.md lint DESIGN.md` after edits.

4. Add new variants as separate entries.

5. Default body to `{typography.body-md}`; reserve `{typography.body-lg}` for marketing leads.

6. Keep the two canvas tracks separated — when designing a new page, choose cinematic OR transactional, not both.

7. The pill shape is non-negotiable; new button variants vary in fill / border / canvas, never in shape.