name: shopify-design
version: alpha
description: >
  Shopify's current marketing system is a near-black canvas with deep green-tinted dark
  panels, monumental white grotesque type, and white pill CTAs. The display face is Neue
  Haas Grotesk set huge (96px) at regular/light weights; body is Inter Variable at
  intermediate weights (420/550). The brand color is Shopify green, but on the homepage it
  appears mainly in the logo and subtle dark-teal radial glows behind rounded section
  cards; a vivid purple band introduces "Sidekick". Shapes are large rounded section cards
  with full-pill buttons. Signature moves: full-bleed dark hero video, two-tone headlines
  (white + grey continuation), teal-glow rounded panels, and the green shopping-bag logo.
colors:
  # Brand
  primary: '#000000'          # canvas / ink base
  on-primary: '#ffffff'
  green: '#5fed83'            # Shopify green accent (logo / highlights) — approximate
  green-deep: '#008060'       # classic Shopify green (legacy admin)
  cta: '#ffffff'              # white pill primary CTA
  on-cta: '#000000'
  # Surface (dark, green-tinted)
  surface: '#000000'          # page canvas
  surface-card: '#02090a'     # near-black green-tinted card
  surface-panel: '#0a1f1c'    # deep teal rounded panel (with radial glow)
  # Sidekick
  sidekick-purple: '#5433eb'  # vivid purple band ("Meet your secret weapon, Sidekick")
  # Text
  on-surface: '#ffffff'       # primary text
  on-surface-secondary: '#a1a1aa' # grey headline continuation / muted copy
  # Hairlines
  hairline: 'rgba(255,255,255,0.12)'
typography:
  display:
    fontFamily: 'NeueHaasGrotesk, Helvetica, Arial, sans-serif'
    fontSize: 96px            # hero "Be the next solo-preneur"
    fontWeight: 400
    lineHeight: 96px
    letterSpacing: 0
  display-light:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 55px
    fontWeight: 330           # notably light
    lineHeight: 64px
  headline:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
  body-lg:
    fontFamily: '"Inter-Variable", Helvetica, Arial, sans-serif'
    fontSize: 18px
    fontWeight: 550
    lineHeight: 28px
  body-md:
    fontFamily: '"Inter-Variable", Helvetica, Arial, sans-serif'
    fontSize: 16px
    fontWeight: 420
    lineHeight: 24px
  label:
    fontFamily: '"Inter-Variable", Helvetica, Arial, sans-serif'
    fontSize: 16px
    fontWeight: 550
    lineHeight: 24px
rounded:
  md: 16px     # buttons inner / chips
  lg: 24px     # section cards (approx)
  xl: 32px     # large panels
  full: 9999px # pill buttons
spacing:        # base unit 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 72px
  3xl: 90px
components:
  button-primary:              # "Start for free"
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '8px 20px'
  button-outline:              # "Why we build Shopify" (with play glyph)
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    borderColor: '{colors.on-surface}'
    borderWidth: '2px'
    rounded: '{rounded.full}'
    padding: '12px 26px 12px 16px'
  card:                        # rounded dark section card
    backgroundColor: '{colors.surface-card}'
    rounded: '{rounded.lg}'
    textColor: '{colors.on-surface}'
    glow: 'teal radial gradient'
  sidekick-band:
    backgroundColor: '{colors.sidekick-purple}'
    rounded: '{rounded.lg}'
    textColor: '{colors.on-surface}'
  product-popover: 'white rounded card with dark "Buy now" pill + USD pill chip'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 300ms
icons:
  style: outline
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.on-surface}'

Shopify

shopify-design · alpha

Overview

Shopify's current marketing site is a near-black, green-tinted dark canvas built around monumental white grotesque type and white pill CTAs. The display face is Neue Haas Grotesk, set huge (96px) at regular weight (and a notably light 330 weight at 55px), while body copy runs Inter Variable at intermediate weights (420/550). The brand green is present but restrained on the homepage — mostly in the shopping-bag logo and as subtle dark-teal radial glows behind large rounded section cards — and a single vivid purple band introduces "Sidekick". Headlines use a two-tone treatment: a white lead-in clause followed by a grey continuation ("Sell everywhere people shop. Online and in person…"). Sections are big rounded dark cards with teal glows over a full-bleed dark hero video. The tone is bold, premium, and commerce-forward.

Colors

Brand — the canvas is black; the accent is Shopify green (logo + highlights; ~#5fed83, with the classic admin green #008060). The primary CTA is a white pill (cta #ffffff, black text). A vivid sidekick-purple #5433eb powers the Sidekick band.

Surface — surface #000000; cards lift to a green-tinted near-black surface-card #02090a; feature panels use a deep teal surface-panel #0a1f1c with a soft radial glow.

Text — on-surface #ffffff primary; on-surface-secondary #a1a1aa for the grey half of two-tone headlines, muted copy, and footer.

Hairlines — faint rgba(255,255,255,0.12).

Typography

Two families: Neue Haas Grotesk for display (fallback Helvetica) and Inter Variable for body/UI. Closest open-source substitutes: Inter or Helvetica Now-like grotesques for both roles. The display strategy is huge at regular/light weight (96px @ 400, 55px @ 330); body uses intermediate variable weights (420/550) rather than 400/600.

Token	Size	Weight	Line-height	Usage
display	96px	400	96px	Hero ("Be the next solo-preneur")
display-light	55px	330	64px	Large light statements
headline	40px	400	1.1	Section heads
body-lg	18px	550	28px	Lead copy / buttons
body-md	16px	420	24px	Body
label	16px	550	24px	Button labels

Layout

Base unit 8px with large section padding (72–90px). The page is a vertical stack of big rounded dark section cards, each with a teal radial glow and a two-tone headline + muted subcopy + inline link. The hero is a full-bleed dark video with overlaid white display type and pill CTAs. Floating product UI mocks (white card + "Buy now" pill + USD chip) sit inside panels. Generous vertical rhythm.

Elevation & Depth

Depth comes from radial color glows (teal/green) inside dark rounded cards rather than drop shadows — a soft, atmospheric lift. Floating product mocks use small white cards with subtle shadow against the dark panels. Overall low-shadow, glow-driven.

Shapes

Large rounded vocabulary: 16px (button inner / chips), ~24px (section cards), and ~32px (large panels), plus full pills for buttons. The big soft-cornered dark cards are the signature shape, contrasted with crisp white pill CTAs.

Components

• button-primary — white pill, black text ("Start for free").
• button-outline — transparent pill with a 2px white outline + play glyph ("Why we build Shopify").
• card — green-tinted near-black, ~24px radius, with a teal radial glow; holds headline + subcopy.
• sidekick-band — vivid purple #5433eb rounded section introducing the AI assistant.
• product-popover — white rounded card with a dark "Buy now" pill and a flag/USD chip.

Motion

Standard ~300ms ease. Hero video plays; cards reveal on scroll; glows shift subtly. Personality is smooth and premium — no bounce or gimmickry; motion supports the cinematic dark aesthetic.

Iconography

Outline icons at 16/20/24px in on-surface. The green shopping-bag "S" logo is the brand mark and the main place full green appears. Channel/feature glyphs are simple line icons; product mocks use realistic UI chips.

Do's and Don'ts

• Do keep the canvas near-black with green-tinted dark cards and teal radial glows.
• Do set display type huge in Neue Haas Grotesk at regular/light weight; body in Inter Variable.
• Do use white pill CTAs as primary; outline pills as secondary.
• Do use the two-tone headline pattern (white lead-in + grey continuation).
• Do reserve the purple band for the Sidekick/AI moment.
• Don't flood surfaces with bright green — keep it to the logo and subtle glows.
• Don't add hard drop shadows; prefer atmospheric color glows.
• Don't bold the giant headlines — the light/regular weight is the tone.

Known Gaps

• Shopify renders client-side; :root exposed no custom properties, so values are from computed styles plus Shopify's known brand green. Surface teal/green hexes (#02090a, #0a1f1c) and the accent green are close approximations; section radii are inferred. "Neue Haas Grotesk" is licensed — substitute a grotesque.