Skip to content
Back to extractor

Overview

Shopify's branding employs a dark, immersive design language built on deep coal-black and teal-green surfaces, contrasted with high-luminance white text and vivid mint/avocado accents. The system uses a curated typographic stack — NeueHaasGrotesk for the body system, Inter-Variable for UI, and IBMPlexMono for data — reinforcing a precise, technical credibility. Motion, layering, and scroll-state-driven transitions signal a sophisticated, performance-oriented product.

Signature traits: dark-first coal and deep-green palette, ultra-light display type weight (330), pill-shaped CTA buttons, scroll-state-aware sticky header transitions, multi-font typographic hierarchy, radial gradient depth effects.

Colors

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --color-background | #02090a | Page backgrounds, section dark bg | | Surface | --color-surface | #061a1c | Card panels, deep-green overlays | | Text Primary | --color-text-primary | #ffffff | Headings, body copy on dark | | Text Secondary | --color-text-secondary | #71717a | Captions, disabled states, placeholders | | Border | --color-border | #1a292c | Dividers, header borders, card edges | | Accent | --color-accent | #36f4a4 | Avocado CTAs, highlights, active indicators |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 3.5rem | 330 | 3.78rem | -0.01em | Hero headlines | | Heading | NeueHaasGrotesk, Helvetica, Arial, sans-serif | 2.75rem | 330 | 2.97rem | -0.005em | Section titles (t1) | | Body | Inter-Variable, Helvetica, Arial, sans-serif | 1rem | 420 | 1.4rem | -0.006em | Paragraph text | | Caption | Inter-Variable, Helvetica, Arial, sans-serif | 0.875rem | 420 | 1.1375rem | 0 | Labels, metadata, body-sm | | Mono | IBMPlexMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace | 0.875rem | 400 | 1.25rem | 0 | Code, data, technical labels |

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 0.25rem | Inline gaps, tight icon spacing | | Spacing SM | 0.5rem | Component internal padding | | Spacing MD | 1rem | Base margin, standard component gaps | | Spacing LG | 1.5rem | Card padding, between-element gaps | | Spacing XL | 2rem | Section internal spacing | | Spacing 2XL | 2.5rem | Between sections, major vertical rhythm | | Spacing 3XL | 4rem | Large section separators | | Spacing 4XL | 5rem | Hero vertical padding | | Spacing 5XL | 8rem | Maximum section breathing room | | Header Height | 4.5rem | Global sticky header height | | Max Width SM | 640px | Mobile breakpoint | | Max Width MD | 900px | Tablet breakpoint | | Max Width LG | 1200px | Desktop breakpoint | | Max Width XL | 1600px | Wide desktop, content container cap | | Margin (mobile) | 1rem | Page-edge margin | | Margin (tablet) | 1.875rem → 3.125rem | Responsive page-edge margin | | Margin (desktop) | 5.625rem | Large screen page-edge margin |

Responsive strategy: Five defined breakpoints — xs (340px), sm (640px), md (900px), lg (1200px), xl (1600px). Layout margin scales from 1rem on mobile to 5.625rem on large desktop. Container collapses to auto-width with margin insets below 1600px, then centres with fixed max-width. Grid uses 12-column system collapsing to 1–4 columns on mobile. Header navigation switches between mobile (checkbox-driven overlay) and desktop (inline) at 1200px.

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | sm | 0 4px 8px #18181b0a, 0 0 2px #18181b40 | Cards, tooltips (light mode) | | md | 0 8px 48px #06060814, 0 4px 8px #18181b0a, 0 0 2px #18181b40 | Dropdowns, popovers (light mode shadow-1) | | lg | 0 8px 48px #18181b3d, 0 4px 8px #18181b29, 0 0 2px #ffffff85 | Modals, overlays (dark mode shadow-1) |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Raw panels, flush section edges | | sm | 0.375rem | Small UI elements, tags | | md | 0.5rem | Input fields, small cards | | lg | 0.75rem | Standard cards, modals | | xl | 1rem | Large cards, bottom sheets | | 2xl | 1rem | Prominent card corners (radius-2xl = 1rem) | | 4xl | 2rem | Hero cards, large feature panels | | full | 9999px (3.40282e38px) | Pill buttons, badges, avatars |

Components

Buttons: Two variants — primary (filled, uses --color-theme-bg-cta) and secondary (transparent with border, uses --color-theme-border-cta). Both use border-radius: var(--radius-theme-full) (pill shape). Font weight 550, size 1rem (sm) or 1.125rem (lg on md+ screens). Padding: 0.5rem vertical / 1.25rem horizontal (sm), 0.75rem / 1.5rem (lg). Light mode primary is black-on-white; dark mode primary is black-on-white inverted (white button, black text).

Header: Sticky, scroll-state-aware using @container bk-header scroll-state(stuck:top). Transitions opacity and delay on scroll attachment. Supports data-color-mode for light/dark theming. Height fixed at 4.5rem. Mobile nav uses hidden checkbox peer pattern for overlay toggle with overflow:hidden on body when open.

Cards: Use perspective(50px) 3D transforms with translateZ for depth carousel effects. Transitions on transform (0.7s ease-in-out) and opacity (0.2s). .card-hero resets to identity transform; flanking cards receive lateral and depth offsets.

Rich Text: Structured typographic hierarchy from t1–t8. First and last children strip margins. Strong elements use weight 550. Links receive text-decoration-skip-ink: none and underline, removed on hover/active. Arrow animation pseudo-element using SVG mask, translating on hover.

Flags Carousel: Horizontal scroll with alpha mask gradient fade at edges (mask-image: linear-gradient(90deg, transparent, black, transparent)). Flag items scale 1.25 on hover at md+ with will-change: transform.

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use coal black (#02090a) or deep green (#061a1c) as primary backgrounds | Use white or light grey as default page backgrounds in dark contexts | | Use pill (full-radius) buttons for all primary and secondary CTAs | Use square-cornered or small-radius buttons as primary actions | | Apply ultra-light weight (330) for display and large heading type | Use heavy or bold weights for hero-scale headlines | | Use Inter-Variable for UI copy and NeueHaasGrotesk for editorial body | Mix font families arbitrarily outside the defined typographic stack | | Use spacing tokens (xs/sm/md/lg/xl/2xl) for all layout decisions | Use arbitrary pixel values for spacing outside the defined scale | | Leverage radial gradients with deep teal origins for section depth | Use flat solid backgrounds where gradient depth is expected |

Agent Prompt Guide

You are working within the Shopify: The All design system. Key constraints:

  • —Colors: background #02090a (coal black), surface #061a1c (deep green), text #ffffff, secondary text #71717a, border #1a292c, accent #36f4a4 (avocado)
  • —Typography: NeueHaasGrotesk for editorial/display (weights 330–600), Inter-Variable for UI body (weights 400–550), IBMPlexMono for code/data
  • —Display type uses ultra-light weight 330 at 3.5rem / -0.01em tracking
  • —Body text: 1rem / 420 weight / -0.006em tracking
  • —Spacing: use only xs(0.25rem) sm(0.5rem) md(1rem) lg(1.5rem) xl(2rem) 2xl(2.5rem) tokens
  • —Radius: full (9999px) for all buttons and pills; lg (0.75rem) for cards; md (0.5rem) for inputs
  • —Buttons: always pill-shaped, primary = filled CTA color, secondary = transparent + border
  • —Dark mode is the default; light mode inverts bg/text tokens via data-color-mode attribute
  • —Depth: use radial gradients with teal/green origins (#157076, #1c4e50) for section backgrounds
  • —Never use arbitrary colors, font sizes, or spacing values outside the defined system tokens