# Shopify: brand book and build spec

A commerce brand that dresses in black: near-black, navy and deep green grounds, giant light Inter headlines, one white pill, and real merchants' stores and faces as the imagery. The green Shopping Bag stays in the logo.

From unfairly.ai/brand-guidelines/shopify, checked 2026-10-29. Unofficial study; not affiliated with Shopify.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Shopify sells a tool, so it lets merchants be the color. The page is a dark, quiet stage of light type and white pills, and every bright thing on it is a merchant: their storefronts, their products, their faces. Based on: From the homepage: grounds never go light, the logo green never appears in the UI, and every band's imagery is a real merchant store, product or founder (observed 2026-10-29).

## Fixed and flexible

Never changes:
- The Shopping Bag and italic wordmark, the S always white
- Dark grounds (near-black, navy, deep green), never white pages
- Inter-cut type at light weights for headlines
- The white pill as the only filled call to action
- Real merchants as the imagery

The one thing that varies: The chapter ground hue (teal, violet, navy, deep green, graphite) and which merchants are shown

## Positioning

- **Statement**: The world's best commerce platform. (observed)
- **Category**: Commerce platform: online store, point of sale, checkout, payments and apps in one system (observed)
- **Audience**: Anyone from first-time entrepreneurs to enterprise brands (observed)
- **Promise**: Sell everywhere people shop, from one place, as you grow (our reading)
- **Differentiators**: Checkout with Shop Pay, which Shopify says converts up to 50% higher than guest checkout; 21,000+ commerce apps in the Shopify App Store

## Messaging

Boilerplate (our reading): Shopify is a commerce platform for businesses from first sale to enterprise: online store, point of sale, checkout and payments, apps, and an AI assistant, Sidekick.

Taglines:
- Be the next household name (homepage hero, one of several rotating endings)
- Dream big and build fast on Shopify. (homepage hero lead)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Sell everywhere | Online and in person, across AI and on social, locally and globally | Agentic Storefronts: shoppers check out right in AI chats | observed |
| One place | Payments, fulfillment and retail run from one command center |  | observed |
| Best checkout | The world's best-converting checkout | Shop Pay converts up to 50% higher than guest checkout (footnoted to an April 2023 external study) | observed |
| Built for builders | Apps, APIs and AI tools to customize everything | 21,000+ commerce apps | observed |

They never claim:
- Outcome claims carry their footnote (the checkout study) or a named merchant
- Avoid words that generalize success, such as 'every', 'all' and 'most' (product voice rule)

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Be the next household name" | homepage | https://www.shopify.com/ |
| "Dream big and build fast on Shopify." | homepage | https://www.shopify.com/ |
| "Sell everywhere people shop." | homepage | https://www.shopify.com/ |
| "Your brand has entered the chat" | homepage | https://www.shopify.com/ |
| "Show up everywhere. Without going anywhere." | homepage | https://www.shopify.com/ |
| "Grow around the world" | homepage | https://www.shopify.com/ |
| "For anyone from entrepreneurs to enterprise" | homepage | https://www.shopify.com/ |
| "Meet your secret weapon, Sidekick" | homepage | https://www.shopify.com/ |
| "Customize everything with apps" | homepage | https://www.shopify.com/ |
| "Hyperdriven by AI. Commerce to the core." | homepage | https://www.shopify.com/ |
| "There's no better place for you to build" | homepage | https://www.shopify.com/ |
| "The world's best-converting checkout" | homepage | https://www.shopify.com/ |
| "Rock steady. Blazing fast." | homepage | https://www.shopify.com/ |
| "Shopify has your back" | homepage | https://www.shopify.com/ |
| "Build fast on Shopify" | homepage | https://www.shopify.com/ |
| "Everything new across Shopify. Every six months." | Editions page | https://www.shopify.com/editions |

## Voice

Tone words: real, proactive, dynamic, guiding.

Traits:
- Real, but not too tough or overly familiar (published)
- Proactive, but not needy or pushy (published)
- Dynamic, but not scattered or impulsive (published)
- Guiding, but not handholding or prescriptive (published)

- Two voices: the homepage speaks in short, confident marketing lines ("Rock steady. Blazing fast."); the published voice guide (shopify.dev) governs product and app copy and asks for plain, business-casual language. A landing page follows the homepage voice for headlines and the guide for everything a merchant must act on.
- Use business casual language: plain-spoken, not pretentious or overly playful (published, shopify.dev voice and tone).

Rules a copy check enforces:
- Aim for a US grade 7 reading level; short sentences, headings and bullets
- Start calls to action with a strong verb, in active voice
- Use one term for one concept; no synonyms for key actions
- Avoid words that generalize success, such as 'every', 'all' and 'most'
- Don't oversell or overpromise, and don't assume the merchant is celebrating
- Avoid idioms and phrases with indirect or ironic meanings: they mistranslate
- Sentence case headlines

Their words: merchant, commerce, sell, build, grow, store, checkout.
Never: bad request, forbidden, fatal, invalid, You successfully..., Congrats!.

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Marketing headlines (homepage) 4, Announcing new features 3, Everyday tasks 1, Simple errors 1, Serious problems 0. Shopify publishes tone by situation; the levels are our reading of how much personality each allows.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Shopify Green | #95BF47 | logo | The Shopping Bag in the full-color logo. Never a UI color on the homepage. |
| Shopify Dark Green | #5E8E3E | logo | The bag's shadow side. |
| Page black | #02090A | paper | The page ground from hero to stories. |
| White | #FFFFFF | ink / accent | All headlines and the one filled pill. |
| Teal card | #061A1C | surface | Feature cards on the page black. |
| Navy | #000A1E | chapter ground | Apps and developer bands. |
| Sidekick violet | #2C007F | chapter ground | Top of the Sidekick gradient. |
| Deep green | #041E18 | chapter ground | Checkout, reliability and funding bands. |
| Mint | #36F4A4 | accent_secondary | Numbers and mono labels only. |
| Muted | #9797A2 | ink_muted | Body text on page black. |
| Footer black | #000000 | night | Footer ground. |

Proportion (observed; Observed share of the homepage area at 1440, 2026-10-29: dark grounds and cards, imagery, white type and pills. Shopify publishes no ratio): Dark grounds 70%, Merchant imagery 25%, White type and pills 5%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Shopify-Inter | Shopify's own build of Inter, served from cdn.shopify.com; its licence is not published (Inter itself is SIL OFL) | Inter | system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif |
| body | Shopify-Inter | Shopify's own build of Inter; licence not published | Inter | system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif |
| mono | ui-monospace | the reader's system font | JetBrains Mono | ui-monospace, SFMono-Regular, Menlo, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero display (h1) | --text-hero-display-h1-* | display | 96px | 56px | 1.08 | -1.92px | 300 |
| Statement headline | --text-statement-headline-* | display | 56px | 36px | 1 | -1.68px | 330 |
| Section headline (h2/h3) | --text-section-headline-h2-h3-* | display | 56px | 36px | 1.08 | -1.68px | 330 |
| Closing headline (centered h2) | --text-closing-headline-centered-h2-* | display | 64px | 44px | 1.08 | -1.28px | 330 |
| Feature headline (h3) | --text-feature-headline-h3-* | display | 44px | 30px | 1.1 | -0.44px | 330 |
| Stat number | --text-stat-number-* | display | 96px | 56px | 0.96 | 0px | 300 |
| Pull quote | --text-pull-quote-* | display | 34px | 26px | 1.14 | 0px | 330 |
| Hero lead | --text-hero-lead-* | body | 24px | 18px | 1.3 | -0.48px | 400 |
| Card title (h4) | --text-card-title-h4-* | body | 20px | 16px | 1.3 | 0px | 450 |
| Body large | --text-body-large-* | body | 20px | 18px | 1.4 | 0px | 400 |
| Body | --text-body-* | body | 18px | 16px | 1.4 | 0px | 400 |
| Body small | --text-body-small-* | body | 14px | 14px | 1.37 | 0px | 420 |
| Button | --text-button-* | body | 18px | 16px | 1.56 | 0px | 550 |
| Nav link | --text-nav-link-* | body | 16px | 24px | 1.5 | 0px | 420 |
| Footer heading | --text-footer-heading-* | body | 20px | 20px | 1 | 0px | 450 |
| Footer link | --text-footer-link-* | body | 16px | 16px | 1.5 | 0px | 400 |
| Mono label | --text-mono-label-* | mono | 12px | 12px | 1.33 | 0px | 400 |
| Step number | --text-step-number-* | body | 24px | 18px | 1.3 | 0px | 400 |

## Layout

Measured on https://www.shopify.com/: computed styles, bounding boxes and hover states at 1440 and 390 in headless Chromium, 2026-10-29; images downloaded from their cdn.shopify.com files; video slots as stills from the video files.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 90px | 16px |
| Section padding | 128px | 64px |
| Container max width | 1260px | full |
| Grid columns | 12 | 4 |
| Gutter | 16px | 16px |
| Card gap | 16px | 16px |
| Navigation height | 72px | 72px |

At every width (observed, 2026-10-29):
| What | 390px | 1440px |
|---|---|---|
| hero headline | 56px / 60.48 w330 | 96px / 103.68 w300 |
| section headline | 36px / 40.32 | 56px / 60.48 |
| side margin | 16px | 90px |
| pills | full width 358x44, 16px text | content width, 56px tall, 18px text |
| three-up cards | stacked (Show up) or a swipe row (stories) | three columns |
| nav | logo, underlined Start for free, menu icon | logo, 4 links, Editions pill, Log in, white pill |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Shopify's.

Homepage bands, top to bottom (observed):
1. Hero: Be the next ...
   - Desktop: band y 0-846; y 0-847; headline 96px at y 300, lead y 535, pills y 630
   - Phone: band y 0-626; y 0-627; headline 56px at y 151, full-width pills y 434 / 486
   - Nav overlays the top 72px, transparent
   - Two pills: white Start for free, outline Why we build Shopify with play icon
2. Statement + storefront carousel
   - Desktop: band y 845-1482 (rounded shape from 767); y 767-1482, 48px rounded top over the hero
   - Phone: band y 625-1105 (rounded shape from 600); y 600-1105
   - Four phrases, one white, three #71717A
   - Cards 498 / 216 / 498, 381 tall, 5px radius, 16px gaps
3. Agentic chat card
   - Desktop: band y 1481-2134; card y 1545-2070, 1260x525, radius 16
   - Phone: band y 1104-1797; card y 1144-1757
   - Teal gradient card, text left, media right 630 wide
4. Show up everywhere
   - Desktop: band y 2133-3022; headline y 2197, cards y 2382-2958 (303/606/303)
   - Phone: band y 1796-3030; cards stacked, media 358x224
   - Media 440 tall, radius 8; titles 20/26; body 14/19.2 #9797A2
5. Grow around the world
   - Desktop: band y 3021-3845; headline y 3085, card y 3186-3782
   - Phone: band y 3029-3950; card y 3141-3910
   - 1px #1E2C31 border, radius 12, flags + products + map
6. Merchant stories
   - Desktop: band y 3845-4772; y 3845-4773; photos 409x300 at y 4094
   - Phone: band y 3949-4664; swipe row of 269-wide cards
   - Pick a plan that fits, outline pill, centered
7. Sidekick
   - Desktop: band y 4771-5629; y 4771-5629, 48px rounded top; cards 824 + 412 at y 5013
   - Phone: band y 4662-5666; cards stacked
   - Cards #020A08 radius 12
8. Apps
   - Desktop: band y 5628-6253; y 5630-6175
   - Phone: band y 5665-6214; y 5666-6151
   - Icon wall full width under a diagonal fade
9. Developers
   - Desktop: band y 6252-7242; y 6254-7117; card 1260x622 #010624
   - Phone: band y 6213-6862; card 358x315
   - Three terminal windows, three chips, two round buttons
10. Chapter title
   - Desktop: band y 7241-7462; y 7243-7464, 48px rounded top
   - Phone: band y 6862-7056; y 6837-7031
   - No copy beyond the headline
11. Checkout stats
   - Desktop: band y 7461-8122; y 7464-8125
   - Phone: band y 7054-7864; y 7062-7842
   - 96px light numerals with mint mono labels
   - 2px mint rule before the claim
12. Rock steady
   - Desktop: band y 8121-8899; y 8123-8901
   - Phone: band y 7863-8474; y 7906-8427
   - comp/globe-rest.png 900x820 at x 0, y 8132 (globe, stars and chips in the image), text block at x 930
13. Shopify Capital
   - Desktop: band y 8898-9622; y 8900-9624
   - Phone: band y 8473-9261; y 8490-9150
   - Quote card overlaps the photo
   - Facts behind 2px mint vertical rules
14. Build fast on Shopify
   - Desktop: band y 9621-10402; y 9623-10404, 48px rounded top
   - Phone: band y 9260-9783; y 9213-9737
   - 01-03 in mint, 44px titles, white rules
   - Take your shot white pill
15. Footer
   - Desktop: band y 10402-10960; y 10403-10960
   - Phone: band y 9783-11486; y 9900-11486
   - Four columns at x 347 / 604 / 860 / 1117
   - Seven white social circles

## Page anatomy

How Shopify's own landing pages are built, part by part (observed; https://www.shopify.com/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: A 72px transparent bar over the hero video: logo left, four product links and an outline Editions pill, Log in and a white Start for free pill right
- ground: transparent over the hero (sticky, position: sticky at top 0); no border, no shadow at rest
- height: 72px desktop, 72px phone
- logo: inverted primary logo (white italic wordmark, green Shopping Bag) 126x36 at x 90, y 18. Phone: 126x36 at x 16, y 18
- links: "Why Shopify" (16px chevron-down after) at x 248, "Products" (chevron) at x 394, "Pricing" at x 511, "Enterprise" at x 595; 16/24 weight 420 #FFFFFF, vertically centered, about 32px apart
- actions: "Fall '26 Edition" outline pill 165x44 at x 704, y 14 (2px #FFFFFF ring, 16px w550, 18px blue-violet Shopping Bag badge before the label (the Editions mark; it is not the green logo bag: tint a bag glyph blue-violet, hex not measured)). Right: "Log in" 16/24 w400 white text at x 1131; "Start for free" white pill 141x44 at x 1209, y 14 (16/24 w550 #000000, padding 8 20), ending at x 1350
- sticky: yes (sticky; stays transparent at the top of the page)
- phone: logo at x 16; right: "Start for free" as a white underlined text link (16/24 w400) at x 231, then a 24px two-bar menu icon at x 350. The menu opens full screen on #000000: groups with #36F4A4 12px eyebrows, Pricing / Enterprise / Fall '26 Edition at 24/32 w330, then Log in and Start for free pills (358x44)
- menu labels:
  - Why Shopify
  - Products
  - Pricing
  - Enterprise
  - Fall '26 Edition
- utility labels:
  - Log in
  - Start for free
- why shopify menu:
  - Get started fast: You could be selling by tomorrow.
  - Switch to Shopify: Get more customers. Make more sales.
  - Trusted by enterprise brands: No matter your size, complexity, or ambition.
  - BUILT INTO EVERY STORE: World's best checkout (Proven to convert better.), Sidekick (Your commerce-obsessed AI assistant.)
- products menu:
  - BUILD YOUR WEBSITE: Website Builder, Themes, Domains, Customer Accounts, Sidekick
  - SELL ANYWHERE: Online, AI Chats, Point of Sale, Shop App, Social & Marketplaces, Global, B2B, Across Markets
  - MARKETING & ANALYTICS: Advertising & Campaigns, Email & Customer Chat, Discounts, Analytics, Test & Launch
  - RUN YOUR BUSINESS: Orders & Inventory, Shipping, Finances & Funding, Workflow Automation, Mobile
  - GET PAID: Checkout, Payments, Taxes
  - CUSTOMIZE & EXTEND SHOPIFY: Commerce for Agents, Shopify App Store, Shopify.dev
  - NON-STOP INNOVATION: Shopify Editions (150+ updates to Shopify, twice a year.)
  - LATEST UPDATES: Shopify Protect, Shop.dev, Canvas

**Hero**
- summary: Full-bleed video hero, 847px tall: a 96px two-line light headline, a two-line lead, a white pill and an outline pill, all left-aligned at x 90 in the lower half
- desktop: band y 0-847 (the nav overlays its top 72px). Headline "Be the next" / "<rotating phrase>" two lines at y 300-504 (96/103.68 w300, tracking -1.92px, white, x 90). Lead y 535-597, max 420px, two lines: "Dream big and build fast on Shopify." / "The world's best commerce platform." (24/31.2, tracking -0.48px). Buttons y 630-686: Start for free white pill 160x56 at x 90; Why we build Shopify outline pill 268x56 at x 266 (16px gap) with a 28px play-circle icon at x 284. No text box, no overlay card: type sits straight on the video. The next band's 48px-rounded top edge cuts in at y 767
- phone: band y 0-627. Headline 56/60.48 w330, two lines at y 151-271 (x 16). Lead 18/23.4 w420 at y 363, 358 wide, two lines. Buttons full width 358x44 stacked at y 434 and 486 (8px gap). Video crops to the center
- at rest: Use the still hero-poster.png (a merchant at night in a dark hoodie, lit by a laptop) as the hero image, object-fit cover, with the phrase "solo-preneur": headline "Be the next" / "solo-preneur". The live page rotates the phrase and plays a looping video (animation only)
- media: hero-poster.png 1920x1080, full bleed 1440x847 cover; no overlay color is applied (the footage itself is dark)
- type: headline display 96/103.68 w300 white; lead body 24/31.2 white
- cta: white pill "Start for free" + outline pill "Why we build Shopify" with play icon
- proof: none in the hero
- every headline line break:
  - Every headline as it sets on shopify.com (" / " = line break). Force these breaks with <br> or max-width; the Inter stand-in can otherwise wrap one word earlier or later. Phone breaks are mandatory too: e.g. the statement must start "Sell everywhere people / shop. Online and in / person."
  - Hero h1: desktop "Be the next / solo-preneur" | phone "Be the next / solo-preneur"
  - Hero lead: desktop "Dream big and build fast on Shopify. / The world's best commerce platform." | phone "Dream big and build fast on Shopify. / The world's best commerce platform."
  - Statement: desktop "Sell everywhere people shop. Online and in person. / Across AI and on social. Locally and globally." | phone "Sell everywhere people / shop. Online and in / person. Across AI and / on social. Locally and / globally."
  - Chat h2: desktop "Your brand has / entered the chat" | phone "Your brand has / entered the chat"
  - Show up h3: desktop "Show up everywhere. / Without going anywhere." | phone "Show up / everywhere. Without / going anywhere."
  - Grow h3: desktop "Grow around the world" | phone "Grow around the world"
  - Stories h3: desktop "For anyone from entrepreneurs / to enterprise" | phone "For anyone from / entrepreneurs to / enterprise"
  - Sidekick h2: desktop "Meet your secret weapon, Sidekick" | phone "Meet your secret / weapon, Sidekick"
  - Apps h3: desktop "Customize everything / with apps" | phone "Customize everything / with apps"
  - Dev h3: desktop "Hyperdriven by AI. / Commerce to the core." | phone "Hyperdriven by AI. / Commerce to the core."
  - Chapter h2: desktop "There's no better place for / you to build" | phone "There's no better / place for you / to build"
  - Checkout h3: desktop "The world's best- / converting checkout" | phone "The world's best- / converting checkout"
  - Rock h3: desktop "Rock steady. / Blazing fast." | phone "Rock steady. Blazing fast."
  - Capital h3: desktop "Shopify has your back" | phone "Shopify has your back"
  - Quote: desktop "Shopify Capital has given us / the funding we need to / stock up on inventory and / grow rapidly." | phone "Shopify Capital has / given us the / funding we need to / stock up on / inventory and grow / rapidly."
  - Build h2: desktop "Build fast on Shopify" | phone "Build fast / on Shopify"
- every band edge:
  - Section boxes measured on shopify.com, desktop (y top-bottom): hero 0-846, statement 845-1482, chat 1481-2134, show up 2133-3022, grow 3021-3845, stories 3845-4772, Sidekick 4771-5629, apps 5628-6253, developers 6252-7242, chapter title 7241-7462, checkout 7461-8122, Rock steady 8121-8899, Capital 8898-9622, Build fast 9621-10402, footer 10402-10960. Bands touch (1px overlap), no gaps
  - Phone (390): hero 0-626, statement 625-1105, chat 1104-1797, show up 1796-3030, grow 3029-3950, stories 3949-4664, Sidekick 4662-5666, apps 5665-6214, developers 6213-6862, chapter 6862-7056, checkout 7054-7864, Rock steady 7863-8474, Capital 8473-9261, Build fast 9260-9783, footer 9783-11486
  - Rounded tops (48px desktop, 32px phone) on Sidekick, chapter title and Build fast: these bands do NOT overlap the band above; the corners show the page black #02090A behind them. Only the statement band's rounded shape overlaps the hero (see that section)
  - Inside bands the section top padding is 64px desktop / 40px phone before each headline, unless noted
- font loading: Load Inter WITH its optical-size axis: <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> and keep font-optical-sizing: auto. Plain "Inter:wght@100..900" loads only the 14pt text cut, which sets headlines about 10% wider than Shopify-Inter and breaks every measured line; with opsz on auto, Inter matches Shopify-Inter within 0.6% at the same weight and tracking
- every paragraph line break:
  - Hero lead: "Dream big and build fast on Shopify. / The world's best commerce platform." (both widths)
  - Chat body (desktop): "Get discovered across AI channels. Shoppers / check out right in the chat. You don't lift a finger. / All powered by Agentic Storefronts."
  - Grow caption (desktop): "Take the complexity out of international selling with Shopify Markets. Deliver / products faster and more affordably with built-in shipping tools."
  - Story bodies (desktop): "Jackie Prince launched Guests on Earth out of / her home. Now it's a $4M+ business." | "Our Place grew from a one-product shop into a / cookware empire." | "Iconic toymaker Mattel sells direct to shoppers / all around the world. All powered by Shopify."
  - Sidekick bodies (desktop): "Spot opportunities for growth and automate tedious tasks with / Sidekick. Built right into your Shopify admin." | "Hear how brands use Sidekick to build / faster and smarter."
  - Apps lead: desktop "The Shopify App Store has 21,000+ commerce apps for whatever / specialized features your business might need." | phone "The Shopify App Store has 21,000+ / commerce apps for whatever specialized / features your business might need."
  - Developer lead: desktop "Shopify's Universal Commerce Protocol and APIs, tools, and primitives give devs / the power to build agentic commerce experiences that businesses are looking for." (max-width 756) | phone "Shopify's Universal Commerce / Protocol and APIs, tools, and / primitives give devs the power to / build agentic commerce experiences / that businesses are looking for."
  - Checkout claim (desktop): "Shopify Checkout with Shop Pay converts up to 50% higher than guest / checkout and exposes your brand to hundreds of millions of buyers."
  - Rock steady body (desktop): "Your Shopify store runs strong, even / during your most epic product drops."
  - Capital lead (desktop): "If your business needs a boost, / Shopify Capital is here to lend a hand."

**Sell everywhere people shop**
- summary: A 48px-rounded #02090A band slides over the hero: a four-phrase statement headline and a drifting row of merchant storefront cards
- ground: #02090A, top corners rounded 48px, starting at y 767 so it overlaps the hero by 80px
- desktop: statement at y 839-963, x 90, width 1260, two lines 56/56 w330: "Sell everywhere people shop. Online and in person." / "Across AI and on social. Locally and globally." Store cards at y 1021-1402 (381 tall): wide 498 and narrow 216 cards alternating, 16px gaps, 5px radius, starting at x 90: Steve Madden (498, a phone showing a ChatGPT shopping chat over flowers), Ornot (216, a cycling apparel shop with a POS terminal), Glossier (498, the Glossier storefront with its giant wordmark), and on off-screen. The card row is clipped to the 1260 content box (overflow hidden at x 90-1350): at rest the third card ends at x 1350 and nothing shows in the right margin. Band ends y 1482 (80px bottom padding)
- phone: the rounded #02090A shape (32px corners) starts at y 565 over the hero image, so the curve is clearly visible; statement 36/36 at y 621 (56px below the curve), five lines, x 16. Cards 256x196 and 111x196 with 8px gaps from x 16 at y 845, the row bleeding off the right edge. Band ends y 1105
- anatomy:
  - Band edge: the hero section itself runs y 0-847, but a #02090A shape with 48px rounded top corners (32px on phones) starts at y 767 (phone y 565) and covers the hero's bottom 80px (phone 62px). The hero image shows in the rounded corners. This is the only band that overlaps another
  - Statement resting state: phrase one ("Sell everywhere people shop.") #FFFFFF, the other three #71717A; the live page scrubs the highlight phrase by phrase on scroll (animation only)
  - Store cards are full screenshots of real Shopify storefronts, 5px radius, no caption at rest (a domain label like "stevemadden.com" shows only on hover)
  - Order: stevemadden.com, ornot.com, glossier.com, houseplant.com, kotn.com, eastfork.com
  - A small floating video thumbnail docks bottom-right while scrolling (animation only: do not build)
- components: statement headline, storefront card

**Your brand has entered the chat**
- summary: One full-width teal feature card: AI assistant logos, headline and lead left, a chat-commerce video still right
- ground: #02090A band. Card desktop: #061A1C with linear-gradient(290.7deg, #061A1C 58.79%, #0D3A2D 100%): flat #061A1C over the right 59% (the media side), warming to #0D3A2D only toward the top-left corner behind the text; the green is a dim tint, never emerald. Phone: flat #061A1C, no gradient. Radius 16
- desktop: card x 90-1350, y 1545-2070 (1260x525). Left text block x 130 (40px inset): three 48px round white badges (ChatGPT, Google, Copilot logos) overlapping by 8px at y 1585; headline 56/60.48 w330 two lines at y 1817 ("Your brand has" / "entered the chat"), width 550; body 18/25.2 #9DABAD at y 1954, max 413, three lines, ending with the underlined link "Agentic Storefronts". Right: media 630x525 flush to the card's top, right and bottom edges at x 720
- phone: card x 16-374, y 1144-1757: text first (badges, headline 36/40.32 at y 1224, body 16/22.4 at y 1321, 310 wide), media 358x298 at the bottom. Phone media: chat-poster.png at object-fit cover, object-position center, NO extra scaling: the sweater stays small (about 150px wide) with the chat bubble about 180px wide, surrounded by teal
- anatomy:
  - Badges: three 56px white circles (40px on phones) with 28px logos, overlapping by 16px (12px on phones), soft shadow: icons/ai-chatgpt.svg, icons/ai-google.png, icons/ai-copilot.svg in that order, z-order left on top
  - Media: chat-poster.png, a teal-lit knit sweater with a white chat input bubble ("I need a warm sweater in green...") and a black round send button
  - Body copy: "Get discovered across AI channels. Shoppers check out right in the chat. You don't lift a finger. All powered by Agentic Storefronts."
- components: feature_card, text_link

**Show up everywhere**
- summary: Two-line 56px headline, then three cards of unequal width (303 / 606 / 303), each a dark product visual over a title and a short line with inline links
- ground: #02090A
- desktop: headline at y 2197, x 90, two lines ("Show up everywhere." / "Without going anywhere."), 56/60.48 w330. Cards from y 2382: x 90 (303 wide), 417 (606), 1047 (303), 24px gaps, card radius 12, media 440 tall with 8px radius. Titles 20/26 w450 white at y 2854; body 14/19.2 w420 #9797A2 at y 2888, two lines. Band ends y 2958 plus 128px. Each card is 576 tall: media 440, 32px gap, title, body
- phone: headline 36/40.32 at y 1836 (three lines). Cards stack full width (358) with media 358x224: titles 16/20.8 at media bottom + 16, body 14/19.2; cards 107px apart. Phone media: card 1 uses comp/showup-1-phone.png (358x224, the landscape editor with both models, the purple "Group" box and the Sidekick prompt "Update header to show off my new sale") at exactly 358x224, no crop; cards 2 and 3 use comp/showup-2.png and comp/showup-3.png, object-fit cover, centered
- anatomy:
  - Media (the brand's static, reduced-motion state, captured from the live cards): card 1 comp/showup-1.png, the store editor ("The Statement Sweater" in a purple "Group" selection box with a Sidekick badge) on dark arcs; card 2 comp/showup-2.png, the green Shopping Bag glowing in the center of concentric green rings with six dark pills (Payments, Shipping, Catalog, Customers, Inventory, Retail); card 3 comp/showup-3.png, Instagram, TikTok and ChatGPT tiles on dark arcs. Use them as the full 303x440 / 606x440 / 303x440 media, object-fit cover, radius 8
  - Card 1 "Get a store that's built to sell". Body: "Build your online store instantly with AI. Or use prebuilt themes." with "Build your online store" underlined
  - Card 2 "Control everything in one place". Body: "Payments, Fulfillment, Retail. Run it all from one central command center." with the three nouns underlined
  - Card 3 "Sell on every channel". Body: "Put your products where shoppers scroll, search, and shop." with "scroll, search, and shop" underlined
- components: media_card, text_link

**Grow around the world**
- summary: One-line 56px headline over a full-width bordered teal card: country flags, stacked product cards with an order pill, and a world map with a shipping-label panel; caption bottom-left
- ground: #02090A; card #061A1C, 1px #1E2C31 border, radius 12, three #157076 radial glows
- desktop: headline at y 3085 (56/60.48, one line). Card x 90-1350, y 3186-3782 (596 tall), #061A1C, 1px #1E2C31, radius 12. Visual: comp/grow-visual.png (the whole top area as one image: flag tile column, product card fan with the "Order for $125.00" pill, dotted world map and the white "Buy 0 shipping labels" panel) placed at the card's top edge, full card width (1258 x 447), clipped by the card radius. Caption at x 122 (32px inset): "Sell across borders" 20/26 w450 at y 3665, body 18/25.2 #9DABAD max 578 at y 3699, two lines, with underlined "Shopify Markets" and "built-in shipping tools"
- phone: headline 36/40.32 at y 3069. Card x 16-374, y 3141-3910, padding 24: product fan centered at y 3242-3558, map 453x285 bleeding right at y 3470, caption at y 3768 (16/20.8 title, 16/22.4 body)
- anatomy:
  - Use comp/grow-visual.png; do not rebuild the flags, product fan or shipping panel by hand
  - Body lines: "Take the complexity out of international selling with Shopify Markets. Deliver" / "products faster and more affordably with built-in shipping tools."
- components: feature_card

**For anyone from entrepreneurs to enterprise**
- summary: Two-line headline, three merchant story cards (photo, title, one-line story) and a centered outline pill
- ground: #02090A
- desktop: headline at y 3909, width 724, two lines. Photos 409x300, radius 12, at x 90 / 515 / 941, y 4094 (16px gaps). Titles 20/26 w450 white at y 4426; body 18/25.2 #9797A2 at y 4460, two lines, merchant names in w600 #FFFFFF. "Pick a plan that fits" outline pill 216x56 centered at x 612, y 4582. Band ends y 4773 (128px bottom padding)
- phone: headline 36/40.32 three lines at y 3989. Cards become a horizontal swipe row: 269 wide, photos 269x176 at y 4166, 16px gaps, the third card off-screen. Outline pill full width 358x44 at y 4533
- anatomy:
  - "Get started fast": Jackie Prince launched Guests on Earth out of her home. Now it's a $4M+ business. (story-guests-on-earth.jpg: the founder seated before bright paintings)
  - "Grow as big as you want": Our Place grew from a one-product shop into a cookware empire. (story-our-place.png: blue Our Place pans on a stove)
  - "Raise the bar": Iconic toymaker Mattel sells direct to shoppers all around the world. All powered by Shopify. (story-mattel.jpg: the red MATTEL letters outside its headquarters)
- components: media_card, button_outline

**Meet your secret weapon, Sidekick**
- summary: A violet-to-navy band with a 48px rounded top: one-line headline, a wide and a narrow video card
- ground: linear-gradient(in oklab, #2C007F 42.49%, #000A1D 100%) top to bottom, top corners rounded 48px
- desktop: band y 4771-5629, padding 100 0. Headline at y 4872 (56/60.48, one line). Cards at y 5013: 824x517 at x 90 and 412x517 at x 938 (24px gap), #020A08, radius 12; media fills the top 367px of each; text block 32px inset: title 20/26 w450 at y 5411, body 18/25.2 #9797A2. Left card title "Your very own commerce AI" with a 16px violet sparkle after it; body "Spot opportunities for growth and automate tedious tasks with Sidekick. Built right into your Shopify admin." (Sidekick underlined). Right card "What winning looks like" / "Hear how brands use Sidekick to build faster and smarter."
- phone: headline 36/40.32 at y 4726 (two lines). Cards stack full width: left card media 358x155, right card media 358x319; text 24px inset at 16/20.8 and 16/22.4
- anatomy:
  - Left media: sidekick-chat-frame.png, a Sidekick prompt box "Create a collection of my best..." floating over product photos and small data chips on a purple glow
  - Right media: sidekick-story-frame.png, a merchant testimonial video card (Emily Grayson, Tuckernuck) with a round play button. Overlay a play control centered on the portrait: a 64px circle with a 2px #FFFFFF ring, a transparent fill and a white play triangle (about 20px)
- components: media_card

**Customize everything with apps**
- summary: Headline and lead on the left over a full-width wall of app icons that fades in from the left
- ground: #000A1E
- desktop: band y 5630-6175. Headline at y 5694, x 90, width 608, two lines; lead 20/28 #BDBDCA at y 5839: "The Shopify App Store has 21,000+ commerce apps for whatever specialized features your business might need." ("21,000+ commerce apps" underlined). Icon wall: apps-strip.jpg (1600x457 displayed, repeating horizontally) from y 5694 across the full 1440. Four fades sit over it, all in #000A1E: (1) a 136px linear fade from the band top downward (opaque to transparent), (2) a 136px fade up from the band bottom, so the lowest row recedes, (3) a 145deg fade, #000A1E solid to 50%, 90% at 70%, transparent at 93%, over the top 220px, which hides rows 1-2 behind the text and leaves them dim toward the right, (4) a radial-gradient(circle at 0 0, #FFFFFF, #000A1E 30%) used as a mask so the top-left corner is solid navy. Result at rest: rows 1-2 dim and only visible right of about x 700; rows 3-4 full color edge to edge; row 5 fading into navy
- phone: headline 36/40.32 at y 5706, lead 18/25.2; icon strip 800x229 under the text at y 5910, bleeding both edges
- anatomy:
  - Icons are 56px rounded-square app tiles in a 64px grid, full color
  - Resting state: the strip at its starting offset (it drifts left: animation only)
- components: none

**Hyperdriven by AI. Commerce to the core.**
- summary: Developer band: headline and lead, then a navy card holding three terminal windows, labeled chips and two round brand buttons
- ground: #000A1E; card #010624 radius 16 with #1260FF radial glows at 35%
- desktop: headline at y 6254 (two lines, width 756); lead 20/28 #BDBDCA at y 6399: "Shopify's Universal Commerce Protocol and APIs, tools, and primitives give devs the power to build agentic commerce experiences that businesses are looking for." (both product names underlined). Card x 90-1350, y 6495-7117 (622 tall), radius 16: use comp/dev-card.png as the whole card visual (three terminal windows, the three chips, the cyan Hydrogen button and the violet button, circuit lines and blue glows are all in it), object-fit cover, top-aligned
- phone: headline 36/40.32 at y 6214, lead 18/25.2 at y 6311 (five lines); card 358x315 at y 6444 showing the center of comp/dev-card.png (object-fit cover, object-position 45% top)
- anatomy:
  - Use comp/dev-card.png; do not rebuild the terminals by hand
- components: dev_chip

**There's no better place for you to build**
- summary: A deep green band with a 48px rounded top and one centered 64px headline
- ground: #041E18, top corners rounded 48px
- desktop: band from y 7243, padding 80 top; headline centered at y 7323, max 840, two lines ("There's no better place for" / "you to build"), 64/69.12 w330
- phone: band from y 6837, headline 44/47.52 left-aligned at x 16, three lines
- anatomy:
  - No body copy, no button: a chapter title for the next three blocks
- components: none

**The world's best-converting checkout**
- summary: Headline, two big stats with mono labels, a footnoted claim with a mint rule, and a Shop Pay checkout visual on a green glow
- ground: #041E18
- desktop: headline 44/48.4 at y 7592, x 90, two lines ("The world's best-" / "converting checkout"). Stat columns 303 wide at x 90 and 417 from y 7759, each with a 1px #11352D top rule: 16px mint icon + 12/16 uppercase mono #36F4A4 label at y 7770 ("Higher conversions", "High-intent shoppers"), then the number 96/92.16 w300 white at y 7803 ("15" with superscript "%", "250M" with superscript "+"). Claim at y 7937, 18/25.2 #99B3AD, two lines, behind a 2px #36F4A4 left rule at x 90 with 20px indent: "Shopify Checkout with Shop Pay converts up to 50% higher than guest checkout and exposes your brand to hundreds of millions of buyers." (Shopify Checkout and Shop Pay underlined). Footnote 12/16 #99B3AD at y 8030: "Based on external study with a Big Three global consulting firm in April, 2023." Right: comp/checkout-visual.png (730x720 CSS px: a white Shop Pay checkout window with a purple "shop" badge, ringed by 14 rounded product photo tiles on the deep green) at x 710, y 7486. It is taller than the band: let it run about 120px into the Rock steady band (same #041E18 ground, so no seam). Never clip, crop or fade it; every tile stays visible
- phone: headline 30/34.2 at y 7062; stats side by side at x 16 and 203 with 56px numbers; claim 16/22.4; visual 358x344 at y 7498 below
- anatomy:
  - The stats and the footnote are Shopify's own published claims, shown with their footnote
  - Use comp/checkout-visual.png as one image; it includes the tiles and the checkout window
- components: stat column

**Rock steady. Blazing fast.**
- summary: A starfield on deep green with four floating stat chips on the left and a short text block on the right
- ground: #041E18 with a darker radial vignette and scattered 2-4px white dots with soft glows
- desktop: band y 8121-8899. Left: comp/globe-rest.png at exactly 900x820 CSS px, placed at x 0, y 8132 (it is the band's left 900px at rest: the night Earth with amber city lights over North America, about 710px across with its top at about y 8204, i.e. 190px above the headline top, plus the band's stars and two of the floating stat chips). Do not scale it down, do not add chips or orbit lines of your own. Text at x 930: headline 44/48.4 two lines at y 8392, body 18/25.2 #99B3AD max 420 at y 8513. Continue the starfield (2-4px white dots with soft glows on #041E18) across the right half
- phone: headline 30/34.2 at y 7906, body 16/22.4 at y 7957; below it comp/globe-rest.png scaled to 390 wide (x 0), top about y 8040
- anatomy:
  - The globe is the visual anchor of this band: never replace it with an empty starfield
  - Resting state: chips static (they drift: animation only)
- components: stat_chip

**Shopify has your back**
- summary: A merchant photo with an overlapping quote card on the left; headline, lead and three funding facts on the right
- ground: #041E18
- desktop: band y 8900-9624, padding 128. Photo capital-jessica-wise.png 315x351 at x 90, y 8994; quote card 473x317 at x 248, y 9177 (#072720, 1px #133B32, radius 8), quote 34/38.76 w330 white at x 285, y 9214, four lines with a hanging open quote: "Shopify Capital has given us the funding we need to stock up on inventory and grow rapidly." Name 18/28 white "Jessica Wise" at y 9401 and "CEO, Hell Babes" (Hell Babes underlined). Right at x 825: headline 44/48.4 one line at y 9028; lead 18/25.2 #99B3AD at y 9100 ("If your business needs a boost, Shopify Capital is here to lend a hand."); facts: three blocks, each with a 2px #36F4A4 vertical rule at x 825 spanning its two lines and the text 18px to its right at x 843 (no icons): "$5B US loaned out so far" / "Invested in Shopify merchants"; "Loans up to $5M US" / "Amounts tailored to meet your needs"; "0% equity" / "No stakes taken—ever" (24/31.2 white over 18/25.2 #99B3AD, 96px pitch). Spacing: the lead ends about y 9150; the first fact starts at y 9237 (87px gap), then 96px pitch
- phone: headline 30/34.2 at y 8490, lead, facts at x 34 behind 2px #36F4A4 rules at x 16 (18/23.4 over 16/22.4), then the photo with the quote card (26/29.64) overlapping it at y 8938
- anatomy:
  - Quote stays verbatim and attributed; keep it under the photo's right half
- components: quote_card

**Build fast on Shopify**
- summary: A graphite band with a 48px rounded top: centered 64px headline, two staggered portrait photos left, three numbered steps and a white pill right
- ground: top corners rounded 48px (32px phone); background: linear-gradient(rgba(2,8,8,0.5), transparent 20%, transparent 90%, rgba(2,8,8,0.5)), radial-gradient(at 87% 84%, rgba(2,8,8,0.9), transparent 50%), radial-gradient(at 10% 8%, rgba(2,8,8,0.9), transparent 50%), radial-gradient(at 65% 36%, rgba(63,63,75,0.5), transparent 50%), radial-gradient(at 38% 61%, rgba(63,63,75,0.5), transparent 50%), radial-gradient(at 99% 36%, rgba(63,63,75,0.5), transparent 50%), radial-gradient(at 0 62%, rgba(63,63,75,0.5), transparent 50%), #09090A. Use this exact stack: the graphite haze spreads behind both photos and the steps
- desktop: band y 9623-10404, padding 80 0 128. Headline centered at y 9703 (64/69.12, one line). Photos 288x384, radius 12, positioned absolutely (not after a margin under the headline): the first photo top is 125px below the headline top: build-1.jpg at x 90, y 9828 and build-2.jpg at x 394, y 9908 (80px lower). Steps at x 764: number 24/31.2 #36F4A4 ("01") then title 44/48.4 w330 white at x 828 ("Add your first product", "Customize your store", "Set up payments"), rows at y 9922 / 10006 / 10089, each with a 1px white 40% rule under the title (x 828-1350). "Take your shot" white pill 179x56 at x 828, y 10213. Only step 01's two photos show at rest; steps 02 and 03 have no photos to build
- phone: headline 44/47.52 at y 9277 (x 56, two lines); steps at x 16 (numbers 18/23.4, titles 30/34.2); pill full width 358x44 at y 9606; photos hidden
- anatomy:
  - Resting state: step 01 active (photos show its images); the live page cycles steps (animation only)
- components: button_primary

**Footer**
- summary: Black footer: a white Shopping Bag top-left, four link columns, a hairline, then locale, legal links and seven social icons
- ground: #000000
- anatomy:
  - Padding 80 top, 90 sides. White Shopping Bag 44x50 at x 90, y 10483 (link "Back to the top")
  - Columns at x 347 / 604 / 860 / 1117, 233 wide; heads 20/20 w450 white at y 10483; links 16/24 #A1A1AA from y 10527 on a 40px pitch
  - Shopify: What is Shopify?, Shopify Editions, Careers, Investors, Newsroom, Sustainability
  - Ecosystem: Developer Docs, Theme Store, App Store, Partners, Affiliates
  - Resources: Blog, Compare Shopify, Guides, Free Tools, Changelog
  - Support: Shopify Help Center, Community Forum, Hire a Partner, Service Status
  - 1px #121C1E rule at y 10805 across x 90-1350
  - Bottom row y 10849: globe icon + "USA | English" + chevron (#E0E0E0, 142x26) at x 90; links 16/24 #A1A1AA "Terms of Service" (x 272), "Legal" (439), "Privacy Policy" (521), "Sitemap" (666), "Your Privacy Choices" with the CCPA toggle icon (767)
  - Right: seven 32x32 icons, 16px apart, x 1030-1350, white (#FFFFFF fill, the glyph cut out of a white circle or square): icons/social-facebook.svg, social-twitter.svg (X), social-youtube.svg, social-instagram.svg, social-tiktok.svg, social-linkedin.svg, social-pinterest.svg
  - No copyright line, address or phone number on the page
  - Page ends y 10960
- phone: one column at x 32: Shopping Bag, then each column head (20/20) with its links on a 40px pitch (heads at y 9968 / 10292 / 10576 / 10860), locale selector, legal links stacked (y 11209-11329), social icons in a row. Page ends y 11486

**On dark grounds**
- secondary button: the white outline pill (2px #FFFFFF ring, transparent fill)
- link: inline links take the muted body color of their ground with a 1px underline; hover #FFFFFF, no underline
- muted text: #9797A2 on #02090A, #9DABAD in teal cards, #BDBDCA on navy, #99B3AD on deep green, #A1A1AA in the footer
- hairline: #1E2C31 (teal card border), #11352D (deep green rules), #121C1E (footer rule)
- logo variant: inverted primary logo (white wordmark, green bag) in the nav; white monotone Shopping Bag in the footer

## Components

- **button primary** (observed): fill #FFFFFF, text #000000, radius pill, height 56, padding x 24, font size 18, weight 550, face body, use Start for free (hero), Take your shot: the one filled CTA, always white on the dark page, transition all 0.15s cubic-bezier(0.4, 0, 0.2, 1)
  - hover (observed): background-color #D4D4D8
- **button outline** (observed): fill none, text #FFFFFF, ring #FFFFFF, ring px 2, radius pill, height 56, padding x 24, font size 18, weight 550, face body, use Why we build Shopify (with a 28px play-circle icon, padding 12 26 12 16), Pick a plan that fits
  - hover (observed): box-shadow inset 0 0 0 2px #D4D4D8
- **button nav** (observed): fill #FFFFFF, text #000000, radius pill, height 44, padding x 20, font size 16, weight 550, face body, use Start for free in the nav; every pill on phones is this size (full width 358)
- **nav edition pill** (observed): fill none, text #FFFFFF, ring #FFFFFF, ring px 2, radius pill, height 44, padding x 13, font size 16, weight 550, use Fall '26 Edition: an outline pill in the nav with an 18px Editions bag icon before the label
- **text link** (observed): text inherits the muted body color of its ground, underline 1px, auto offset, hover goes #FFFFFF and drops the underline, use inline product links in body copy (Agentic Storefronts, Shopify Markets, Shop Pay)
- **feature card** (observed): fill #061A1C, radius 16, border none (chat card) or 1px #1E2C31 (Grow card, radius 12), use full-width 1260 cards that hold a text block and a product visual
- **media card** (observed): radius 12, media radius 8, use Show up cards and story cards: media on top, 20/26 title, muted body; no fill, no border
- **stat chip** (observed): fill #101010, opacity 0.7, border 1px #11352D, radius 8, use floating stats in the Rock steady starfield: 16px icon, white mono line, mint mono caption
- **quote card** (observed): fill #072720, border 1px #133B32, radius 8, width 473, use pull quote overlapping a merchant photo
- **dev chip** (observed): fill rgba(255,255,255,0.1), radius 4, padding 12px 16px, font 14/19.2 w420 white with an 8px ring dot before the label, use Build for AI, Build custom storefronts, Build apps

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| control | cubic-bezier(0.4, 0, 0.2, 1) | 150ms | pill hover: white fill to #D4D4D8, outline ring to #D4D4D8 | observed |
| link | cubic-bezier(0.4, 0, 0.2, 1) | 200ms | footer and body links fade to #FFFFFF | observed |
| hero-word |  |  | the hero's second line rotates (household name, solo-preneur, AI all-star, global empire, category creator, store they line up for, big thing) over a looping video. Resting state for a build: one phrase and one still frame (animation only) | observed |
| statement-scrub |  |  | the four-phrase statement highlights one phrase at a time (#FFFFFF over #71717A) as you scroll; resting state: phrase one white, the rest #71717A (animation only) | observed |
| marquee |  |  | the store carousel and the app-icon wall drift left continuously; build them static (animation only) | observed |

## Icon tokens

Grid not published for marketing pages, stroke thin line icons at 14-20px (chevrons, play circle, globe, stat icons) in white or mint; app and channel icons are full-color tiles (observed).
| Name | Size | Use |
|---|---|---|
| s | 16px |  |
| m | 20px |  |
| l | 28px |  |

## Signature moves

### A near-black page with one white pill

Where: every band from the hero to the footer.
Do: The whole homepage sits on #02090A, #000A1E navy and #041E18 deep green, never white. Type is white with a muted second color per ground. The only filled control is the white pill (56px, 9999px radius, 18px w550 black); the alternative is the same pill as a 2px white outline.
Don't: No white bands, no colored buttons, no green from the logo used as a UI color.

### Light, giant, tightly tracked headlines

Where: hero, section heads, stats.
Do: Headlines run Inter at weight 300-330 (never bold): 96px hero, 56px section heads, 64px closers, all with negative tracking (-0.02 to -0.03em) and sentence case. Stats repeat it: 96px light numerals with a 64px superscript unit. Load Inter WITH its optical-size axis: <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> and keep font-optical-sizing: auto. Plain "Inter:wght@100..900" loads only the 14pt text cut, which sets headlines about 10% wider than Shopify-Inter and breaks every measured line; with opsz on auto, Inter matches Shopify-Inter within 0.6% at the same weight and tracking.
Don't: No bold or semibold headlines, no all caps, no title case.

### Bands that slide over each other with 48px rounded tops

Where: the statement band over the hero, Sidekick, the deep green run, Build fast.
Do: A new chapter starts with a full-width band whose top corners are rounded 48px, overlapping the band above by its radius so the corners show the previous ground behind them. Inside bands, cards are 12-16px rounded.
Don't: No square band joins at chapter changes, no rounded bottom corners.

### Each chapter gets its own dark hue

Where: the page as a whole.
Do: Near-black teal for selling (#02090A, #061A1C cards), violet-to-navy for Sidekick (#2C007F to #000A1D), navy for apps and developers (#000A1E, #010624 card), deep green for checkout and reliability (#041E18), graphite for the close. Body text takes a matching muted tint (#9DABAD, #BDBDCA, #99B3AD).
Don't: No bright fills, no light tints.

### Mint for data, mono for labels

Where: checkout stats, stat chips, step numbers.
Do: #36F4A4 marks numbers and labels only: 12px uppercase mono stat labels, 01-03 step numbers, the 2px rule before a stat footnote. Everything else stays white or muted.
Don't: No mint headlines, buttons or large fills.

## Messaging: rules

The homepage runs as a chapter list of short, two-beat headlines: a promise, then a twist ("Show up everywhere. Without going anywhere."). Each chapter names one capability and backs it with a merchant, a number or a product shot.

Why it works: Two-beat lines are fast to scan on a long page and let a big claim land without adjectives.

- Headlines in sentence case, often two short sentences
- Back claims with a named merchant or a footnoted number
- Name the product in the body as an underlined link, not in the headline

Sources: https://www.shopify.com/

## Voice: rules

The published voice is real, proactive, dynamic and guiding, each with its "but not" (too tough, pushy, scattered, prescriptive). Tone flexes by situation, from quiet everyday confirmations to careful bad-news messages.

Why it works: Merchants use Shopify to run a business; plain words that respect their time keep trust.

- Business casual: plain-spoken, not pretentious or overly playful
- Grade 7 reading level, short sentences
- CTAs start with a strong verb
- Don't generalize success with 'every', 'all' or 'most'
- Explain the why, not only the how
- Don't oversell or overpromise
- Don't use dramatic words for simple errors
- Don't assume the merchant is excited

Do and don't:
- Do: "Product saved". A routine task gets a plain confirmation (the guide's own example).
- Don't: "Congrats! You set up your single login for Shopify.". Don't assume the merchant is celebrating.
- Do: "Change the product weight to 0 or more and try again.". Say what happened and how to fix it.
- Don't: "Invalid request". Dramatic words for a simple error.

Sources: https://shopify.dev/docs/apps/design/content/voice-and-tone, https://shopify.dev/docs/apps/design/content, https://shopify.dev/docs/apps/design/content/grammar-and-mechanics

## Logo: rules

The primary logo is The Shopping Bag plus an italic wordmark, in full color wherever possible; the S on the bag is always white. An inverted version (white wordmark) is for dark or busy grounds; monotone black or white is for single-color or low-contrast cases, and has a gap in the bag. The bag alone can stand in when the wordmark would be illegible, a full-color logo is nearby, the brand is already established, or space is tiny.

|  |  |
|---|---|
| Minimum size | 80px / 28mm wide |
| Clear space (logo) | x-height of the wordmark |
| Clear space (bag) | 1/2 S |
| Homepage nav | inverted logo 126x36 |
| Homepage footer | white bag 44x50 |

- Clear space X around the logo, X = the wordmark x-height
- Clear space of half an S around the bag alone
- Minimum width 80px on screen, 28mm in print
- The S on the bag is always white
- Don't use the old logo
- Don't use the wordmark alone
- Don't stretch, squeeze or rotate it
- Don't place it on busy or low-contrast backgrounds
- Don't add gradients or shadows
- Don't stack the logo
- Don't create your own version

Do and don't:
- Do: "Inverted primary logo on a dark ground". White wordmark, full-color bag, white S.
- Don't: "Wordmark alone, stretched". Both are on the published do-not list.

Real examples, to look at on Shopify's own pages (not for reuse):
- Primary logo: https://www.shopify.com/brand-assets
- Inverted primary logo: https://www.shopify.com/brand-assets

Sources: https://www.shopify.com/brand-assets

## Color: rules

Shopify publishes its colors only inside the logo files: bag green #95BF47 and shadow #5E8E3E, with a white S. The homepage never uses that green in the UI. It is built from dark grounds, a different hue per chapter (#02090A, the #2C007F-to-#000A1D Sidekick gradient, #000A1E navy, #041E18 deep green), white type, one white pill and a mint #36F4A4 for numbers. For product UI, Shopify's app guidance sets roles: green for success, yellow for paused, orange for pending, red only for errors.

Why it works: Dark, quiet grounds let merchant photography and product UI carry the color; green stays special because it only appears in the logo.

- Body text in a muted tint of the ground: #9797A2, #9DABAD, #BDBDCA or #99B3AD
- Mint #36F4A4 for numbers and mono labels only
- In product UI, never use green or red to entice; contrast at least 4.5:1
- Don't use color alone to carry meaning

Not published: a marketing palette with hex values (only the logo files carry hex); color proportions.

Do and don't:
- Do: "Start for free". The one filled control: a white pill on the dark page.
- Don't: "Start for free". Mint is for numbers and labels, not buttons or headlines.

Sources: https://www.shopify.com/brand-assets, https://shopify.dev/docs/apps/design/visual-design, https://www.shopify.com/

## Typography: rules

shopify.com sets everything in one face, Shopify-Inter, a Shopify build of Inter loaded as a variable font. Headlines run light (300 hero, 330 sections) at large sizes with negative tracking; body runs 400-420; buttons 550. Labels for data use the system mono. The app design guide asks for a clear hierarchy: page title largest, headings bolder or larger, never underlined.

Why it works: Light weights at big sizes read calm and premium on dark grounds; one family keeps a long page coherent.

- Load Inter WITH its optical-size axis: <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"> and keep font-optical-sizing: auto. Plain "Inter:wght@100..900" loads only the 14pt text cut, which sets headlines about 10% wider than Shopify-Inter and breaks every measured line; with opsz on auto, Inter matches Shopify-Inter within 0.6% at the same weight and tracking
- Headlines 300-330, never bold
- Tracking -0.02em (hero) to -0.03em (56px heads); 0 for body
- Sentence case everywhere
- Mono only for stat labels
- Don't set headlines bold
- Don't use all caps for headlines
- Don't underline headings

Do and don't:
- Do: "Be the next household name". Light weight, big size, tight tracking, sentence case.
- Don't: "BE THE NEXT HOUSEHOLD NAME". Bold caps fight the light, calm system.

Sources: https://www.shopify.com/, https://shopify.dev/docs/apps/design/visual-design

## Iconography: rules

Marketing icons are thin white or mint line glyphs at 14-28px (chevrons, play circle, globe, stat icons). Product icons come from the Polaris icon set; app guidance asks for icons that clarify actions and are used consistently in lists.

- Pair icons with text
- Keep icons consistent in repeating rows
- Don't use icons inconsistently in lists

Sources: https://www.shopify.com/, https://shopify.dev/docs/apps/design/visual-design

## Illustration: rules

The homepage has no illustration: product UI, app icons and photos fill every visual slot. Shopify's app guidance points to the Polaris illustration guidelines for in-admin illustration.

- Use real product UI and merchant imagery instead of illustration on marketing pages

Not published: a marketing illustration style.

Sources: https://www.shopify.com/, https://shopify.dev/docs/apps/design/visual-design

## Photography: rules

Photography is real merchants and their products: founders in their studios, cookware on a stove, a toymaker's headquarters, storefront screenshots, all full-color and naturally lit, set in 8-12px rounded frames on dark grounds. Video plays in the hero and the AI cards.

- Name the merchant in the copy next to the photo
- Rounded 12px frames; storefront screenshots 5px
- Candid, documentary light; no studio-white cutouts

Real examples, to look at on Shopify's own pages (not for reuse):
- Guests on Earth founder Jackie Prince: https://www.shopify.com/
- Our Place cookware: https://www.shopify.com/
- Mattel headquarters: https://www.shopify.com/

Sources: https://www.shopify.com/

## Motion: rules

Controls change in 150ms (cubic-bezier 0.4, 0, 0.2, 1). Brand motion is bigger and slower: a looping hero video with a rotating final phrase, a statement that highlights phrase by phrase on scroll, marquee storefronts and app icons, drifting stat chips.

- Give every animated element a static resting state
- Keep control transitions at 150-200ms

Not published: motion principles or durations in a guide.

Sources: https://www.shopify.com/

## Interface and layout: rules

A 1260px content box with 90px side margins at 1440 and 16px on phones. Bands are 640-930px tall, each opening with a 56px headline 64px above its content. Chapters change with a 48px-rounded band edge. Cards are 12-16px rounded, three-up at 409px with 16px gaps or 303/606/303 with 24px gaps.

|  |  |
|---|---|
| Container | 1260px |
| Margins | 90px / 16px |
| Band top radius | 48px |
| Card radius | 12-16px |

- Left-align headlines, except the two 64px closers which center
- Text and media split at x 720 in two-column blocks
- Phone: everything at x 16, pills full width

Sources: https://www.shopify.com/

## Rules: rules

The non-negotiables come from the brand-assets page (logo) and the app design guidelines (voice, color roles, contrast).

- Use the logo in full color wherever possible; the S stays white
- Link Shopify's name and assets to shopify.com where used on the web
- Background-to-text contrast at least 4.5:1
- Don't imply Shopify sponsors or endorses you
- Don't modify or recreate the logo

Sources: https://www.shopify.com/brand-assets, https://shopify.dev/docs/apps/design/visual-design

## Campaigns

### Shopify Editions (2026)

Shopify's twice-yearly release of product updates, each named and given its own cover art; the homepage nav carries a "Fall '26 Edition" pill and the Products menu promises 150+ updates twice a year.

How the system shows: The Editions share image lines up past editions as record sleeves on two white shelves: Exponential, Everywhere, The Renaissance Edition, Horizons, The Boring Edition, Unified, Foundations, Imagine My Business, Built to Last, Connect to Consumer, each in a different art style, with the black Shopping Bag in the corner.
Why it works: A product changelog becomes a collectible series: each edition gets a name and a look, while the bag and the shelf keep it Shopify.
Channels: web (shopify.com/editions), nav pill on shopify.com, social. Source: https://www.shopify.com/editions

### Be the next ... (2026)

The homepage hero: "Be the next" completed by a rotating phrase (household name, solo-preneur, AI all-star, global empire, category creator, store they line up for, big thing) over a looping montage of merchants at work.

How the system shows: Light 96px Inter over full-bleed documentary video, two pills, no overlay box.
Why it works: The merchant is the hero and the headline is about them, so the platform never has to describe itself first.
Channels: homepage hero, video. Source: https://www.shopify.com/

## Applications

| Format | What | Source |
|---|---|---|
| website | shopify.com homepage: dark chapter bands, merchant storefronts and product UI, white pills. | https://www.shopify.com/ |
| brand assets page | Logo downloads with clear space, minimum size and the do-not list. | https://www.shopify.com/brand-assets |
| product UI | Apps inside the Shopify admin follow Polaris and the app design guidelines for color roles, type hierarchy, icons and voice. | https://shopify.dev/docs/apps/design/visual-design |
| release site | Shopify Editions: a named, twice-yearly product release with its own cover art. | https://www.shopify.com/editions |

## By format

How our engine applies Shopify's system to each format. This is our recipe built from their rules and homepage, not something Shopify publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 3 | Dark #02090A page, 72px transparent nav over a full-bleed video or photo hero with a 96px light two-line headline and a white pill plus outline pill; chapters on dark hues opened by 48px-rounded band tops; 1260px content box; black footer with four link columns | which chapters follow the hero and which merchants appear |
| Product UI (in-admin app) | 1 | Polaris components, neutral text, color only for status, grade 7 copy | a light touch of brand in illustration |
| Deck | 3 | Dark slides, light Inter headlines, merchant photos, mint only for numbers | chapter hue per section |
| Email | 2 | One white pill CTA, sentence-case headline, merchant proof | hero image |
| Error message | 0 | Plain words: what happened and how to fix it | none |

## Checks before anything ships

- **Logo hidden**: Cover the logo. It should still read as Shopify: a near-black page, a huge light Inter headline, a white pill, and real merchants as the only color.
- **Green check**: Is Shopify green anywhere outside the logo? Take it out.
- **Swap test**: Swap in another platform's logo. If the merchant stories and two-beat headlines still feel at home, the copy is too generic: name a merchant or a number.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Shopify's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Shopify publishes no marketing color palette with hex values; the logo greens come from the official logo SVG files, everything else is observed on shopify.com
- polaris.shopify.com now redirects to shopify.dev; Polaris design tokens (color, type, space) were not readable as published values and are not included
- Shopify-Inter's licence is not published; Inter is the open stand-in
- A mission or purpose statement was not found on shopify.com/about on 2026-10-29: not published here
- Breakpoints were not measured; tokens.css uses its 600px default
- Motion durations for the hero phrase rotation and marquees were not measured (animation only)
- The hero video, chat card and Sidekick cards are videos; the book supplies stills taken from the video files
- Shopify's own boilerplate was not checked; the one here is our paraphrase
- Focus styles were not measured
- Composite visuals (Show up cards, Grow card, checkout block, developer card) are assembled from many layers on shopify.com; the book supplies them as screenshots of the live elements in their reduced-motion state, not as source files
- The Editions badge in the nav pill is a blue-violet bag; its file and hex were not captured

Logos and reference images belong to Shopify. Look at them on Shopify's own pages; don't reuse them.