# Shopify — Design Reference

> White pills and thin giant type on a deep green-black night

**Theme:** dark · **Measured from:** shopify.com (English, 1440 px)

Shopify looks like a movie trailer for a store. The page opens on a full-bleed video with a huge white headline set in a light weight, then a near-black canvas (`#02090a`, black with a faint green tint) slides up over it with large rounded top corners and carries the rest of the page. Type does all the talking: 56px headlines in weight 330, white, often two-tone with the second sentence in gray (`#9797a2`). There is exactly one action style: a white pill with black text. Its partner is the same pill, transparent with a 2px white outline. Product shots and illustrations sit in deep teal cards (`#061a1c`) with soft 12px corners and no shadow at all; depth comes from slightly lighter dark surfaces, not from elevation. The only saturated color is a violet reserved for the Sidekick AI section.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Night | `#02090a` | Page canvas: near-black with a green tint |
| White | `#ffffff` | Headlines, primary text, primary button fill, outline of secondary pills |
| Mist Gray | `#9797a2` | Body copy; gray second half of two-tone headlines |
| Sage Gray | `#9dabad` | Descriptions under card titles, feature captions |
| Zinc | `#a1a1aa` | Secondary labels, helper text |
| Steel Zinc | `#71717a` | Faintest text: fine print and metadata |
| Black | `#000000` | Text on the white button and on white cards |
| Deep Teal | `#061a1c` | Feature panels and media cards |
| Forest Black | `#020a08` | Large 12px media cards one step above the canvas |
| Midnight Navy | `#000a1e` | Blue-black surface of the Sidekick section |
| Graphite | `#181d20` | Small chips and tiles with a faded white gradient border |
| Hairline | `#1e2c31` | 1px borders and dividers on dark |
| Violet | `#5433eb` | Sidekick accent only — small AI controls and the violet band |
| Zinc Wash | `#f4f4f5` | Light chip fill inside white cards |

**Gradients:** feature panels such as "Your brand has entered the chat" use a teal sweep `linear-gradient(290.7deg, #061a1c 58.79%, #0d3a2d 100%)`. Small tiles get a gradient border: a `#181d20` fill over `rgba(255,255,255,.55)` → `rgba(255,255,255,.06)`. A mint-to-violet accent `linear-gradient(126.17deg, #5fd5b6 32.74%, #865cff 100%)` is used sparingly as a highlight. Never fill buttons with a gradient.

## Typography

**Shopify-Inter** is the only family (a custom cut of Inter with variable weights). Substitute: **Inter** (variable) from Google Fonts, which accepts the in-between weights 330, 420, 450 and 550.

- Weight **300–330** for every big headline, from 56px up to the 96px hero. Thin and huge is the signature.
- Weight **400/420** for body and small text; **450** for 20px card titles.
- Weight **550** for buttons — the boldest thing on the page that isn't a logo.
- Tracking tightens on large type: `-1.68px` at 56px, `-1.92px` at 96px.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display (hero) | 96px | 300 | 1.08 | -1.92px |
| Heading | 56px | 330 | 1.08 | -1.68px |
| Heading tight | 56px | 330 | 1 | -1.12px |
| Title | 24px | 400 | 1.3 | -0.48px |
| Card title | 20px | 450 | 1.3 | 0 |
| Body large | 20px | 400 | 1.4 | 0 |
| Body | 18px | 400 | 1.4 | 0 |
| Body small | 16px | 400 | 1.5 | 0 |
| Button | 16px | 550 | 1.5 | 0 |
| Caption | 14px | 420 | 1.37 | 0 |
| Label | 14px | 500 | 1 | 0.28px |

**Two-tone headline:** one block, first sentence in White, the rest in Mist Gray, same size and weight. Example: "Sell everywhere people shop. *Online and in person.* Across AI and on social. *Locally and globally.*"

## Shape and spacing

- **Buttons and tags:** full pill (`9999px`).
- **Cards:** 12px for large media cards and panels; 8px for small cards and tiles. The dark canvas meets the hero with a 48px top radius.
- **Inputs:** none on the page; the Sidekick prompt mock uses 8px corners.
- **Base unit:** 8px. Steps seen: 4, 8, 13, 16, 20, 32, 48, 128.
- **Content width:** 1260px, centered, left-aligned text.
- **Section gap:** about 128px between sections.

## Components

### Primary button
White `#ffffff` fill, black text, pill radius, padding `8px 20px` (44px tall), Shopify-Inter 550 at 16px. No shadow. Label: "Start for free". Used in the nav and in the hero.

### Outline pill
Transparent fill, white text, 2px solid white border, pill radius, padding `8px 13px` (44px tall), same font. Can carry a leading icon (a play circle in "Why we build Shopify", a small badge in "Fall '26 Edition"). Sits 16px to the right of the primary, or alone and centered under a section ("Pick a plan that fits").

### Navigation
Transparent bar over the hero video. Wordmark on the left, then menu items in white at 16px (Why Shopify and Products with small chevrons, Pricing, Enterprise) and the "Fall '26 Edition" outline pill. Right side: "Log in" as plain text and "Start for free" as the white primary pill.

### Feature panel
Deep Teal surface (or the teal gradient), 12px radius, no shadow, no border. A 56px light headline at bottom-left, a short Sage Gray paragraph below it with underlined inline links, and a product mock floating on the right.

### Media card
Forest Black or Deep Teal, 12px radius, flush image or illustration filling the card. Below it, outside the card: a white 16–18px title in weight 550 and a two-line gray description with underlined links. Laid out in rows of three.

### Customer story card
Photo with 8px corners, then a short bold title ("Get started fast", "Raise the bar") and a Sage Gray story with the brand name in white.

### Sidekick band
A section that switches the canvas to violet and Midnight Navy, with the same 56px white headline and dark product cards inside. The only place the violet appears.

## Do

- Keep the canvas near-black with the green tint (`#02090a`), not pure black.
- Set headlines huge and light (300–330); let size do the work.
- Write section headlines as two-tone blocks (white, then gray).
- Use the white pill as the single primary action, paired with the white outline pill.
- Frame product shots in deep teal 12px cards.
- Stay flat: separate layers with slightly lighter dark surfaces.

## Don't

- Don't use bold headlines.
- Don't use square or slightly rounded buttons; buttons are always pills.
- Don't introduce a colored action button; actions are white.
- Don't use violet outside the Sidekick (AI) section.
- Don't add drop shadows to cards.
- Don't put long text in pure white; body copy is gray.

## Layout

Full-bleed video hero with the nav floating on top, a 96px two-line headline aligned left, a two-line white subhead, and the button pair. The Night canvas then rises over the video with a 48px rounded top edge. Below: a two-tone headline over a row of three product photos, a wide teal feature panel, three illustrated media cards, a wide "Grow around the world" panel, three customer story cards with a centered outline pill, then the violet Sidekick section. Every section opens with a left-aligned 56px light headline inside the 1260px column.

## Agent prompt guide

- Text: `#ffffff` · Secondary text: `#9797a2` · Captions: `#9dabad`
- Canvas: `#02090a` · Panels: `#061a1c` · Borders: `#1e2c31`
- Action: `#ffffff` fill with `#000000` text · Outline: 2px `#ffffff`

Example prompts:

1. "Primary button: background #ffffff, black text, fully rounded pill, padding 8px 20px, 44px tall, Inter 550 16px, no shadow. Next to it a transparent pill with a 2px white border and white text."
2. "Two-tone section headline on #02090a: 56px Inter weight 330, line-height 1.08, letter-spacing -1.68px; first sentence #ffffff, rest #9797a2."
3. "Feature panel: background #061a1c, 12px radius, no shadow; 56px light white headline bottom-left, 16px #9dabad paragraph under it with underlined links, product mock on the right."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-night: #02090a;
  --color-white: #ffffff;
  --color-mist-gray: #9797a2;
  --color-sage-gray: #9dabad;
  --color-zinc: #a1a1aa;
  --color-steel-zinc: #71717a;
  --color-black: #000000;
  --color-deep-teal: #061a1c;
  --color-forest-black: #020a08;
  --color-midnight-navy: #000a1e;
  --color-graphite: #181d20;
  --color-hairline: #1e2c31;
  --color-violet: #5433eb;
  --color-zinc-wash: #f4f4f5;

  /* Fonts */
  --font-sans: 'Shopify-Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 96px;
  --text-display--line-height: 1.08;
  --text-display--letter-spacing: -1.92px;
  --text-display--font-weight: 300;
  --text-heading: 56px;
  --text-heading--line-height: 1.08;
  --text-heading--letter-spacing: -1.68px;
  --text-heading--font-weight: 330;
  --text-heading-tight: 56px;
  --text-heading-tight--line-height: 1;
  --text-heading-tight--letter-spacing: -1.12px;
  --text-heading-tight--font-weight: 330;
  --text-title: 24px;
  --text-title--line-height: 1.3;
  --text-title--letter-spacing: -0.48px;
  --text-title--font-weight: 400;
  --text-card-title: 20px;
  --text-card-title--line-height: 1.3;
  --text-card-title--font-weight: 450;
  --text-body-lg: 20px;
  --text-body-lg--line-height: 1.4;
  --text-body-lg--font-weight: 400;
  --text-body: 18px;
  --text-body--line-height: 1.4;
  --text-body--font-weight: 400;
  --text-body-sm: 16px;
  --text-body-sm--line-height: 1.5;
  --text-body-sm--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1.5;
  --text-button--font-weight: 550;
  --text-caption: 14px;
  --text-caption--line-height: 1.37;
  --text-caption--font-weight: 420;
  --text-label: 14px;
  --text-label--line-height: 1;
  --text-label--letter-spacing: 0.28px;
  --text-label--font-weight: 500;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 8px;
  --radius-cards: 12px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-none: none;

  /* Layout */
  --container-page: 1260px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-night: #02090a;
  --color-white: #ffffff;
  --color-mist-gray: #9797a2;
  --color-sage-gray: #9dabad;
  --color-zinc: #a1a1aa;
  --color-steel-zinc: #71717a;
  --color-black: #000000;
  --color-deep-teal: #061a1c;
  --color-forest-black: #020a08;
  --color-midnight-navy: #000a1e;
  --color-graphite: #181d20;
  --color-hairline: #1e2c31;
  --color-violet: #5433eb;
  --color-zinc-wash: #f4f4f5;

  /* Fonts */
  --font-sans: 'Shopify-Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 96px;
  --text-display--line-height: 1.08;
  --text-display--letter-spacing: -1.92px;
  --text-display--font-weight: 300;
  --text-heading: 56px;
  --text-heading--line-height: 1.08;
  --text-heading--letter-spacing: -1.68px;
  --text-heading--font-weight: 330;
  --text-heading-tight: 56px;
  --text-heading-tight--line-height: 1;
  --text-heading-tight--letter-spacing: -1.12px;
  --text-heading-tight--font-weight: 330;
  --text-title: 24px;
  --text-title--line-height: 1.3;
  --text-title--letter-spacing: -0.48px;
  --text-title--font-weight: 400;
  --text-card-title: 20px;
  --text-card-title--line-height: 1.3;
  --text-card-title--font-weight: 450;
  --text-body-lg: 20px;
  --text-body-lg--line-height: 1.4;
  --text-body-lg--font-weight: 400;
  --text-body: 18px;
  --text-body--line-height: 1.4;
  --text-body--font-weight: 400;
  --text-body-sm: 16px;
  --text-body-sm--line-height: 1.5;
  --text-body-sm--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1.5;
  --text-button--font-weight: 550;
  --text-caption: 14px;
  --text-caption--line-height: 1.37;
  --text-caption--font-weight: 420;
  --text-label: 14px;
  --text-label--line-height: 1;
  --text-label--letter-spacing: 0.28px;
  --text-label--font-weight: 500;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 8px;
  --radius-cards: 12px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-none: none;

  /* Layout */
  --container-page: 1260px;
}
```

---

*Measured from https://www.shopify.com/?locale=en-US on 2026-10-28 by Faundr. Inspired by Shopify; not its official design system and not affiliated with Shopify.*