Design teardown
Shopify
A near-black stage, very light display type, and white pills.
shopify.com
Design character
Light type on a dark stage
The homepage is a full-bleed dark page with a sticky text nav, a left-aligned hero over moving photography, and a wide rounded panel that overlaps the fold. Below that, large section lines sit above a three-up grid of dark cards and a later navy band. Copy is short and spoken: a few words in a light headline, one or two plain sentences, then a verb. Hierarchy comes from size and from gray versus white. Display type is lighter than the buttons, not heavier.
Typography
One variable grotesque, Shopify-Inter, carries every role. Display is huge and light, with tight tracking. Section titles stay light. Card titles and nav sit at a medium weight. Body is 18px and gray. Eyebrows are 12px, uppercase, and widely tracked. Nothing uses a second family.
Color system
The page is near-black with a faint green cast, white type, and zinc for anything that should recede. Cards lift into deep green-black. A single mint marks small labels. The primary action is the only large white shape.
Spacing and geometry
A 4px grid. Controls are compact. Sections are tall, with 64px between blocks and 64–128px of section padding. The story sits in a 1420px column.
Layout
A sticky bar, a left-aligned hero, then a centered 1420px column. Type is left aligned. One section title centers. Cards form a three-column grid, then the page returns to a single wide panel. A small video stays pinned at the lower right.
Motion
Interface motion is short. Buttons and links change color in 150ms on a standard ease. Larger motion is in the scenes: a slow glow, drifting product art, and a statement where one clause is white and the others stay zinc.
UI fingerprint
- Display type is lighter than the buttons. Headlines are weight 300 or 330 at 56–96px. Buttons jump to 550. The page gets emphasis from size and from white on black, not from a heavy cut of the same face.
- Every action is a pill. Primary, quiet, and the small round controls all use a full pill radius. The quiet control is a 2px white outline. The primary control is solid white with black type.
- Gray does the hierarchy. White is for the line you should read now. #71717a, #9dabad, and #a1a1aa step the rest back. Mint appears only as a tiny uppercase label.
- Surfaces barely leave the dark. Cards move from #02090a to #061a1c and toward #0d3a2d. A hairline and a soft shadow are enough. The page never switches to a white content well.