shopify
An inspired interpretation of Shopifi's design language — a cinematic commerce platform that runs two parallel design tracks. The marketing-hero and product-narrative pages live on near-black canvases with full-bleed photography of merchants, giant Neue Haas Grotesk display type
colors
#000000 #ffffff typography
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog — body text at reading size.
the quick brown fox jumps over the lazy dog
design.md source
---
version: alpha
name: Shopifi-Inspired-design-analysis
description: An inspired interpretation of Shopifi's design language — a cinematic commerce platform that runs two parallel design tracks. The marketing-hero and product-narrative pages live on near-black canvases with full-bleed photography of merchants, giant Neue Haas Grotesk display type at thin weights, and a single black-pill CTA stroked in white. The transactional pages (pricing, signup, dashboards) flip to a cream-mint canvas with pastel aloe and pistachio greens, the same pill button vocabulary, and Inter for UI body. The two tracks share typographic DNA but diverge sharply in canvas polarity — and that choice is the brand.
colors:
primary: "#000000"
ink: "#000000"
on-primary: "#ffffff"
on-dark: "#ffffff"
canvas-night: "#000000"
canvas-night-elevated: "#0a0a0a"
canvas-light: "#ffffff"
canvas-cream: "#fbfbf5"
surface-elevated-dark: "#1e2c31"
shade-30: "#d4d4d8"
shade-40: "#a1a1aa"
shade-50: "#71717a"
shade-60: "#52525b"
shade-70: "#3f3f46"
hairline-light: "#e4e4e7"
hairline-dark: "#1e2c31"
aloe-10: "#c1fbd4"
pistachio-10: "#d4f9e0"
link-cool-1: "#9dabad"
link-cool-2: "#9797a2"
link-cool-3: "#bdbdca"
link-mint: "#99b3ad"
typography:
display-xxl:
fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"
fontSize: 96px
fontWeight: 330
lineHeight: 1.0
letterSpacing: 2.4px
fontFeature: ss03
display-xl:
fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"
fontSize: 70px
fontWeight: 330
lineHeight: 1.0
letterSpacing: 0
fontFeature: ss03
display-lg:
fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"
fontSize: 55px
fontWeight: 330
lineHeight: 1.16
letterSpacing: 0
fontFeature: ss03
display-md:
fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"
fontSize: 48px
fontWeight: 330
lineHeight: 1.14
letterSpacing: 0
fontFeature: ss03
heading-xl:
fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"
fontSize: 28px
fontWeight: 500
lineHeight: 1.28
letterSpacing: 0.42px
fontFeature: ss03
heading-lg:
fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"
fontSize: 24px
fontWeight: 400
lineHeight: 1.14
letterSpacing: 0.36px
fontFeature: ss03
heading-md:
fontFamily: "NeueHaasGrotesk Display, Helvetica, Arial, sans-serif"
fontSize: 20px
fontWeight: 500
lineHeight: 1.4
letterSpacing: 0.3px
fontFeature: ss03
heading-sm:
… components
display headline
body copy from shopify tokens — the default reading size for paragraphs and ui descriptions.
feature headline
a sample card surface with heading and body copy styled from component tokens.
what is in this design system?
colors, typography, spacing, and component patterns sourced from publicly visible brand tokens.
const theme = {
primary: "#000000",
font: ""Inter Variable", system-ui, sans-serif",
};extracted from publicly visible design tokens. sourced via VoltAgent/awesome-design-md. no ownership claim on shopify's visual identity.