What typeface does Shop use, and what should I use as a substitute?

Shop runs GT Standard across every tier of the captured marketing surface — a custom Shopify-licensed family ordered as GT Standard Regular for body, GT Standard Medium for labels, and GT Standard Semibold for headings. The hierarchy is unusually tight: 12px / 16px for footer and metadata, 14px / 18px for body and product labels, 20px / 22px for the department headings at the top of each storefront row. Every weight is rendered at CSS weight 400 even when the file name carries the Semibold label, because the system uses font-family swaps rather than weight numbers. The closest open-source substitute is Inter at 95% line-height, or General Sans for a tighter feel; both transfer the -0.2px to -1px letter-spacing rhythm cleanly.

Why is the homepage a grid of merchant cards instead of a hero?

Shop is an aggregator over the entire Shopify merchant base, and its product is discovery rather than a single value proposition. A traditional SaaS hero would force the platform to speak for thousands of independent brands; the media-grid approach lets each merchant carry its own typography, color, and product imagery inside a 20px-rounded tile, and lets the user scan dozens of stores in the first viewport. The grid is organized by department (Women, Men, Beauty, Home, Baby & Toddler, Personal Care, Coastal Brands) with each row holding four merchant tiles plus a small product-thumbnail strip beneath, and a paginating chevron on the right. The platform chrome — the search bar, the wordmark, the department headings — stays out of the way.

What corner-radius scale does Shop use?

The radius scale is generous-soft, anchored on 20px and 28px. The captured page contains 231 occurrences of 20px rounding on merchant tiles, search-bar inputs, category chips, and product thumbnails; 136 of 28px on the larger storefront cards and the avatar carousel; 39 of effectively-infinite (rendered as 1e+07px, equivalent to a full circle) on the merchant avatars at the top of the hero. A 9999px pill renders the search bar and the small category pill chips, 16px and 32px serve as occasional outliers, and there is no 4-8px tight tier anywhere. The scale matches the Shop Pay checkout button radius and reinforces the soft, tappable feel of a mobile-first consumer surface.

Can I use this DESIGN.md to build my own marketplace marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Shop's specific moves: a media-grid of merchant or product cards instead of an illustrated hero, a single-voltage wordmark in a saturated brand color held as the only chromatic element, GT Standard-equivalent typography at three sizes with no display weight above 400, and 20-28px corner radii on every surface. You can also reference values directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the storefront-as-hero move only works if your product is itself an aggregator of visually-rich third-party brands. For a single-product site this would feel like a shop directory rather than a marketing surface.

Shop Design System

Shop's consumer marketing site as a DESIGN.md file.

About Shop DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source shop.app

E-commerce & Retail
Mobile Platforms

Shop's marketing site does something almost no other consumer-commerce brand attempts at the top of the funnel: it skips the hero illustration entirely. The page opens on a centered wordmark spelling "shop" in the electric Shop Pay purple, a pill-shaped white search bar with five category chips beneath it (Pet, Beauty, Home, Outdoor, Sports), and an avatar carousel of merchant logos hovering above the wordmark like a navigation rail of brands you might recognize. Below that, the page is a media-grid of merchant storefront cards organized by department — Women, Men, Beauty, Home, Baby & Toddler, Beauty again, Personal Care, Coastal Brands — each card a photo collage of the merchant's actual product imagery. The chrome is so quiet it disappears.

Where Amazon paints its hero with promotional banners and Etsy leans on warm coral and editorial photography, Shop trusts the merchants to do every chromatic job above the fold. The DESIGN.md file packages the move into a machine-readable spec: 16 color tokens drawn from the captured render, of which exactly one is a brand voltage — Shop Pay purple — wired into the CSS as --bg-fill-brand, --text-brand, --border-brand, --border-input-brand-focus, and --bg-brand. Body type is GT Standard across the tier — a custom Shopify family that handles labels, search-bar text, and the department headings ("Women", "Men", "Beauty") at 20px / weight 400 with -1px tracking. There is no display weight above 400 and no size above 20px; the storefront photography is the loudest visual on the page.

Feed this file to Claude or Cursor and it will reproduce Shop's specific moves: a media-grid of merchant cards instead of a hero illustration, a single-voltage wordmark in electric purple held as the only brand-coded element, GT Standard at three sizes, 20-28px corner radii that match Shop Pay's pill checkout button, and true-white / true-black contrast. The one move worth borrowing only if you are aggregating someone else's content: the willingness to let the merchants out-color the brand. Most consumer-commerce sites need a stronger chromatic frame than this; Shop earns its quiet by sitting downstream of the entire Shopify merchant ecosystem.

What makes it distinct

Storefront-as-herothe page is a department-sorted media grid of merchant cards, not a SaaS hero with stock illustrations
Single Shop Pay voltageelectric purple #5433eb appears as the wordmark and search-bar focus ring; merchants supply every other color
GT Standard, three sizes12 / 14 / 20px in Medium and Semibold, no display tier above 20px
Soft 20px default radiusmerchant tiles, search bar, category chips all share the same generous corner
Pure white over true blackink is rgba(0,0,0,1) and the canvas is #ffffff, with no cream or off-white softening

Live at shop.app

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

shop.app

Explore Shop

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.