What is Shopify's primary brand color?

Shopify's brand operates on a polarity rather than a single accent. The cinematic marketing track uses pure black #000000 as canvas with white #ffffff type and white-stroked outline pills. The transactional track flips to white #ffffff and cream #fbfbf5 canvas with black #000000 ink and a featured aloe #c1fbd4 mint pill on pricing pages. Pistachio #d4f9e0 appears as a band fill on the light track. There is no purple, blue, or gradient in the system — green is the only chromatic accent and it is scoped strictly to the light surfaces.

What typography does Shopify use, and what should I use if Neue Haas Grotesk isn't available?

Shopify runs Neue Haas Grotesk Display at weight 330 for every display and headline role — the thinness is the brand's typographic signature, from the 96px hero down to 18px eyebrows. UI body, button labels, and captions use Inter Variable at weights 420–550. Code blocks use ui-monospace, the system mono. If Neue Haas Grotesk is unavailable, Helvetica Now Display at light weights or Inter Display at light weights are the closest substitutes — never default Helvetica Neue, which is too heavy. The OpenType ss03 stylistic set is enabled across all three families as a character-level unifier.

Why does Shopify run two parallel canvas tracks instead of one design system?

The split lets each page do its job. The cinematic black track treats marketing surfaces like a high-end print spread — full-bleed merchant photography, 128–192px of vertical air between bands, and one CTA per scroll. The light track collapses to 48–64px section padding because pricing, signup, and dashboard users are scanning and comparing. Mixing the two would dilute both: cinematic black with dense pricing tables feels overwhelming, and white with edge-bleeding merchant photos feels generic. The two whitespace philosophies are part of the brand voice.

Why are all Shopify buttons pill-shaped?

The 9999px pill radius is the only button shape in the entire system across both canvas tracks. It maintains identity when everything else (canvas, text color, border weight) flips between cinematic and transactional contexts. The black canvas gets a transparent pill with a 2px white stroke; the light canvas gets a solid black pill with white text or an aloe #c1fbd4 mint pill for the featured pricing tier. Pressed state lifts to shade-70 #3f3f46. The shape is non-negotiable — new variants change fill, border, or canvas, never the radius.

Can I use this DESIGN.md to build my own React e-commerce site?

Yes — the file feeds into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Shopify's discipline: two-canvas split, thin 330 display weight, pill-only buttons, mint scoped to light surfaces. You can also paste the tokens directly into Tailwind config or CSS variables — every color hex, font stack, radius value, and component definition lives as a quoted YAML string. The 20 components map cleanly onto shadcn/ui primitives: pill buttons swap shadcn Button radius to 9999px, pricing cards use Card with rounded-lg and 32px padding, and the dual nav bars are straightforward header components.

What's missing from this DESIGN.md spec?

Several things, captured at the bottom of the file: hover-state colors for pill buttons (the system lifts to shade-70 #3f3f46 on press but hover styling is more subtle), loading skeletons, the dashboard analytics chart palette, full input error-state combinations, the in-product Polaris admin design system (a separate sub-system used inside the merchant admin), and motion specifications for the cinematic photography crossfades. The spec captures the marketing site and pricing flow — roughly the surfaces a visitor sees before signing up.

Shopifi Inspired Design System

Shopify's two-track design system as a DESIGN.md file.

About Shopifi Inspired DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source shopify.com

E-commerce & Retail

Shopify's public design language reads like two design systems sharing one wordmark. The marketing-hero and product-narrative pages live on a pure-black canvas (#000000) with full-bleed merchant photography, giant Neue Haas Grotesk Display headlines at weight 330, and a single white-stroked black-pill CTA per band. The transactional pages — pricing, signup, dashboards — flip to white #ffffff and an off-white cream #fbfbf5, with the same pill button vocabulary in inverse polarity and pastel mint #c1fbd4 and pistachio #d4f9e0 accents reserved exclusively for this lighter track. The two surfaces never blend. That polarity split is the brand's loudest design decision, more identifying than any single color or shape.

This page packages the full spec into one DESIGN.md file built on the Google Labs spec. Inside: 19 color tokens grouped into brand accents, surface ladders, shade scales, and text tones; 15 typography tokens across Neue Haas Grotesk Display (display, headlines), Inter Variable (UI body, captions), and ui-monospace (code); 6 corner radius values topped by the 9999px pill that every button uses; 8 spacing tokens on an 8px base scale; and 20 components covering buttons, pricing cards, cinematic photo frames, mint pills, light and dark nav bars, and dual-canvas footers.

Feed this file to Claude, Cursor, or GitHub Copilot and the agent produces React components that respect the two-canvas split, the thin 330 display weight, and the pill-only button shape — not a generic e-commerce theme. Or reference the tokens directly: every hex, font, radius, and spacing value lives as a quoted string you can paste into Tailwind config or CSS variables. The system is worth studying precisely because of its discipline: one shape for buttons, one weight for display, one canvas per page intent. Shopify uses constraint as a brand voice.

What makes it distinct

Two-canvas systempure black #000000 for cinematic marketing, white #ffffff and cream #fbfbf5 for transactional surfaces, never blended
Thin-weight display typeNeue Haas Grotesk Display at weight 330 for every headline, including the 96px hero with 2.4px positive tracking
Pill-only button shapeevery CTA uses rounded 9999px geometry across both tracks; rounded rectangles do not exist for buttons
Mint accents scoped to lightaloe #c1fbd4 and pistachio #d4f9e0 appear only on transactional pages, never on the cinematic black hero
Universal ss03 stylistic setthe OpenType feature is enabled across NHG, Inter, and ui-monospace as a character-level brand signature

Live at shopify.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

shopify.com

Explore Shopifi Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Shopifi Inspired design system FAQ

Common questions about Shopifi Inspired's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Shopifi Inspired in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→