Sell everywhere
Online and in person, across AI and on social, locally and globally Observed
The system
Fixed, everywhere
- 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
Source: shopify.com
Color, in proportion
Observed share of the homepage area at 1440, 2026-10-29: dark grounds and cards, imagery, white type and pills. Shopify publishes no ratio.
Tone by the reader's state
- Marketing headlines (homepage)
- Announcing new features
- Everyday tasks
- Simple errors
- Serious problems
Shopify publishes tone by situation; the levels are our reading of how much personality each allows.
How loud each format gets
SilentError message
QuietProduct UI (in-admin app)
CalmEmail
WarmLanding pageDeck
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes 3 checks
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.
Strategy
The world's best commerce platform. Observed
One place
Payments, fulfillment and retail run from one command center Observed
Best checkout
The world's best-converting checkout Observed
Built for builders
Apps, APIs and AI tools to customize everything Observed
Be the next household name
Dream big and build fast on Shopify.
Sell everywhere people shop.
Your brand has entered the chat
Full spec
- For Observed
- Anyone from first-time entrepreneurs to enterprise brands
- Promise Our reading
- Sell everywhere people shop, from one place, as you grow
Proof behind each pillar
- Sell everywhere. Agentic Storefronts: shoppers check out right in AI chats
- Best checkout. Shop Pay converts up to 50% higher than guest checkout (footnoted to an April 2023 external study)
- Built for builders. 21,000+ commerce apps
Category. Commerce platform: online store, point of sale, checkout, payments and apps in one system Observed
Why them
- Checkout with Shop Pay, which Shopify says converts up to 50% higher than guest checkout Observed
- 21,000+ commerce apps in the Shopify App Store Observed
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
They never claim
- Outcome claims carry their footnote (the checkout study) or a named merchant Observed
- Avoid words that generalize success, such as 'every', 'all' and 'most' (product voice rule) Published
More real lines
Show up everywhere. Without going anywhere.
Grow around the world
For anyone from entrepreneurs to enterprise
Meet your secret weapon, Sidekick
Customize everything with apps
Hyperdriven by AI. Commerce to the core.
There's no better place for you to build
The world's best-converting checkout
Rock steady. Blazing fast.
Shopify has your back
Build fast on Shopify
Everything new across Shopify. Every six months.
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.
Source: shopify.com
Personality and voice
Realbut not too tough or overly familiarPublished
Proactivebut not needy or pushyPublished
Dynamicbut not scattered or impulsivePublished
Guidingbut not handholding or prescriptivePublished
Product saved
Congrats! You set up your single login for Shopify.
Change the product weight to 0 or more and try again.
Invalid request
Merchants use Shopify to run a business; plain words that respect their time keep trust.
Full spec
- 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
realproactivedynamicguiding
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.
- 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
- 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).
Their words
merchantcommercesellbuildgrowstorecheckout
Never
bad requestforbiddenfatalinvalidYou successfully...Congrats!
Source: shopify.dev/docs/apps/design/content/voice-and-tone
- Don’t oversell or overpromise
- Don’t use dramatic words for simple errors
- Don’t assume the merchant is excited
Source: shopify.dev/docs/apps/design/content/voice-and-toneshopify.dev/docs/apps/design/contentshopify.dev/docs/apps/design/content/grammar-and-mechanics
Logo
Logos shown from Shopify's brand assets page for reference. Shopify and the Shopping Bag are trademarks of Shopify Inc.; their use requires written authorization under its Trademark Usage Guidelines. Not affiliated, and not for download.
Inverted primary logo on a dark ground
Wordmark alone, stretched
The primary logo is The Shopping Bag plus an italic wordmark, in full color wherever possible; the S on the bag is always white.
Full spec
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.
- 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
| 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 |
Source: shopify.com/brand-assets
Color
Start for free
Start for free
Dark, quiet grounds let merchant photography and product UI carry the color; green stays special because it only appears in the logo.
Full spec
- 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
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.
Not published: a marketing palette with hex values (only the logo files carry hex); color proportions.
Source: shopify.com/brand-assetsshopify.dev/docs/apps/design/visual-designshopify.com
Typography
Be the next household name
Be the next household name
BE THE NEXT HOUSEHOLD NAME
Light weights at big sizes read calm and premium on dark grounds; one family keeps a long page coherent.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Shopify-Inter | Every headline, weights 300-330 | Shopify's own build of Inter, served from cdn.shopify.com; its licence is not published (Inter itself is SIL OFL) | Inter Shopify's file is not offered for reuse; open Inter with optical sizing on auto matches it within 0.6% in width and ink at the same weights (see calibration) |
| Shopify-Inter | Body, nav, buttons (weights 400-550) | Shopify's own build of Inter; licence not published | Inter Same file as display; Inter matches within 1.2% width |
| ui-monospace | Stat labels and chips only | the reader's system font | JetBrains Mono System mono varies by device; JetBrains Mono is an open, even-width match for SF Mono |
- 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
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.
Source: shopify.comshopify.dev/docs/apps/design/visual-design
Iconography
Marketing icons are thin white or mint line glyphs at 14-28px (chevrons, play circle, globe, stat icons).
Full spec
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
Source: shopify.comshopify.dev/docs/apps/design/visual-design
Illustration
The homepage has no illustration: product UI, app icons and photos fill every visual slot.
Full spec
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.
Source: shopify.comshopify.dev/docs/apps/design/visual-design
Photography
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.
Full spec
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
Source: shopify.com
Motion
pill hover: white fill to #D4D4D8, outline ring to #D4D4D8
footer and body links fade to #FFFFFF
Controls change in 150ms (cubic-bezier 0.4, 0, 0.2, 1).
Full spec
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.
Source: shopify.com
Interface & layout
The page, band by band
Hero: Be the next ... Primary action
Statement + storefront carousel
Agentic chat card
Show up everywhere
Grow around the world
Merchant stories
Sidekick
Apps
Developers
Chapter title
Checkout stats
Rock steady
Shopify Capital
Build fast on Shopify
Buttons
Signature moves
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.
A near-black page with one white pill · every band from the hero to the footer
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.
Light, giant, tightly tracked headlines · hero, section heads, stats
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.
Bands that slide over each other with 48px rounded tops · the statement band over the hero, Sidekick, the deep green run, Build fast
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).
Each chapter gets its own dark hue · the page as a whole
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.
Mint for data, mono for labels · checkout stats, stat chips, step numbers
Specimens use sample copy, not Shopify’s.
Full spec
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.
Measured from shopify.com's 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.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 90px | 16px |
| Section padding | 128px | 64px |
| Card gap | 16px | 16px |
| Navigation | 72px | 72px |
Type, at size
Hero display (h1)
Shopify-Inter · 96px (phone 56) · line 1.08 · tracking -1.92px · weight 300
Statement headline
Shopify-Inter · 56px (phone 36) · line 1 · tracking -1.68px · weight 330
Section headline (h2/h3)
Shopify-Inter · 56px (phone 36) · line 1.08 · tracking -1.68px · weight 330
Closing headline (centered h2)
Shopify-Inter · 64px (phone 44) · line 1.08 · tracking -1.28px · weight 330
Feature headline (h3)
Shopify-Inter · 44px (phone 30) · line 1.1 · tracking -0.44px · weight 330
Stat number
Shopify-Inter · 96px (phone 56) · line 0.96 · weight 300
Pull quote
Shopify-Inter · 34px (phone 26) · line 1.14 · weight 330
Hero lead
Shopify-Inter · 24px (phone 18) · line 1.3 · tracking -0.48px · weight 400
Card title (h4)
Shopify-Inter · 20px (phone 16) · line 1.3 · weight 450
Body large
Shopify-Inter · 20px (phone 18) · line 1.4 · weight 400
Body
Shopify-Inter · 18px (phone 16) · line 1.4 · weight 400
Body small
Shopify-Inter · 14px · line 1.37 · weight 420
Button
Shopify-Inter · 18px (phone 16) · line 1.56 · weight 550
Nav link
Shopify-Inter · 16px (phone 24) · line 1.5 · weight 420
Footer heading
Shopify-Inter · 20px · line 1 · weight 450
Footer link
Shopify-Inter · 16px · line 1.5 · weight 400
Mono label
ui-monospace · 12px · line 1.33 · weight 400
Step number
Shopify-Inter · 24px (phone 18) · line 1.3 · weight 400
- Motion
- functional 150ms ease on controls; brand motion lives in video, the rotating hero phrase and scroll scrubs
- Buttons
- pill (9999px) everywhere; cards 12-16px; band tops 48px
Page anatomy
How Shopify’s own landing pages are built, observed on shopify.com, 2026-10-29. The full measurements are in spec.md.
- Navigation
- 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
- Hero
- 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
- Sell everywhere people shop
- A 48px-rounded #02090A band slides over the hero: a four-phrase statement headline and a drifting row of merchant storefront cards
- Your brand has entered the chat
- One full-width teal feature card: AI assistant logos, headline and lead left, a chat-commerce video still right
- Show up everywhere
- 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
- Grow around the world
- 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
- For anyone from entrepreneurs to enterprise
- Two-line headline, three merchant story cards (photo, title, one-line story) and a centered outline pill
- Meet your secret weapon, Sidekick
- A violet-to-navy band with a 48px rounded top: one-line headline, a wide and a narrow video card
- Customize everything with apps
- Headline and lead on the left over a full-width wall of app icons that fades in from the left
- Hyperdriven by AI. Commerce to the core.
- Developer band: headline and lead, then a navy card holding three terminal windows, labeled chips and two round brand buttons
- There's no better place for you to build
- A deep green band with a 48px rounded top and one centered 64px headline
- The world's best-converting checkout
- Headline, two big stats with mono labels, a footnoted claim with a mint rule, and a Shop Pay checkout visual on a green glow
- Rock steady. Blazing fast.
- A starfield on deep green with four floating stat chips on the left and a short text block on the right
- Shopify has your back
- A merchant photo with an overlapping quote card on the left; headline, lead and three funding facts on the right
- Build fast on Shopify
- A graphite band with a 48px rounded top: centered 64px headline, two staggered portrait photos left, three numbered steps and a white pill right
- Footer
- Black footer: a white Shopping Bag top-left, four link columns, a hairline, then locale, legal links and seven social icons
Source: shopify.com
In use
Shopify Editions · 2026
A product changelog becomes a collectible series: each edition gets a name and a look, while the bag and the shelf keep it Shopify. Our reading
Be the next ... · 2026
The merchant is the hero and the headline is about them, so the platform never has to describe itself first. Our reading
Full spec
How our engine applies Shopify's system to each format. This is our recipe built from their rules and homepage, not something Shopify publishes.
- Shopify Editions. 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. shopify.com/editions
- Be the next .... 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. shopify.com
| Format | What they did | Source |
|---|---|---|
| website | shopify.com homepage: dark chapter bands, merchant storefronts and product UI, white pills. | shopify.com |
| brand assets page | Logo downloads with clear space, minimum size and the do-not list. | 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. | shopify.dev/docs/apps/design/visual-design |
| release site | Shopify Editions: a named, twice-yearly product release with its own cover art. | shopify.com/editions |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | 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) | Polaris components, neutral text, color only for status, grade 7 copy | a light touch of brand in illustration | |
| Deck | Dark slides, light Inter headlines, merchant photos, mint only for numbers | chapter hue per section | |
| One white pill CTA, sentence-case headline, merchant proof | hero image | ||
| Error message | Plain words: what happened and how to fix it | none |
Ads
Free trialGoogle, Meta · Feb 2026 – now
shop pay offer aa75jlLinkedIn · Oct 2026
Pos pro yearlyMeta · Sep 2026 – now
Add Shop Pay to your checkout and go live fastLinkedIn · Oct 2026- Campaign walk: Let's talk international sellingad → landing page → Contact sales
- Campaign walk: Start selling with Shopifyad → landing page → Free trial
- Campaign walk: Make The Switch. Save Big.ad → landing page → Free trial
- Campaign walk: Get Shop Pay. No replatforming.ad → landing page → Contact sales
Rules
Do
- 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
- modify or recreate the logo
Source: shopify.com/brand-assetsshopify.dev/docs/apps/design/visual-design
Steal this kit
Your name and logo, Shopify’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Shopify doesn’t publish
- 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
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-29. Not affiliated with Shopify.