Ember Orange
#fa4616Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
Whop
whop.comWebsite preview
The design language
Whop uses a high-contrast light canvas with a single saturated orange as the entire chromatic vocabulary. The system is typographically polarized: a custom geometric display face (acidGrotesk) at near-mega sizes for hero and section headlines, and Inter for all functional UI at 14-20px. Surfaces stay flat — no gradients, minimal shadows — with one signature move: the primary orange button carries a hard 3px offset shadow in a deeper burnt-orange rather than a soft drop shadow, giving the interface a slightly retro, almost sticker-like weight. Card corners are pillowy at 24px while buttons stay compact at 8px, creating a clear hierarchy of softness between content containers and interactive elements. The overall rhythm is spacious and confident: large display headlines, generous 64-80px section gaps, and white phone mockups floating on a near-white canvas.
Color palette
brand
Ember Shadow
#b62600Hard 3px offset shadow beneath Ember Orange buttons — a deeper burnt orange instead of a soft drop shadow
neutral
Carbon
#202020Primary text, heading strokes, heavy borders, icon fills
Snow
#ffffffCard surfaces, button text on dark fills, the elevated layer above the page canvas
Mist
#f9f9f9Page canvas — the near-white background that all sections sit on
Silver
#e1e4e8Hairline dividers, card borders, subtle structural separators
Slate
#646464Muted body text, secondary links, inactive nav items, mid-weight borders
Ash
#838383Tertiary text, placeholder text, disabled labels
Pearl
#bbbbbbLight borders, icon outlines, low-emphasis strokes
Obsidian
#0a0a0aDark surface variant for inverted cards or code-editor panels
Typography
Type scale
Minor Third (1.2) · 20px basedisplay
128px · 700 · 1 · -3.84px trackingThe quick brown fox jumps
heading
56px · 700 · 1 · -1.68px trackingThe quick brown fox jumps
subheading
20px · 600 · 1.4 · -0.32px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.16px trackingThe quick brown fox jumps
text-14
14px · 400 · 1.4The quick brown fox jumps
text-13
13px · 400 · 1.4The quick brown fox jumps
caption
12px · 600 · 1.5 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
acidGrotesk
- Weights
- 700
- Sizes
- 56px, 128px
- Line height
- 1.00
- Letter spacing
- -0.0300em (constant across all sizes)
- Fallback
- Inter Tight at weight 800, or Space Grotesk Bold
Display and section headlines — used at near-mega sizes (128px) for hero, 56px for section titles. Line-height locked to 1.00, tracking at -0.03em creates a compressed, poster-like quality. This is a custom geometric face; no system font replicates its personality.
Additional typeface
Inter
- Weights
- 400, 500, 600, 700
- Sizes
- 13px, 14px, 16px, 20px
- Line height
- 1.40–1.50
- Letter spacing
- -0.0160em, -0.0140em, -0.0130em, -0.0110em, -0.0090em, -0.0060em
- Fallback
- Inter (native) or system-ui, -apple-system, sans-serif
All functional UI: body copy, links, buttons, nav, footer, card text, labels. Weight 400 for body, 500 for buttons and emphasized text, 600-700 for subheadings and strong labels. Tracking tightens as size increases (-0.016em at 20px down to -0.006em at 13px).
Additional typeface
Geist Mono
- Weights
- 500, 600
- Sizes
- 12px, 13px, 14px, 16px
- Line height
- 1.50–1.70
- Fallback
- JetBrains Mono, IBM Plex Mono, ui-monospace
Code snippets, terminal prompts, technical metadata, version labels. Generous line-height (1.70) for multi-line code blocks. Normal letter-spacing — mono fonts don't need optical tightening.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 64-80px
- Card padding
- 24px
- Element gap
- 24px
Border radius
cards
24pxbuttons
8pxsmallElements
4pxlargeContainers
16pxSpacing scale
4px6px8px10px12px16px18px24px32px40px64px80px91px96px160px256pxGuidelines
Do
- Use Ember Orange (#fa4616) exclusively for the single primary action on any screen — never for decorative elements, tags, or secondary buttons
- Apply the hard burnt-orange offset shadow (rgb(182,38,0) 0px 3px 0px 0px) only to primary CTA buttons
- Set display headlines in acidGrotesk at 56px or 128px with line-height 1.00 and letter-spacing -0.03em — never use Inter for display sizes
- Use 24px border-radius for all card-like containers and 8px for all buttons — this size ratio is non-negotiable
- Keep the page canvas #f9f9f9 and card surfaces #ffffff — never invert this hierarchy
- Use 64-80px vertical gaps between major sections to maintain the spacious rhythm
- Use Geist Mono exclusively for code, terminal prompts, and technical metadata — never for UI labels or body text
Don’t
- Don't use Ember Orange for any element that isn't the primary action button on that screen
- Don't apply soft drop shadows, blur, or opacity-based shadows to any element — the system is flat
- Don't use display sizes (56px+) in Inter — Inter is for 13-20px functional UI only
- Don't add gradients — the system is entirely flat color
- Don't use neutral grays for decorative accents or illustrations — the palette is near-black to near-white with one orange
- Don't set border-radius values outside the four tokens: 4px, 8px, 12px, 16px, 24px
- Don't place multiple orange buttons on the same screen — one primary action per view
Components
Primary CTA Button
The singular high-emphasis action — the only chromatic button in the systemBackground #fa4616, white text in Inter weight 500 at 16px, padding 12px 24px, border-radius 8px, no border. Carries a unique hard offset shadow: rgb(182,38,0) 0px 3px 0px 0px — the burnt-orange offset makes the button feel like a physical sticker pressed onto the page.
Ghost/Secondary Button
Low-emphasis action paired with the primary CTATransparent background, border 1px solid #e1e4e8, text #202020 in Inter 500 at 16px, padding 12px 24px, border-radius 8px. No shadow. Sits beside the orange button in the hero.
Top Navigation Bar
Persistent site headerWhite background (#ffffff), full-width with inner max-width container. Left: Whop logo (mark + wordmark). Right: text links 'For enterprise', 'API', 'Sign in' in Inter 14px weight 500, color #646464. No border, no shadow — floats on the canvas.
Display Headline
Hero and section-level titlesacidGrotesk weight 700, 56px for section headings, up to 128px for hero, line-height 1.00, letter-spacing -0.03em, color #202020. No color, no decoration — the type does all the work.
Phone Mockup Card
Product showcase tile in horizontal scroll galleriesWhite surface (#ffffff), border-radius 24px, 24px padding, contains a full phone screenshot. No border or shadow — the card is defined purely by its soft radius against the #f9f9f9 canvas. Arranged in a horizontal row with 24px gaps, overflow scrolls.
Tab Navigation (Pill Group)
Switches between embed component examples (Checkout, Wallet, Chat)Contained pill group with rounded container. Active tab: white background with subtle shadow or border, Inter 14px weight 600, #202020 text. Inactive tabs: transparent, #646464 text, no border. Container radius 8px, individual tabs have no radius — they fill the container.
Code Editor Panel
Shows code snippets for embed componentsDark surface (#0a0a0a or near-black), border-radius 12-16px, contains monospace text in Geist Mono 13-14px. Terminal prompt prefix, syntax-colored tokens (blue, red, orange, violet) against the dark ground. The only place a dark surface appears.
Footer
Minimal site footerWhite or canvas background, single row of text links: 'How it works', 'Mission', 'Press', 'Brand', 'Legal', 'Status' in Inter 13px weight 400, #646464 color. Social icons (YouTube, X, Instagram) right-aligned as outlined icons in #646464.
Category Label (Showcase Section)
Labels above each phone mockup (Agency, Game, Service business, etc.)Inter 14px weight 500, #202020, centered above each phone card. Acts as a subheading for the showcase tiles.
Hero Section
Full-viewport above-the-fold areaFull-width #f9f9f9 background, centered content stack: display headline at 56-128px, then a row of two buttons (orange CTA + ghost) with 16px gap, vertically centered in the viewport. 64px gap between headline and button row.
Surfaces & elevation
Level 0
Canvas
#f9f9f9Page background — every section sits on this near-white
Level 1
Card
#ffffffElevated content containers, phone mockups, code panels
Level 2
Dark Surface
#0a0a0aInverted code-editor and dark-mode product surfaces
Level 3
Accent Surface
#fa4616Primary CTA button fill — the only chromatic surface
The system deliberately avoids soft drop shadows. The only shadow in the entire palette is a hard 3px offset in burnt orange beneath the primary button — a flat, sticker-like depth cue rather than a realistic elevation shadow. All other elements rely on surface color and border contrast for separation.
Primary CTA Button
rgb(182, 38, 0) 0px 3px 0px 0px
Layout & imagery
Layout
Full-bleed sections on #f9f9f9 canvas with max-width 1200px centered content containers. Hero is a centered headline + dual-button stack, vertically centered in the viewport with generous whitespace. Subsequent sections alternate between centered text blocks and product showcase rows — a horizontal scroll of 24px-radius phone mockup cards with category labels above. The embed components section uses a tabbed switcher (pill group) with a split layout: code editor on one side, phone mockup on the other. Navigation is a single white top bar with logo left and three text links right. Footer is a single minimal row of links + social icons. Section gaps of 64-80px create a calm, confident vertical rhythm.
Imagery
Imagery is entirely product-driven: phone mockups showing real product screens (social feeds, game UIs, service booking apps) with no lifestyle photography or decorative illustration. Phone mockups are presented as white-bezel devices at slight angles or straight-on, floating on the #f9f9f9 canvas with no shadows. Social icons in the footer are simple outlined glyphs in #646464. The visual language is screenshots-as-hero — the product interface is the brand imagery.
Design notes
Agent Guide
**Quick Color Reference:** - Background: #f9f9f9 (Mist) — page canvas - Card surface: #ffffff (Snow) — elevated containers - Text: #202020 (Carbon) — primary - Muted text: #646464 (Slate) — secondary - Border: #e1e4e8 (Silver) — hairline dividers - primary action: no distinct CTA color **Example Component Prompts:** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. **Phone Mockup Card**: White surface #ffffff, border-radius 24px, padding 24px, containing a phone screenshot at full width. Label above: 'Agency' in Inter 14px weight 500, #202020, centered. 24px gap between cards in a horizontal row. 3. **Tab Navigation**: Pill container with #e1e4e8 background, border-radius 8px. Three tabs: 'Checkout' (active: white background, #202020 text, Inter 600 14px), 'Wallet' (inactive: transparent, #646464 text), 'Chat' (inactive: transparent, #646464 text). 12px horizontal padding per tab. 4. **Code Editor Panel**: Dark surface #0a0a0a, border-radius 12px, padding 24px. Terminal prompt '$ npm install @whop/checkout' in Geist Mono 14px weight 500, #ffffff text. No border, no shadow. 5. **Top Navigation**: White #ffffff background, full-width. Left: 'Whop' logo (mark + wordmark in #202020). Right: 'For enterprise', 'API', 'Sign in' in Inter 14px weight 500, #646464, 24px gap between links. No border, no shadow.
Similar brands
Linear
Same approach of one chromatic accent on a light canvas with generous spacing and tight geometric type for headlines
Stripe
Similar clean light-mode product showcase with phone mockups floating on near-white backgrounds, centered hero headlines
Vercel
Shared minimal light aesthetic with a single bold accent color and oversized display headlines, comfortable density
Cal.com
Similar flat light surfaces with pillowy card radii and a single saturated brand color as the only chromatic element
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
