Shopify Mint
#36f4a4Active nav indicators, focus rings, highlight tags, link hover accents — the single chromatic spark that makes interactivity feel switched on against the dark canvas
Shopify
shopify.comWebsite preview
The design language
Shopify's design system is a midnight workshop for commerce: an almost-black canvas tinted with deep teal-green, broad confident sans-serif type, and one electric mint accent that activates interactive moments. The interface feels like a darkroom where products and brands are the light source — photography and merchant storefronts glow against the near-black surfaces while chrome recedes. Components are geometric but soft: 12px-radius cards with hairline borders, pill buttons, and weight-330 display type that whispers scale rather than shouting. A single chromatic punctuation (#36f4a4) appears sparingly on links, tags, and focus states, reserving color for functional moments so the merchant stories stay the visual focus.
Color palette
brand
accent
Mossy Edge
#133b32Inset borders on elevated cards, subtle separator strokes with teal undertone
neutral
Midnight Forest
#02090aPage canvas, hero backgrounds, section backgrounds
Deep Lichen
#061a1cPrimary card surfaces, elevated panels, content blocks
Shaded Fern
#072720Navigation bar, secondary cards, subtle panel lift
Spruce Border
#1e2c31Hairline card borders, divider lines, input outlines
Abyss Indigo
#000a1eSecondary surface for product/demo embeds, feature panels
Pure White
#ffffffPrimary text, button fills, heading copy, logo marks
Mist Gray
#a1a1aaBody text, secondary copy, muted labels, footer links
Sage Gray
#99b3adBody paragraphs, description text with subtle teal warmth
Faded Steel
#9dabadLink text, breadcrumb labels, tertiary copy
Soft Pearl
#9797a2Helper text, micro-copy, metadata labels
Carbon Black
#000000Icon fills, nav SVG strokes, maximum-contrast text
Slate
#71717aHeadings needing reduced emphasis, section eyebrows
Graphite
#333333Disabled button backgrounds, inactive control states
Typography
Type scale
Minor Third (1.2) · 16px basetext-96
96px · 400 · 1The quick brown fox jumps
display
70px · 330 · 0.96 · 2.8px trackingThe quick brown fox jumps
text-55
55px · 330 · 1.16The quick brown fox jumps
heading-lg
48px · 330 · 1.14 · 1.92px trackingThe quick brown fox jumps
heading
28px · 500 · 1.16 · 0.56px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.25 · 0.48px trackingThe quick brown fox jumps
subheading
20px · 400 · 1.4 · 0.4px trackingThe quick brown fox jumps
text-18
18px · 500 · 1.25The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Neue Haas Grotesk
- Weights
- 330, 400, 500, 550, 600
- Sizes
- 14, 16, 18, 20, 24, 28, 48, 55, 70, 96
- Line height
- 1.0–1.5 depending on size (0.83–0.96 for display, 1.4–1.5 for body)
- Letter spacing
- 0.015em at 14px, 0.02em at 16–20px, 0.04em at 48px+
- Fallback
- Inter, Helvetica Neue, Söhne
- Features
- "ss03"
Primary type system — display headlines at 70–96px weight 330–400 whisper scale rather than shout it; body at 16–18px weight 400–500; nav and UI at 14–16px weight 500–550. The ultra-light 330 weight at display sizes is the signature: it says confidence through restraint, not volume.
Additional typeface
Inter Variable
- Weights
- 400, 420, 450, 550
- Sizes
- 12, 14, 16, 18, 20
- Line height
- 1.0–1.56
- Letter spacing
- 0.06em — applied to uppercase eyebrow labels and tab indicators
- Fallback
- Inter, system-ui
- Features
- "ss03"
Secondary utility type — used in nav chrome, small UI labels, tab controls, footer micro-copy. The slightly higher x-height and more standard tracking make it more legible at compact sizes. Also serves where weight 420 fills the gap between regular and medium.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 12px
Border radius
nav
12pxcards
12pxpills
9999pxinputs
4pxbuttons
9999pxlarge_panels
20pxSpacing scale
2px3px4px6px8px10px12px13px14px16px20px24px32px40px48px51px56px64px68px71px72px80px90px94px98px127px128px157px208pxGuidelines
Do
- Use weight 330–400 Neue Haas Grotesk at 70–96px for display headlines — the ultra-light weight at extreme size is the system's most distinctive signature.
- Set the canvas to #02090a for all pages; use #061a1c for cards and #1e2c31 for hairline borders to build the layered dark surface stack.
- Use pill buttons (9999px radius) for all primary and secondary actions — square or slightly rounded buttons break the system's silhouette.
- Reserve #36f4a4 for functional moments: active nav, focus rings, key link accents, highlight tags. Never use it for decorative fills or large background areas.
- Apply letter-spacing 0.015–0.04em on Neue Haas Grotesk at 48px+; tight tracking on heavy display type but slightly opened on small sizes.
- Use 12px radius for cards and 4px for inputs/buttons — these two values carry the geometric identity.
- Set font-feature-settings to "ss03" on both type families to preserve the alternate character set that defines the brand's typographic feel.
Don’t
- Don't use weight 600+ at display sizes — it overpowers the whisper-light headlines and collapses the system's contrast between headline and body.
- Don't introduce new chromatic colors for buttons or CTAs — white pill on dark is the only primary action; ghost white-bordered pill is the only secondary.
- Don't use #36f4a4 as a background fill or large surface color — it loses its power as a functional spark when applied broadly.
- Don't add drop shadows beyond the subtle inset highlights — heavy shadows break the flat dark-surface language and the inset-bright border convention.
- Don't use radius values other than 12px (cards), 4px (inputs), or 9999px (pills) — inconsistent rounding breaks the geometric consistency.
- Don't use light-theme colors (white surfaces, dark text) except inside merchant/product embeds where the merchant's own content takes over.
- Don't set body copy in #ffffff — use #99b3ad or #a1a1aa so the hierarchy between headline (white) and paragraph (muted) remains intact.
Components
Primary Pill Button
Main call-to-actionWhite fill (#ffffff), dark text (#02090a), 9999px pill radius, 12px 24px padding, 16px Inter Variable weight 550. Subtle inset highlight rgba(255,255,255,0.04) for surface texture. This is the dominant action — used once per view.
Ghost Pill Button
Secondary actionTransparent fill, 1px white border (#ffffff at ~30% opacity), white text, 9999px radius, 12px 24px padding, 16px Inter Variable weight 550. Paired alongside primary on hero sections.
Dark Surface Card
Content containerBackground #061a1c, 1px border #1e2c31, 12px radius, 24px padding. Used for feature blocks, product embeds, content tiles. Stack of layered dark tones separates it from the deeper #02090a canvas.
Raised Showcase Card
Hero/feature card with liftBackground #072720, 20px radius, generous padding (24–40px), with shadow stack: rgba(5,24,19,0.05) 0px 20px 60px + rgb(19,59,50) 0px 1px 0px inset. Inset border gives the card a subtle green-lit edge against the dark canvas.
Navigation Bar
Top-level site navigationBackground #072720, 12px radius on outer container, 24px vertical padding. Logo left, primary nav links center-left at 14px weight 500, utility links and CTA right. Active nav item gets a #36f4a4 underline or dot indicator.
Feature Image Card
Merchant showcase tileFull-bleed photograph (16:9 or 3:4) with 12px radius, sits on #061a1c background, often paired with merchant logo overlay. Image is the hero — no decorative borders.
Product Preview Card
Inline product/storefront embedWhite or near-white interior (often pulled from merchant site), 12px radius, floats above dark canvas with 4px inner shadow border. Buy button inside is dark pill on white surface.
Eyebrow Label
Section pre-title / category tagInter Variable 12px weight 550, 0.06em letter-spacing, uppercase, color #99b3ad or #36f4a4 (when active/highlighted). Sits 8–12px above its heading.
Display Headline
Page-level hero textNeue Haas Grotesk 70–96px, weight 330–400, line-height 0.96–1.0, letter-spacing 0.015–0.04em, color #ffffff. The ultra-light weight at extreme size is the system's most recognizable signature — it signals scale through restraint, not volume.
Body Copy
Paragraph text and descriptionsNeue Haas Grotesk 16–18px, weight 400, line-height 1.4–1.5, color #99b3ad. Muted teal-gray against the dark canvas keeps body copy present but secondary to headings.
Minting Link
Inline text link with accentColor #36f4a4, no underline by default, 1px solid underline on hover. Used for key inline CTAs and navigational text links that need to stand out from the muted body.
Flag/Icon Chip
Country selector or status indicator40×40 or 48×48 square, 8–12px radius, contains country flag or icon. Subtle 1px #1e2c31 border. Used in international/markets feature blocks.
Surfaces & elevation
Level 0
Canvas
#02090aPage background, hero sections, outer page chrome
Level 1
Card Surface
#061a1cStandard card and content block background
Level 2
Elevated Panel
#072720Navigation bar, raised feature cards with subtle green lift
Level 3
Inset/Product Surface
#000a1Secondary demo embeds, product preview frames
Elevation is achieved through layered dark surface tones (#02090a → #061a1c → #072720) rather than heavy drop shadows. Inset highlights at rgba(255,255,255,0.03–0.05) and subtle 1px borders in #1e2c31 or #133b32 create definition. When shadows appear, they're long, soft, and tinted toward green (#051813) to feel native to the dark-teal palette rather than a generic black drop.
Feature card
rgba(5, 24, 19, 0.05) 0px 20px 60px 0px, rgb(19, 59, 50) 0px 1px 0px 0px inset
Standard card
rgba(0, 0, 0, 0.1) 0px 8px 8px 0px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px, rgba(0, 0, 0, 0.1) 0px 2px 2px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.03) 0px 1px 0px 0px inset
Button
rgba(255, 255, 255, 0.05) 0px 1px 2px 0px, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset
Dropdown/list
rgba(0, 0, 0, 0.2) 10px 13px 12px 2px
Layout & imagery
Layout
Max-width ~1280px centered, with full-bleed hero sections that break out of the container for photography. The page rhythm alternates: (1) full-bleed dark hero with overlaid headline + pill CTAs, (2) comfortable dark sections with max-width 2-column text+image blocks or 3-column image grids, (3) interactive demo panels (product card, shipping calculator, world map) that float as raised cards against the deeper canvas. Navigation is a sticky top bar with logo + 3 nav items + utility links + primary CTA right-aligned. Vertical rhythm uses 80px section gaps with seamless flow — no dividers between dark sections, just surface tone shifts.
Imagery
Imagery is merchant-first: full-bleed product photography and brand event photos carry the visual weight, often as hero-scale backgrounds with overlaid white type. Shots are tightly cropped, high-contrast, and celebratory (Nasdaq bell-ringing, group cheers, product-in-hand close-ups). The dark canvas makes these photographs feel like illuminated spotlights. Illustrations are minimal — product embeds and merchant storefront screenshots do most explanatory work. Icons are mono-outline at 1.5–2px stroke, typically white or #36f4a4 for active states.
Design notes
Agent Guide
**Quick Color Reference** - canvas: #02090a - card surface: #061a1c - border: #1e2c31 - primary text: #ffffff - body text: #99b3ad - accent: #36f4a4 - primary action: #ffffff (filled action) **Example Component Prompts** 1. **Dark hero with full-bleed image**: Background photo at 100% viewport width. Centered overlay: headline 70px Neue Haas Grotesk weight 330, #ffffff, letter-spacing 0.04em. Subtext 18px weight 400, #99b3ad. Two pill buttons below: white fill #ffffff with #02090a text, and ghost with 1px #ffffff border and white text; both 9999px radius, 12px 24px padding, 16px Inter Variable weight 550. 2. **Feature card grid**: Three columns on dark canvas #02090a, 16px gap. Each card: #061a1c fill, 1px #1e2c31 border, 12px radius, 24px padding. Image at top at 12px radius. Heading 24px Neue Haas Grotesk weight 500, #ffffff. Body 16px weight 400, #99b3ad. 3. **Product embed panel**: Floating card on #02090a canvas. Card: #072720 fill, 20px radius, 32px padding, with inset border 1px #133b32. Inside: product image on white (#ffffff) sub-surface at 12px radius, product title 18px weight 500 #ffffff, price 16px #99b3ad, dark pill buy button (#02090a fill, #ffffff text, 9999px radius). 4. **Mint accent link block**: Section heading 48px weight 400 #ffffff, followed by inline link text 16px weight 500 in #36f4a4, no underline by default, 1px solid #36f4a4 on hover. Eyebrow above: 12px Inter Variable weight 550, 0.06em tracking, uppercase, #99b3ad. 5. Create a Primary Action Button: #ffffff background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
Similar brands
Linear
Same dark-mode near-black canvas with a single chromatic accent (Linear's purple vs Shopify's mint), ultra-light display type, and hairline-border cards on layered dark surfaces.
Vercel
Similar ultra-clean dark UI with geometric sans-serif at large sizes, pill buttons, and the philosophy that product/photography content should be the visual focus against a quiet dark canvas.
Notion
Comfortable-density dark theme with the same instinct to keep UI chrome minimal and let user/merchant content carry the visual weight, with restrained accent color use.
Stripe
Linear-style gradient overlays on dark sections, pill buttons, and the same approach to mixing brand color sparingly with a largely achromatic interface.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
