{ "schema": "brand-kit@2", "palette": { "paper": "#02090A", "surface": "#061A1C", "ink": "#FFFFFF", "ink_muted": "#9797A2", "accent": "#FFFFFF", "on_accent": "#000000", "accent_secondary": "#36F4A4", "night": "#000000", "on_night": "#FFFFFF", "extras": [ { "name": "shopify-green", "hex": "#95BF47", "role": "The Shopping Bag body in the full-color logo (#95BF47 in the bag file, #95BF46 in the primary lockup file). Logo only: the homepage never uses it as a UI color", "prov": "published", "source": "https://www.shopify.com/brand-assets" }, { "name": "shopify-dark-green", "hex": "#5E8E3E", "role": "The Shopping Bag shadow side in the full-color logo (#5F8E3E in the primary lockup file). Logo only", "prov": "published", "source": "https://www.shopify.com/brand-assets" }, { "name": "page-black", "hex": "#02090A", "role": "Ground of the hero, the statement band, the Show up / Grow / stories bands (bg-section-dark-bg)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "footer-black", "hex": "#000000", "role": "Footer ground and the CTA text color", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "teal-card", "hex": "#061A1C", "role": "Agentic chat card and Grow around the world card fill", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "teal-card-glow", "hex": "#0D3A2D", "role": "End stop of the chat card gradient (290.7deg, #061A1C 58.79% to #0D3A2D 100%)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "card-hairline", "hex": "#1E2C31", "role": "1px border on the Grow around the world card", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "glow-teal", "hex": "#157076", "role": "Radial glows behind the Grow card visual (radial-gradient #157076 to transparent 65%)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "statement-dim", "hex": "#71717A", "role": "The not-yet-highlighted phrases of the Sell everywhere statement", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "muted", "hex": "#9797A2", "role": "Card body and story body text on #02090A and in the Sidekick cards", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "muted-teal", "hex": "#9DABAD", "role": "Body text inside the teal cards (chat, Grow)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "muted-lavender", "hex": "#BDBDCA", "role": "Body text in the apps and developer bands (navy grounds)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "muted-green", "hex": "#99B3AD", "role": "Body text and links on the deep green bands (checkout, Rock steady, Capital)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "footer-link", "hex": "#A1A1AA", "role": "Footer links and nav menu descriptions; hover goes #FFFFFF", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "locale-text", "hex": "#E0E0E0", "role": "The USA | English selector in the footer", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "hover-grey", "hex": "#D4D4D8", "role": "Hover fill of white pills and hover ring of outline pills", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "mint", "hex": "#36F4A4", "role": "Mono stat labels, step numbers 01-03, stat chip captions, the checkout quote rule and nav menu eyebrows", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "sidekick-purple", "hex": "#2C007F", "role": "Top stop of the Sidekick band gradient (linear-gradient in oklab, #2C007F 42.49% to #000A1D 100%)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "navy", "hex": "#000A1D", "role": "Bottom stop of the Sidekick gradient", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "apps-navy", "hex": "#000A1E", "role": "Ground of the apps and developer bands", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "sidekick-card", "hex": "#020A08", "role": "The two Sidekick cards", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "dev-card", "hex": "#010624", "role": "The developer card (radius 16)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "dev-blue-glow", "hex": "#1260FF", "role": "Radial glows in the developer card at 35% opacity", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "terminal", "hex": "#060607", "role": "Terminal window bodies in the developer card", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "deep-green", "hex": "#041E18", "role": "Ground of the checkout, Rock steady and Capital bands (rounded 48px top at the start)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "green-hairline", "hex": "#11352D", "role": "Top rule over the checkout stat columns; border of the stat chips", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "quote-card", "hex": "#072720", "role": "Shopify Capital quote card fill", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "quote-border", "hex": "#133B32", "role": "Shopify Capital quote card 1px border", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "chip-black", "hex": "#101010", "role": "Rock steady stat chips at 70% opacity", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "build-grey", "hex": "#3F3F4B", "role": "Radial highlight in the Build fast band at 50% opacity over black", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "footer-rule", "hex": "#121C1E", "role": "1px rule above the footer legal row", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "gradient-teal", "hex": "#5FD5B6", "role": "Start of the teal-to-violet text gradient the statement headline animates through (animation only)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "gradient-violet", "hex": "#865CFF", "role": "End of that gradient (animation only)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "graphite-base", "hex": "#09090A", "role": "Base layer of the Build fast band under its graphite radial highlights", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" } ] }, "typography": { "display": { "family": "Inter", "weight": 330, "tracking": -0.03, "line_height": 1.08, "fallback_stack": "system-ui, -apple-system, \"Helvetica Neue\", Arial, sans-serif", "google_fonts": "Inter:opsz,wght@14..32,100..900", "real": "Shopify-Inter (Shopify's own build of Inter, variable 100-900, served from cdn.shopify.com)", "stand_in": true }, "body": { "family": "Inter", "weight": 400, "line_height": 1.4, "scale": 1, "fallback_stack": "system-ui, -apple-system, \"Helvetica Neue\", Arial, sans-serif", "google_fonts": "Inter:opsz,wght@14..32,100..900", "real": "Shopify-Inter", "stand_in": true }, "mono": { "family": "JetBrains Mono", "weight": 400, "fallback_stack": "ui-monospace, SFMono-Regular, Menlo, monospace", "google_fonts": "JetBrains+Mono:wght@400", "real": "ui-monospace (the reader's system mono: SF Mono on Apple devices)", "stand_in": true }, "calibration": "shopify.com loads one face, Shopify-Inter, as a variable font (weight 100-900) from cdn.shopify.com with font-display optional, and uses fractional weights: 300 for the hero, 330 for headlines, 400-420 for body, 450 for card titles, 550 for buttons. Calibrated on 2026-10-29 by rendering the same lines in the real file and in open candidates (DOM width, then ink per px of width, then x-height). \"Be the next household name\" 96px w300 tracking -1.92px: real 1117.6px, ink 17.97/px; Inter (opsz auto) 300: 1114.6px (-0.3%), ink 17.98 (+0.1%), same x-height 49.5. \"Sell everywhere people shop.\" 64px w330: real 767.6px; Inter 330: 763.2px (-0.6%), ink +0.1%. \"Show up everywhere. Without going anywhere.\" 56px w330: Inter 330 -0.1% width, 0.0% ink. \"Dream big and build fast on Shopify.\" 24px w400: real 375.2px; Inter 400 373.9px (-0.3%), ink -0.2%. Card title 20px w450: -1.2% width, -0.6% ink. Button 18px w550: -0.4% width, -1.8% ink (Inter 570 matches ink exactly). Other candidates miss by 3-11% in width at the same ink (Geist +5.5%, Hanken Grotesk +3%, Public Sans +7.7%, Inter with opsz pinned to 14 +9.6%). So: Shopify-Inter = Inter variable with the optical-size axis left on auto, at the same CSS weights. Keep font-optical-sizing auto; pinning opsz 14 makes headlines 10% wide. Mono labels use ui-monospace (system); JetBrains Mono 400 stands in." }, "style": { "button_shape": "pill (9999px) everywhere; cards 12-16px; band tops 48px", "motion": "functional 150ms ease on controls; brand motion lives in video, the rotating hero phrase and scroll scrubs" }, "voice": { "tone": [ "real", "proactive", "dynamic", "guiding" ], "notes": [ "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": [ { "kind": "guidance", "text": "Aim for a US grade 7 reading level; short sentences, headings and bullets", "prov": "published", "source": "https://shopify.dev/docs/apps/design/content" }, { "kind": "guidance", "text": "Start calls to action with a strong verb, in active voice", "prov": "published", "source": "https://shopify.dev/docs/apps/design/content" }, { "kind": "guidance", "text": "Use one term for one concept; no synonyms for key actions", "prov": "published", "source": "https://shopify.dev/docs/apps/design/content" }, { "kind": "guidance", "text": "Avoid words that generalize success, such as 'every', 'all' and 'most'", "prov": "published", "source": "https://shopify.dev/docs/apps/design/content/voice-and-tone" }, { "kind": "guidance", "text": "Don't oversell or overpromise, and don't assume the merchant is celebrating", "prov": "published", "source": "https://shopify.dev/docs/apps/design/content/voice-and-tone" }, { "kind": "guidance", "text": "Avoid idioms and phrases with indirect or ironic meanings: they mistranslate", "prov": "published", "source": "https://shopify.dev/docs/apps/design/content" }, { "kind": "headline_case", "value": "sentence" } ], "approved": { "words": [ "merchant", "commerce", "sell", "build", "grow", "store", "checkout" ] }, "banned": [ "bad request", "forbidden", "fatal", "invalid", "You successfully...", "Congrats!" ] }, "spec": { "source": "https://www.shopify.com/", "how": "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", "provenance": "observed", "layout": { "container_max": 1260, "page_margin": { "desktop": 90, "phone": 16, "note": "content box 1260px at 1440 (x 90-1350); the same 90px gutter carries the nav, every band and the footer" }, "nav_height": 72, "section_padding": { "desktop": 128, "phone": 64, "note": "bands run 64-128px top and bottom (hero top 72, stories 64/128, Sidekick 100, checkout 128/80, Build fast 80/128); headline to content is 64px (h2 bottom margin 64 desktop, 40 phone)" }, "columns": 12, "columns_phone": 4, "gutter": 16, "gutter_phone": 16, "card_gap": 16, "three_up": { "width": 409, "gutter": 16, "xs": [ 90, 515, 941 ] }, "show_up_cards": { "widths": [ 303, 606, 303 ], "gutter": 24, "xs": [ 90, 417, 1047 ], "media_height": 440 }, "split": { "text_x": 90, "media_x": 720, "note": "text in the left half (max 630), media from x 720 in the right half" }, "band_radius": 48, "card_radius": 12, "feature_card_radius": 16, "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, "type": [ { "role": "Hero display (h1)", "face": "display", "size": { "desktop": 96, "phone": 56 }, "line_height": 1.08, "tracking_px": -1.92, "weight": 300, "prov": "observed", "note": "96/103.68 weight 300, tracking -0.02em desktop; 56/60.48 weight 330, tracking -0.56px phone. White, two lines, sentence case" }, { "role": "Statement headline", "face": "display", "size": { "desktop": 56, "phone": 36 }, "line_height": 1, "tracking_px": -1.68, "weight": 330, "prov": "observed", "note": "56/56 desktop, 36/36 phone. Four phrases; the highlighted one #FFFFFF, the rest #71717A" }, { "role": "Section headline (h2/h3)", "face": "display", "size": { "desktop": 56, "phone": 36 }, "line_height": 1.08, "tracking_px": -1.68, "weight": 330, "prov": "observed", "note": "56/60.48, tracking -0.03em desktop; 36/40.32, tracking -0.72px phone" }, { "role": "Closing headline (centered h2)", "face": "display", "size": { "desktop": 64, "phone": 44 }, "line_height": 1.08, "tracking_px": -1.28, "weight": 330, "prov": "observed", "note": "64/69.12 desktop, 44/47.52 tracking -0.22px phone. \"There's no better place...\" and \"Build fast on Shopify\"" }, { "role": "Feature headline (h3)", "face": "display", "size": { "desktop": 44, "phone": 30 }, "line_height": 1.1, "tracking_px": -0.44, "weight": 330, "prov": "observed", "note": "44/48.4 desktop, 30/34.2 phone. Checkout, Rock steady, Capital, and the 01-03 step titles" }, { "role": "Stat number", "face": "display", "size": { "desktop": 96, "phone": 56 }, "line_height": 0.96, "tracking_px": 0, "weight": 300, "prov": "observed", "note": "96/92.16 w300 desktop (56/60.48 w330 phone); the unit (%, M+) is a superscript 64px w330 (44px phone) top-aligned" }, { "role": "Pull quote", "face": "display", "size": { "desktop": 34, "phone": 26 }, "line_height": 1.14, "tracking_px": 0, "weight": 330, "prov": "observed", "note": "34/38.76 desktop, 26/29.64 phone, hanging open quote" }, { "role": "Hero lead", "face": "body", "size": { "desktop": 24, "phone": 18 }, "line_height": 1.3, "tracking_px": -0.48, "weight": 400, "prov": "observed", "note": "24/31.2 w400 tracking -0.02em desktop; 18/23.4 w420 tracking -0.36px phone" }, { "role": "Card title (h4)", "face": "body", "size": { "desktop": 20, "phone": 16 }, "line_height": 1.3, "tracking_px": 0, "weight": 450, "prov": "observed", "note": "20/26 desktop, 16/20.8 phone, white" }, { "role": "Body large", "face": "body", "size": { "desktop": 20, "phone": 18 }, "line_height": 1.4, "tracking_px": 0, "weight": 400, "prov": "observed", "note": "20/28 under the apps and developer headlines, #BDBDCA" }, { "role": "Body", "face": "body", "size": { "desktop": 18, "phone": 16 }, "line_height": 1.4, "tracking_px": 0, "weight": 400, "prov": "observed", "note": "18/25.2 w400 desktop; 16/22.4 w420 tracking -0.096px phone. Muted per ground (#9797A2, #9DABAD, #99B3AD)" }, { "role": "Body small", "face": "body", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.37, "tracking_px": 0, "weight": 420, "prov": "observed", "note": "14/19.2 w420, the three Show up card descriptions, #9797A2" }, { "role": "Button", "face": "body", "size": { "desktop": 18, "phone": 16 }, "line_height": 1.56, "tracking_px": 0, "weight": 550, "prov": "observed", "note": "18/28 w550 in page pills (56px tall); 16/24 w550 in the nav and on phones (44px tall)" }, { "role": "Nav link", "face": "body", "size": { "desktop": 16, "phone": 24 }, "line_height": 1.5, "tracking_px": 0, "weight": 420, "prov": "observed", "note": "16/24 w420 white desktop; menu items 24/32 w330 in the phone menu" }, { "role": "Footer heading", "face": "body", "size": { "desktop": 20, "phone": 20 }, "line_height": 1, "tracking_px": 0, "weight": 450, "prov": "observed", "note": "20/20 white" }, { "role": "Footer link", "face": "body", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "note": "16/24 #A1A1AA, 40px pitch" }, { "role": "Mono label", "face": "mono", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.33, "tracking_px": 0, "weight": 400, "prov": "observed", "note": "12/16 uppercase #36F4A4 (stat labels); 12/18 sentence case in the stat chips" }, { "role": "Step number", "face": "body", "size": { "desktop": 24, "phone": 18 }, "line_height": 1.3, "tracking_px": 0, "weight": 400, "prov": "observed", "note": "01 / 02 / 03 in #36F4A4, 24/31.2 desktop, 18/23.4 phone" } ], "components": { "button_primary": { "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", "states": { "hover": { "css": { "background-color": "#D4D4D8" }, "prov": "observed", "source": "https://www.shopify.com/" } }, "transition": "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)", "prov": "observed" }, "button_outline": { "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", "states": { "hover": { "css": { "box-shadow": "inset 0 0 0 2px #D4D4D8" }, "prov": "observed", "source": "https://www.shopify.com/" } }, "prov": "observed" }, "button_nav": { "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)", "prov": "observed" }, "nav_edition_pill": { "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", "prov": "observed" }, "text_link": { "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)", "prov": "observed" }, "feature_card": { "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", "prov": "observed" }, "media_card": { "radius": 12, "media_radius": 8, "use": "Show up cards and story cards: media on top, 20/26 title, muted body; no fill, no border", "prov": "observed" }, "stat_chip": { "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", "prov": "observed" }, "quote_card": { "fill": "#072720", "border": "1px #133B32", "radius": 8, "width": 473, "use": "pull quote overlapping a merchant photo", "prov": "observed" }, "dev_chip": { "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", "prov": "observed" } }, "signature": [ { "id": "dark-commerce", "name": "A near-black page with one white pill", "where": "every band from the hero to the footer", "spec": "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", "dont": "No white bands, no colored buttons, no green from the logo used as a UI color" }, { "id": "light-giant-type", "name": "Light, giant, tightly tracked headlines", "where": "hero, section heads, stats", "spec": "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: 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", "dont": "No bold or semibold headlines, no all caps, no title case" }, { "id": "rounded-band-edges", "name": "Bands that slide over each other with 48px rounded tops", "where": "the statement band over the hero, Sidekick, the deep green run, Build fast", "spec": "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", "dont": "No square band joins at chapter changes, no rounded bottom corners" }, { "id": "ground-per-chapter", "name": "Each chapter gets its own dark hue", "where": "the page as a whole", "spec": "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)", "dont": "No bright fills, no light tints" }, { "id": "mint-data", "name": "Mint for data, mono for labels", "where": "checkout stats, stat chips, step numbers", "spec": "#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", "dont": "No mint headlines, buttons or large fills" } ], "bands": [ { "label": "Hero: Be the next ...", "ground": "video (hero-poster.png at rest)", "content": "hero", "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", "anatomy": [ "Nav overlays the top 72px, transparent", "Two pills: white Start for free, outline Why we build Shopify with play icon" ] }, { "label": "Statement + storefront carousel", "ground": "#02090A", "content": "statement, store cards", "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", "anatomy": [ "Four phrases, one white, three #71717A", "Cards 498 / 216 / 498, 381 tall, 5px radius, 16px gaps" ] }, { "label": "Agentic chat card", "ground": "#02090A", "content": "feature card", "desktop": "band y 1481-2134; card y 1545-2070, 1260x525, radius 16", "phone": "band y 1104-1797; card y 1144-1757", "anatomy": [ "Teal gradient card, text left, media right 630 wide" ] }, { "label": "Show up everywhere", "ground": "#02090A", "content": "three unequal cards", "desktop": "band y 2133-3022; headline y 2197, cards y 2382-2958 (303/606/303)", "phone": "band y 1796-3030; cards stacked, media 358x224", "anatomy": [ "Media 440 tall, radius 8; titles 20/26; body 14/19.2 #9797A2" ] }, { "label": "Grow around the world", "ground": "#02090A", "content": "bordered feature card", "desktop": "band y 3021-3845; headline y 3085, card y 3186-3782", "phone": "band y 3029-3950; card y 3141-3910", "anatomy": [ "1px #1E2C31 border, radius 12, flags + products + map" ] }, { "label": "Merchant stories", "ground": "#02090A", "content": "three story cards + outline pill", "desktop": "band y 3845-4772; y 3845-4773; photos 409x300 at y 4094", "phone": "band y 3949-4664; swipe row of 269-wide cards", "anatomy": [ "Pick a plan that fits, outline pill, centered" ] }, { "label": "Sidekick", "ground": "gradient #2C007F to #000A1D", "content": "two video cards", "desktop": "band y 4771-5629; y 4771-5629, 48px rounded top; cards 824 + 412 at y 5013", "phone": "band y 4662-5666; cards stacked", "anatomy": [ "Cards #020A08 radius 12" ] }, { "label": "Apps", "ground": "#000A1E", "content": "text + icon wall", "desktop": "band y 5628-6253; y 5630-6175", "phone": "band y 5665-6214; y 5666-6151", "anatomy": [ "Icon wall full width under a diagonal fade" ] }, { "label": "Developers", "ground": "#000A1E", "content": "headline + dev card", "desktop": "band y 6252-7242; y 6254-7117; card 1260x622 #010624", "phone": "band y 6213-6862; card 358x315", "anatomy": [ "Three terminal windows, three chips, two round buttons" ] }, { "label": "Chapter title", "ground": "#041E18", "content": "centered 64px headline", "desktop": "band y 7241-7462; y 7243-7464, 48px rounded top", "phone": "band y 6862-7056; y 6837-7031", "anatomy": [ "No copy beyond the headline" ] }, { "label": "Checkout stats", "ground": "#041E18", "content": "stats + checkout visual", "desktop": "band y 7461-8122; y 7464-8125", "phone": "band y 7054-7864; y 7062-7842", "anatomy": [ "96px light numerals with mint mono labels", "2px mint rule before the claim" ] }, { "label": "Rock steady", "ground": "#041E18", "content": "starfield + chips", "desktop": "band y 8121-8899; y 8123-8901", "phone": "band y 7863-8474; y 7906-8427", "anatomy": [ "comp/globe-rest.png 900x820 at x 0, y 8132 (globe, stars and chips in the image), text block at x 930" ] }, { "label": "Shopify Capital", "ground": "#041E18", "content": "photo + quote + facts", "desktop": "band y 8898-9622; y 8900-9624", "phone": "band y 8473-9261; y 8490-9150", "anatomy": [ "Quote card overlaps the photo", "Facts behind 2px mint vertical rules" ] }, { "label": "Build fast on Shopify", "ground": "graphite radial on black", "content": "steps + photos + white pill", "desktop": "band y 9621-10402; y 9623-10404, 48px rounded top", "phone": "band y 9260-9783; y 9213-9737", "anatomy": [ "01-03 in mint, 44px titles, white rules", "Take your shot white pill" ] }, { "label": "Footer", "ground": "#000000", "content": "links, legal, socials", "desktop": "band y 10402-10960; y 10403-10960", "phone": "band y 9783-11486; y 9900-11486", "anatomy": [ "Four columns at x 347 / 604 / 860 / 1117", "Seven white social circles" ] } ], "responsive": { "measured_at": [ 390, 1440 ], "source": "https://www.shopify.com/", "date": "2026-10-29", "prov": "observed", "rows": [ { "what": "hero headline", "values": { "390": "56px / 60.48 w330", "1440": "96px / 103.68 w300" } }, { "what": "section headline", "values": { "390": "36px / 40.32", "1440": "56px / 60.48" } }, { "what": "side margin", "values": { "390": "16px", "1440": "90px" } }, { "what": "pills", "values": { "390": "full width 358x44, 16px text", "1440": "content width, 56px tall, 18px text" } }, { "what": "three-up cards", "values": { "390": "stacked (Show up) or a swipe row (stories)", "1440": "three columns" } }, { "what": "nav", "values": { "390": "logo, underlined Start for free, menu icon", "1440": "logo, 4 links, Editions pill, Log in, white pill" } } ] }, "motion": [ { "name": "control", "easing": "cubic-bezier(0.4, 0, 0.2, 1)", "duration_ms": 150, "use": "pill hover: white fill to #D4D4D8, outline ring to #D4D4D8", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "link", "easing": "cubic-bezier(0.4, 0, 0.2, 1)", "duration_ms": 200, "use": "footer and body links fade to #FFFFFF", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "hero-word", "use": "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)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "statement-scrub", "use": "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)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "name": "marquee", "use": "the store carousel and the app-icon wall drift left continuously; build them static (animation only)", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" } ], "icons": { "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", "sizes": [ { "name": "s", "px": 16 }, { "name": "m", "px": 20 }, { "name": "l", "px": 28 } ], "prov": "observed", "source": "https://www.shopify.com/" }, "page": { "source": "https://www.shopify.com/", "date": "2026-10-29", "prov": "observed", "nav": { "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\" / \"\" 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
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: 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.\"" ] }, "sections": [ { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, { "name": "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" }, "dark_ground": { "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" } } }, "system": { "fixed": [ "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" ], "flex": "The chapter ground hue (teal, violet, navy, deep green, graphite) and which merchants are shown", "traits": [ { "is": "Real", "not": "too tough or overly familiar", "text": "Business casual; plain-spoken, upfront and honest (paraphrase).", "source": "https://shopify.dev/docs/apps/design/content/voice-and-tone", "prov": "published" }, { "is": "Proactive", "not": "needy or pushy", "text": "Sincere encouragement and practical advice (paraphrase).", "source": "https://shopify.dev/docs/apps/design/content/voice-and-tone", "prov": "published" }, { "is": "Dynamic", "not": "scattered or impulsive", "text": "Language that supports action, movement and progress (paraphrase).", "source": "https://shopify.dev/docs/apps/design/content/voice-and-tone", "prov": "published" }, { "is": "Guiding", "not": "handholding or prescriptive", "text": "Teach the why and how; never talk down (paraphrase).", "source": "https://shopify.dev/docs/apps/design/content/voice-and-tone", "prov": "published" } ] }, "proportion": { "note": "Observed share of the homepage area at 1440, 2026-10-29: dark grounds and cards, imagery, white type and pills. Shopify publishes no ratio", "source": "https://www.shopify.com/", "parts": [ { "name": "Dark grounds", "hex": "#02090A", "n": 70 }, { "name": "Merchant imagery", "hex": "#95BF47", "n": 25 }, { "name": "White type and pills", "hex": "#FFFFFF", "n": 5 } ], "prov": "observed" }, "tone_by_state": { "note": "Shopify publishes tone by situation; the levels are our reading of how much personality each allows.", "source": "https://shopify.dev/docs/apps/design/content/voice-and-tone", "states": [ { "state": "Marketing headlines (homepage)", "level": 4 }, { "state": "Announcing new features", "level": 3 }, { "state": "Everyday tasks", "level": 1 }, { "state": "Simple errors", "level": 1 }, { "state": "Serious problems", "level": 0 } ] }, "formats": [ { "format": "Landing page", "level": 3, "must": "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", "flex": "which chapters follow the hero and which merchants appear" }, { "format": "Product UI (in-admin app)", "level": 1, "must": "Polaris components, neutral text, color only for status, grade 7 copy", "flex": "a light touch of brand in illustration" }, { "format": "Deck", "level": 3, "must": "Dark slides, light Inter headlines, merchant photos, mint only for numbers", "flex": "chapter hue per section" }, { "format": "Email", "level": 2, "must": "One white pill CTA, sentence-case headline, merchant proof", "flex": "hero image" }, { "format": "Error message", "level": 0, "must": "Plain words: what happened and how to fix it", "flex": "none" } ], "checks": [ { "name": "Logo hidden", "text": "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." }, { "name": "Green check", "text": "Is Shopify green anywhere outside the logo? Take it out." }, { "name": "Swap test", "text": "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." } ], "examples": [ { "chapter": "voice", "do": { "ground": "paper", "text": "Product saved" }, "do_caption": "A routine task gets a plain confirmation (the guide's own example).", "dont": { "ground": "paper", "text": "Congrats! You set up your single login for Shopify." }, "dont_caption": "Don't assume the merchant is celebrating." }, { "chapter": "voice", "do": { "ground": "paper", "text": "Change the product weight to 0 or more and try again." }, "do_caption": "Say what happened and how to fix it.", "dont": { "ground": "paper", "text": "Invalid request" }, "dont_caption": "Dramatic words for a simple error." }, { "chapter": "color", "do": { "ground": "paper", "text": "Start for free", "button": true }, "do_caption": "The one filled control: a white pill on the dark page.", "dont": { "ground": "paper", "text": "Start for free", "ink": "accent_secondary" }, "dont_caption": "Mint is for numbers and labels, not buttons or headlines." }, { "chapter": "type", "do": { "ground": "paper", "text": "Be the next household name", "font": "display", "weight": 300 }, "do_caption": "Light weight, big size, tight tracking, sentence case.", "dont": { "ground": "paper", "text": "BE THE NEXT HOUSEHOLD NAME", "font": "display", "weight": 700 }, "dont_caption": "Bold caps fight the light, calm system." }, { "chapter": "logo", "do": { "ground": "paper", "text": "Inverted primary logo on a dark ground" }, "do_caption": "White wordmark, full-color bag, white S.", "dont": { "ground": "paper", "text": "Wordmark alone, stretched" }, "dont_caption": "Both are on the published do-not list." } ], "make_it_yours": { "note": "Everything above transfers. These are Shopify's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "positioning": { "statement": { "text": "The world's best commerce platform.", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, "category": { "text": "Commerce platform: online store, point of sale, checkout, payments and apps in one system", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, "audience": { "text": "Anyone from first-time entrepreneurs to enterprise brands", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, "promise": { "text": "Sell everywhere people shop, from one place, as you grow", "prov": "inferred", "why": "From the homepage chapter order: sell everywhere, control everything in one place, grow around the world, entrepreneurs to enterprise." }, "differentiators": [ { "text": "Checkout with Shop Pay, which Shopify says converts up to 50% higher than guest checkout", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" }, { "text": "21,000+ commerce apps in the Shopify App Store", "prov": "observed", "source": "https://www.shopify.com/", "date": "2026-10-29" } ] }, "messaging": { "taglines": [ { "text": "Be the next household name", "where": "homepage hero, one of several rotating endings", "prov": "observed", "source": "https://www.shopify.com/" }, { "text": "Dream big and build fast on Shopify.", "where": "homepage hero lead", "prov": "observed", "source": "https://www.shopify.com/" } ], "boilerplate": { "text": "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.", "prov": "inferred", "why": "Our paraphrase of the homepage chapters; Shopify's own boilerplate was not checked", "paraphrase": true }, "pillars": [ { "name": "Sell everywhere", "claim": "Online and in person, across AI and on social, locally and globally", "proof": [ "p-chat" ], "prov": "observed" }, { "name": "One place", "claim": "Payments, fulfillment and retail run from one command center", "proof": [], "prov": "observed" }, { "name": "Best checkout", "claim": "The world's best-converting checkout", "proof": [ "p-checkout" ], "prov": "observed" }, { "name": "Built for builders", "claim": "Apps, APIs and AI tools to customize everything", "proof": [ "p-apps" ], "prov": "observed" } ], "proof_points": [ { "id": "p-chat", "text": "Agentic Storefronts: shoppers check out right in AI chats", "prov": "observed", "source": "https://www.shopify.com/" }, { "id": "p-checkout", "text": "Shop Pay converts up to 50% higher than guest checkout (footnoted to an April 2023 external study)", "prov": "observed", "source": "https://www.shopify.com/" }, { "id": "p-apps", "text": "21,000+ commerce apps", "prov": "observed", "source": "https://www.shopify.com/" } ], "claim_boundaries": [ { "text": "Outcome claims carry their footnote (the checkout study) or a named merchant", "prov": "observed", "source": "https://www.shopify.com/" }, { "text": "Avoid words that generalize success, such as 'every', 'all' and 'most' (product voice rule)", "prov": "published", "source": "https://shopify.dev/docs/apps/design/content/voice-and-tone" } ] } } } }