Mint Signal
#36f4a4Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Shopify
shopify.comWebsite preview
The design language
Shopify's design language reads as a midnight marketplace lit by mint-green signals: a near-black canvas with a faint forest tint, white typography at whisper-light weights (330) that lets generous letter-spacing carry the voice, and a single vivid mint accent that functions as functional punctuation rather than decoration. Surfaces stack in subtle dark-green tints (#02090a → #041e18 → #072720) so that cards feel like panels lifted from the same material, separated by hairline borders rather than heavy shadows. The primary action is a high-contrast white pill button — the green never fills an action — which keeps the brand hue available for inline highlights, key phrases, and iconography where it reads as confidence rather than urgency. Layout alternates between cinematic full-bleed photography and dark content bands with rounded media cards (12px radius), creating a rhythm of spectacle and catalog.
Color palette
brand
accent
Cyan Pulse
#30deeeSecondary accent for gradient washes, decorative icons, and teal-tinted emphasis text
Aurora Gradient
#5fd5b6Decorative gradient that sweeps from mint to violet, used in feature highlights and brand flourishes
Twilight Wash
#244749Decorative surface gradient — dark teal to deeper teal for atmospheric panels and section backgrounds
neutral
Abyssal Ink
#02090aPage canvas and hero backgrounds — near-black with a green undertone makes the mint accent glow rather than fight
Forest Floor
#041e18Card and elevated surface — one step up from canvas, reads as a panel cut from the same dark material
Deep Canopy
#072720Secondary card surface and nav backgrounds — provides a second elevation step above Forest Floor
Midnight Tinge
#000a1eSectional backgrounds where a cooler, blue-tinted dark is needed for variation
Moss Border
#093329List dividers and inset borders on dark surfaces — green-tinted so dividers feel atmospheric, not structural
Iron Veil
#1e2c31Hairline borders and card outlines — the most-used divider color, bridges green and neutral tones
Pure White
#ffffffLight supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Ghost White
#e5e7ebSecondary surface highlights, subtle borders, and inactive iconography on light or dark contexts
Ash Label
#a1a1aaMuted helper text, footer metadata, and secondary nav labels
Slate Caption
#71717aTertiary text and inactive state captions
Sea Mist
#9dabadBody text in teal-tinted sections and secondary paragraph copy
Tide Pool
#99b3adMuted body copy and link text where a subtle green-gray harmonizes with the brand hue
Typography
Type scale
Minor Third (1.2) · 16px basedisplay-lg
96px · 400 · 1 · 1.44px trackingThe quick brown fox jumps
display
70px · 330 · 1.14 · 1.05px trackingThe quick brown fox jumps
text-55
55px · 330 · 1.16The quick brown fox jumps
heading-lg
48px · 330 · 1.25 · 0.96px trackingThe quick brown fox jumps
heading
28px · 500 · 1.4 · 0.56px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.4 · 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
NeueHaasGrotesk
- Weights
- 330, 400, 500, 550, 600
- Sizes
- 14, 16, 18, 20, 24, 28, 48, 55, 70, 96
- Line height
- 1.25, 1.28, 1.40, 1.49, 1.50
- Letter spacing
- 0.0150em, 0.0200em, 0.0400em
- Features
- "ss03"
Primary typeface for all display, heading, and body text. Weight 330 at 70-96px is the signature choice: most brands shout at 700+, Shopify whispers at 330 with generous letter-spacing (0.015-0.04em), creating authority through restraint. The
Additional typeface
Inter-Variable
- Weights
- 400, 420, 450, 550
- Sizes
- 12, 14, 16, 18, 20
- Line height
- 1.20, 1.29, 1.43, 1.50, 1.56
- Letter spacing
- 0.06em for uppercase labels and button text
- Fallback
- Inter, system-ui, or Roboto
- Features
- \"ss03\"
Secondary typeface for nav, buttons, footer, and micro-copy where Inter's narrower proportions and tighter letter-spacing (0.06em uppercase) suit compact UI contexts
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 64-96px
- Card padding
- 20-24px
- Element gap
- 16px
Border radius
nav
8pxcards
12pxpills
9999pxbuttons
9999pxasymmetric
20pxsmallButtons
4pxSpacing scale
2px3px4px6px8px10px12px13px14px16px20px24px32px40px52px56px64px68px71px72px80px90px94px98px127px128px157px208pxGuidelines
Do
- Use weight 330 for display headlines (70-96px) with 0.015-0.04em letter-spacing — this whisper-weight is the brand's signature voice
- Set primary action buttons to white fill (#ffffff) with #02090a text, never mint green — the green accent is for text emphasis, not CTAs
- Apply #36f4a4 only to inline keyword highlights and the wordmark — it should appear as semantic punctuation, not decoration
- Use border-radius 12px for all content cards and 9999px for action buttons — mixing these creates the card/button hierarchy
- Layer dark surfaces in the order #02090a → #041e18 → #072720 — each step must carry a green tint to maintain atmospheric cohesion
- Use the
- ss03" font feature setting on all NeueHaasGrotesk and Inter text — it enables alternate glyphs that define the brand's letter personality"
- Pair multi-layer soft shadows (black 0.1 + white 0.03 inset) on dark cards for a glass-edge effect rather than heavy drop shadows
Don’t
- Never use weight 700+ for display headlines — the brand's authority comes from restraint at 330, not volume at 700
- Never fill a button with #36f4a4 — the mint green is a text and accent color, not an action color
- Never use light/neutral backgrounds — the system is dark-first; cards, sections, and the canvas all carry green-tinted darks
- Never use border-radius larger than 12px on cards — the pill shape (9999px) is reserved exclusively for buttons and tags
- Never use a pure neutral gray (#808080 or similar) — all grays must carry a green or teal tint to harmonize with the dark surfaces
- Never apply heavy drop shadows for elevation — rely on surface tint steps and hairline borders instead, with only soft layered shadows for interactive elements
- Never use more than one accent color per view — mint green for emphasis, cyan teal only in gradients, never both competing for attention
Components
Primary Action Button
Filled white pill button for the main CTA on each sectionBackground #ffffff, text #02090a, border-radius 9999px, padding 12px 24px, font Inter-Variable 16px weight 550, letter-spacing 0.06em uppercase. Renders as a high-contrast white capsule against the dark canvas — the green accent never fills an action.
Ghost Outline Button
Secondary action paired with the primary CTABackground transparent, border 1px #ffffff with opacity ~0.4, text #ffffff, border-radius 9999px, padding 12px 24px, font Inter-Variable 16px weight 550. Sits beside the primary action as a quieter alternative.
Small Rectangular Button
Compact buttons inside cards, calculators, and inline formsBackground #333333, text #ffffff, border-radius 4px, padding 8px 16px, font Inter-Variable 14px weight 550. Used for form submissions and card-level actions where the pill shape would feel too soft.
Content Card
Image-forward card in feature grids and brand showcase sectionsBackground #041e18, border-radius 12px, overflow hidden. Contains a full-bleed image with 12px radius inheriting to the image. No visible border — the image and rounded corner are the card's identity. Shadow: rgba(5,24,19,0.05) 0px 20px 60px 0px for subtle lift.
Elevated Feature Card
Cards with product previews, shipping calculators, and interactive demosBackground #041e18 or #072720, border 1px solid #1e2c31, border-radius 12px, padding 20-24px, shadow: multi-layer black 0.1 opacity with inset white 0.03 highlight. The layered shadow with inset white creates a subtle glass-edge effect against the dark surface.
Asymmetric Media Card
Cards with 20px top-left and bottom-right radii, creating a dynamic shapeBorder-radius 20px on opposite corners only (asymmetric), background #041e18. Used for hero-adjacent media blocks where a standard rounded card would feel static.
Navigation Bar
Top-level site navigation with logo, links, and action buttonsBackground transparent or #072720 on scroll, logo with green Shopify bag icon, nav links in Inter-Variable 14px weight 400 with #ffffff or #a1a1aa color, right-aligned action buttons. Border-radius 8px on the nav container itself.
Hero Overlay Text
Large display headline overlaid on full-bleed photographyNeueHaasGrotesk weight 330 at 70-96px, color #ffffff, line-height 1.0-1.14, letter-spacing 0.015-0.04em. The whisper-weight headlines over dramatic photography create a contrast between restraint and spectacle.
Inline Keyword Highlight
Brand-colored emphasis within body text and headingsText color #36f4a4 applied to key phrases (product names, value propositions) within otherwise white paragraphs. The mint green appears only as semantic emphasis — never decorative.
Shipping Calculator Widget
Interactive form embedded in feature sectionsBackground #ffffff, border-radius 12px, padding 16px. Contains labeled form fields with #02090a text, a green highlighted total row (background #36f4a4 or similar mint), and a dark submit button at the bottom.
Country Selector Flag
Vertical list of country flags in the international sectionEach flag in a square container ~40px with #072720 background, border-radius 4px, separated by 8px gap. Active flag has a brighter border or background lift.
Section Gradient Background
Atmospheric background for feature and international sectionsLinear gradient from rgb(36,71,73) to rgb(24,46,47) or radial gradient with teal center fading to canvas. Creates a subtle teal glow that differentiates sections without breaking the dark-mode cohesion.
Footer Link Group
Column-based footer navigation with category headings and linksCategory headings in Inter-Variable 12px weight 550 uppercase with 0.06em letter-spacing and #a1a1aa color. Links in 14px weight 400 with #ffffff or #9dabad color, 8-12px vertical spacing between items.
Surfaces & elevation
Level 0
Abyssal Ink
#02090aPage canvas and full-bleed hero backgrounds
Level 1
Midnight Tinge
#000a1Sectional bands where a cooler dark is needed
Level 2
Forest Floor
#041e18Card panels and content containers
Level 3
Deep Canopy
#072720Elevated cards, nav backgrounds, and hover-state surfaces
Elevation is used sparingly and atmospherically. The primary technique is a multi-layer soft black shadow combined with a near-invisible white inset highlight (rgba(255,255,255,0.03)) to create a glass-edge effect on dark cards. Heavy drop shadows are avoided — the green-tinted dark surfaces and hairline borders do most of the work of separating layers.
Content 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
Interactive Demo Card
rgba(5, 24, 19, 0.05) 0px 20px 60px 0px, rgb(19, 59, 50) 0px 1px 0px 0px inset
Layout & imagery
Layout
Full-bleed page model with no visible max-width constraint at the canvas level. The hero is a full-viewport photographic image with overlaid display text left-aligned in the lower-left quadrant, creating an asymmetric composition where the visual dominates and the text anchors. Below the hero, sections shift to a dark content area with max-width ~1280px centered. Content sections alternate between left-aligned text + right-aligned media blocks and centered headline + grid layouts (3-column image card grids for brand showcases, 2-column layouts for feature explanations). The international section uses a full-bleed dark teal-tinted background with centered content. Navigation is a minimal top bar: logo left, nav links center-left, login + CTA right, transparent over the hero and solid dark on scroll. Spacing between sections is generous (64-96px) to let the dark background breathe.
Imagery
Full-bleed cinematic photography dominates the hero: tightly cropped, high-energy crowd and event imagery (the Nasdaq/Allbells celebration shot) with no lifestyle staging — the moment IS the content. Product and brand imagery in secondary sections appears in rounded media cards (12px radius) with full-bleed crops, no padding around images. The visual strategy alternates between spectacle (hero photography) and catalog (brand logo grids, product screenshots in cards). Gradients with teal and green washes appear behind map graphics and feature sections to create atmospheric depth without literal imagery. Icons are minimal and outlined, used only for functional UI affordances.
Design notes
Agent Guide
**Quick Color Reference**\n- text: #ffffff (primary), #99b3ad (body muted), #a1a1aa (helper)\n- background: #02090a (canvas), #041e18 (card), #072720 (elevated)\n- border: #1e2c31 (hairline), #093329 (inset)\n- accent: #36f4a4 (mint — text emphasis only)\n- secondary accent: #30deee (teal — gradients only)\n- primary action: no distinct CTA color
Similar brands
Linear
Same dark-mode-first approach with near-black canvas, whisper-light weight display headlines, and pill-shaped action buttons
Vercel
Similar generous letter-spacing on large display text and minimal color palette where a single accent color functions as semantic emphasis rather than decoration
Stripe
Shared use of light-weight typography at large sizes, pill-shaped CTAs, and a dark surface stack with subtle tint variations
Notion
Same restrained accent color usage — a single brand hue appears only for emphasis and brand identity, never as a filled action
Arc Browser
Dark canvas with green-tinted neutrals and full-bleed photographic hero sections with overlaid display text
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
