Shopifi Inspired Design System

Overview

Shopify's public design language runs two parallel tracks that share typographic DNA and a single button vocabulary, but diverge sharply in canvas polarity. The marketing track lives on {colors.canvas-night} (#000000) — full-bleed merchant photography, giant {typography.display-xxl} headlines in Neue Haas Grotesk Display set at weight 330 (a thin, almost editorial cut), and a single CTA: a white-stroked black pill rendered as button-outline-on-dark. The pages read like a high-end print spread: lots of black, lots of negative space, photography that doesn't compete with text, and one and only one action per band.

The transactional track flips to {colors.canvas-light} (#ffffff) and {colors.canvas-cream} (#fbfbf5 — an off-white that's barely warmer than pure white). Pricing tiers, comparison tables, and signup flows sit on this lighter canvas, with the same pill button system in inverse polarity (a solid black pill with white text, or an aloe {colors.aloe-10} #c1fbd4 pill for the featured "Start free trial" tier). The mint accents {colors.aloe-10} (#c1fbd4) and {colors.pistachio-10} (#d4f9e0) appear exclusively on the light track — never on the cinematic dark hero pages.

Typography splits across three families. Neue Haas Grotesk Display at thin weights 330–500 handles every display, headline, and editorial moment — the brand's identity is that thin display cut. Inter Variable at weights 420–550 handles every UI body, button label, caption, and form field — utility text that doesn't fight the display. ui-monospace appears only in code blocks and rare technical eyebrows. The OpenType ss03 stylistic set is enabled across all three families — a character-level brand signature applied universally.

Key Characteristics:

• Two-canvas system: {colors.canvas-night} (#000000) for cinematic marketing, {colors.canvas-light} (#ffffff) and {colors.canvas-cream} (#fbfbf5) for transactional surfaces — never blended on the same page.
• Pill-shape ({rounded.pill} 9999px) is the only button shape across both tracks; rounded rectangles do not exist for buttons.
• Thin-weight 330 display typography is the signature; {typography.display-xxl} at 96px / weight 330 is the brand's loudest visual.
• Aloe {colors.aloe-10} (#c1fbd4) and pistachio {colors.pistachio-10} (#d4f9e0) are reserved for the light track — they signal commerce, growth, transactional success.
• Photography is full-bleed, edge-to-edge, never inset in cards on the cinematic track; merchants and storefront imagery do the heavy lifting that gradients and illustrations would do elsewhere.
• The OpenType ss03 stylistic set is enabled across every text role — a character-level unifier that tracks across both canvas polarities.
• Tight letter-spacing on display sizes (2.4px positive tracking on 96px display) gives the thin weight extra optical air.

Known Gaps

• Hover-state colors: the press state lifts to {colors.shade-70} (#3f3f46), but hover styling between idle and press is more subtle and not reliably extracted.
• Loading states / skeleton screens: not captured on the surveyed surfaces.
• Polaris admin system: Shopify's in-product merchant admin uses a separate design system (Polaris) with its own tokens and component library; not represented here.
• Dashboard chart palette: analytics widgets inside the merchant dashboard use chart colors not visible on the marketing or pricing pages.
• Form input error states: error styling for the {component.text-input} token (border treatment, helper text color, icon) was not visible on the captured surfaces.
• Motion specifications: the cinematic photography crossfades and pill-button press transitions have timing curves that weren't captured in static extraction.