whop.com — Design System
1. Visual Theme & Atmosphere
Whop occupies the intersection of SaaS ambition and underground-internet energy. The dominant mode is dark — near-black backgrounds with high-contrast off-white text — but the brand refuses to be merely “another dark app.” It injects electric bursts of electric-lemon yellow (#dbf505) and searing orange-red (#fa4616) into an otherwise restrained palette, signalling speed, novelty, and irreverence. The overall atmosphere reads like a neon sign in a blacked-out room: precise, intentional, impossible to ignore. The dual-typeface strategy — a custom grotesque for display, Inter for everything else — keeps the brand voice confident without becoming chaotic.
2. Color Palette & Roles
Background & Surfaces
| Role | Value | Usage |
|---|---|---|
| Page canvas | #111111 |
Main content area, section backgrounds |
| Overlay/frosted panel | rgba(29,29,29,0.85) |
Sticky header — glassmorphic dark panel |
| Elevated surface | #222222 |
Cards, modals |
| Light frosted | #f9f9f9 |
Occasional light-mode inset components |
Text
| Role | Value | Usage |
|---|---|---|
| Primary text (dark surfaces) | #eeeeee |
Body copy on dark |
| Primary text (light surfaces) | #202020 |
Body copy on light |
| Muted | #484848 |
Secondary labels, captions |
Brand & Accent
| Role | Value | Usage |
|---|---|---|
| Blue (CTA) | #1754d8 |
Primary action buttons, links |
| Lemon yellow | #dbf505 |
Hero badges, highlight banners, energy accents |
| Orange-red | #fa4616 |
Warning badges, pricing highlights, urgency signals |
| Orange tint | rgba(255,40,0,0.176) |
Soft background for orange-bordered elements |
Borders & Dividers
- Light border (dark context):
rgba(255,255,255,0.106) - Dark border (light context):
rgba(0,0,0,0.12)
3. Typography Rules
Whop uses a two-tier font system. AcidGrotesk — a custom display grotesque — owns all headline moments. Inter handles everything functional.
| Selector | Font | Size | Weight | Line Height | Tracking |
|---|---|---|---|---|---|
| H1 | AcidGrotesk | 80px | 700 | 88px | −4.45px |
| H2 | AcidGrotesk | 40px | 500 | 44px | −2.225px |
| Body | Inter | 16px | 400 | 24px | normal |
| Paragraph | Inter | 24px | 400 | 30px | −0.39px |
| Button | Inter | 16px | 500 | 24px | −0.18px |
The aggressive negative tracking on headlines (−4.45px at 80px) is a deliberate compression that makes large type feel dense and authoritative. Body paragraph text sits large at 24px — Whop wants copy to be read, not skimmed. No uppercase transforms are used anywhere; the brand speaks in lowercase confidence.
4. Component Styling
Buttons use 1px inset ring shadows to create a subtle depth layer without elevation:
- Light context:
rgba(255,255,255,0.133) 0 0 0 1px inset, rgba(0,0,0,0.05) 0 1px 2px - Dark context:
rgba(0,0,0,0.12) 0 0 0 1px inset, rgba(0,0,0,0.05) 0 1px 2px
Border radii range from 8px (tight inputs, small chips) to 24px (large cards, hero panels). The 1.12px micro-radius on certain elements suggests precise sub-pixel rendering for icon containers.
Badges combine colored backgrounds (bg-lemon-9, bg-orange-9) with matching text at full saturation — no tinting or desaturation for these; they’re meant to pop hard.
Nav header is frosted glass: rgba(29,29,29,0.85) with an 8px vertical padding and a near-invisible white border (rgba(255,255,255,0.106)), giving it a floating feel.
5. Layout Principles
Layout is full-bleed, section-by-section with zero padding at the section and main level — all spacing lives inside components. The header sits at 8px 0 padding, slim and sticky. No max-width container is exposed in the CSS snapshot, suggesting wide or full-viewport layouts with internal column constraints. The dark main canvas extends edge-to-edge, reinforcing immersion.
6. Depth & Elevation
Depth is achieved almost exclusively through color layering and inset ring shadows rather than traditional drop shadows. The elevation ladder reads:
#111111— base canvas (darkest)#222222— raised cardsrgba(29,29,29,0.85)— floating header (blur implied by frosted class)#f9f9f9/ white — highest contrast insets (light-on-dark)
There are no large ambient drop shadows. The inset 1px ring technique is the primary depth signal — minimal, structural, unobtrusive.
7. Do’s and Don’ts
Do:
- Use lemon or orange accent only for a single element per view — scarcity is what makes them land
- Apply negative letter-spacing to all display text (at least −0.5% at large sizes)
- Keep structural UI on dark surfaces; reserve white surfaces for focused content insets
- Use Inter at 500 weight for buttons; never 400
Don’t:
- Use AcidGrotesk below 32px — it loses its character and becomes noise
- Mix lemon and orange in the same visual zone; they clash rather than harmonise
- Add elevation drop-shadows — the brand lives in flatness punctuated by inset rings
- Use any uppercase transforms; the voice is lowercase
8. Responsive Behavior
No explicit breakpoint data was captured in the CSS snapshot. Based on structural signals: sections are full-bleed at all widths, header collapses to minimal padding. The 24px paragraph size likely scales down on mobile (Inter handles this gracefully). The aggressive H1 tracking (−4.45px) should be proportionally reduced at smaller type sizes.
9. Agent Prompt Guide
Build a dark-mode SaaS landing section in the style of whop.com. Use a near-black background (
#111111), off-white text (#eeeeee), and AcidGrotesk (or any condensed grotesque) for headlines at 80px/700 weight with −4.45px letter-spacing. Inject a single electric-lemon (#dbf505) or orange-red (#fa4616) badge for energy. Body copy uses Inter 24px/400. Buttons carry an inset 1px ring shadow. Border radii: 8–24px. No drop shadows. No uppercase. Keep section padding internal to components — main and section elements have no padding themselves.
Generated by Sparkbites — extracted from live CSS analysis
