---
title: "Whop design system"
variant: extended
source: https://whop.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/whop-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Whop · Design System

> A bright, bold canvas for building businesses

**Theme:** light · **Industry:** ai · **Source:** https://whop.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Whop’s homepage pairs generous white space and oversized black typography with vivid orange calls to action. Business illustrations and product previews make the platform tangible without disrupting the clean, editorial flow.

## North star

Keep the page mostly white and let oversized dark type, real product previews, and precise orange accents carry the story.

## Overview

Whop builds its visual identity around a clean white canvas, using black and charcoal typography for structure and a concentrated vivid orange for emphasis. The header is restrained, while the centered hero stages large display text, playful business-themed illustrations, a compact CTA, and ample surrounding whitespace. Lower sections shift between a left-aligned business statistic with a live activity card, a centered row of diverse product previews, and a developer-focused embed showcase. The orange full-width CTA band creates the page’s strongest visual break before a quiet multi-column footer. Acid Grotesk gives display headlines a distinctive, tightly tracked shape; Inter handles interface text and supporting copy. The overall layout is spacious but purposeful, with repeated CTA buttons and section transitions guiding the scroll. Product imagery is treated as contained previews rather than decorative backgrounds, so the typography and orange accents remain the dominant brand signals.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas across the header, hero, feature sections, and footer. |
| Soft Concrete | `#f0f0f0` | `--color-soft-concrete` | surface | Pale surface for repeated AI creation cards and secondary interface areas. |
| Whop Orange | `#fa4616` | `--color-whop-orange` | brand | Signature emphasis in hero text and buttons, plus the full-width closing CTA band. |
| Muted Graphite | `#646464` | `--color-muted-graphite` | neutral | Secondary copy and quiet footer or button text. |
| Near Black | `#202020` | `--color-near-black` | neutral | Primary heading, body, and navigation text on the white canvas. |
| Card Hairline | `#d9d9d9` | `--color-card-hairline` | semantic | Fine outlines around pale creation cards and subtle interface boundaries. |
| Section Divider | `#e0e0e0` | `--color-section-divider` | semantic | Light separators and card or footer boundaries; a quieter line than the main card outline. |
| Stone Gray | `#838383` | `--color-stone-gray` | neutral | Low-emphasis text or controls, mainly in supporting interface details. |
| Sky Accent | `#79c0ff` | `--color-sky-accent` | accent | Occasional blue text accent; secondary to orange and mostly used in interface or product details. |
| Deep Ink | `#0a0a0a` | `--color-deep-ink` | surface | Dark inset surface within card or product-interface content, not a page-wide background. |
| Pale Sky | `#a5d6ff` | `--color-pale-sky` | accent | Light blue text accent appearing in supporting interface details. |
| Burnt Edge | `#b62600` | `--color-burnt-edge` | semantic | Dark orange edge or shadow detail beneath the bright primary CTA. |
| Coral Note | `#ff7b72` | `--color-coral-note` | accent | Sporadic warm-colored text within supporting content, not a core section color. |
| Quiet Gray | `#8d8d8d` | `--color-quiet-gray` | neutral | Muted secondary text in interface previews and low-priority copy. |
| Silver Note | `#b5b5b5` | `--color-silver-note` | neutral | Light-gray text details, mainly in compact supporting interface content. |
| Lilac Note | `#d2a8ff` | `--color-lilac-note` | accent | Rare purple text accent in supporting product or interface details, not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0f0f0` (Soft Concrete) · `--color-surface-2` → `#0a0a0a` (Deep Ink) · `--color-text` → `#202020` (Near Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#646464` (Muted Graphite) · `--color-border` → `#d9d9d9` (Card Hairline) · `--color-accent` → `#fa4616` (Whop Orange) · `--color-accent-2` → `#79c0ff` (Sky Accent) · `--color-accent-3` → `#a5d6ff` (Pale Sky)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#202020` | `#ffffff` | 16.29:1 | AAA |
| `#202020` | `#f0f0f0` | 14.3:1 | AAA |
| `#202020` | `#0a0a0a` | 1.22:1 | fail |
| `#ffffff` | `#f0f0f0` | 1.14:1 | fail |
| `#ffffff` | `#0a0a0a` | 19.8:1 | AAA |
| `#646464` | `#ffffff` | 5.92:1 | AA |
| `#646464` | `#f0f0f0` | 5.19:1 | AA |
| `#646464` | `#0a0a0a` | 3.35:1 | AA-large |
| `#fa4616` | `#ffffff` | 3.53:1 | AA-large |
| `#fa4616` | `#f0f0f0` | 3.1:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 700, 400, 600 | Navigation, body copy, buttons, captions, and supporting interface text. | Inter |
| Acid Grotesk | `--font-display` | webfont | 500, 700 | Display headline and primary hero heading. | Space Grotesk |

- **Inter:** Neutral sans-serif for utility and readability; measured weights span regular to bold, with compact, lightly tracked interface text.
- **Acid Grotesk:** Use a bold display voice with tight negative tracking; headlines are compact and set in sentence case.

### Type scale — Custom (ratio ≈ 2.091, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 128px | 700 | 1 | -0.03em | — | Acid Grotesk | Oversized brand or campaign display headlines where present. |
| h1 | 56px | 500 | 1 | -0.03em | — | Acid Grotesk | Primary hero and major section headlines. |
| h2 | 20px | 400 | 1.4 | -0.009em | — | Inter | Supporting section headings and prominent explanatory copy. |
| body | 14px | 500 | 1.7 | 0 | — | Inter | General explanatory text, navigation details, and feature copy. |
| caption | 13px | 400 | 1.4 | -0.014em | — | Inter | Compact labels, preview metadata, and footer details. |
| button | 14px | 500 | 1.43 | -0.006em | — | Inter | CTA labels and concise action text. |

OpenType features in use: `"calt", "liga"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 24, 32, 40, 64, 80, 160 px.
- Section rhythm 64px · element gap 24px · card padding — · max content width 1200px.

Use a centered content frame with a measured maximum width of 1200px, while allowing the orange CTA section to run full bleed. The opening hero is centered and unusually spacious; later content alternates between a left-aligned statistic-and-card split and centered product or developer showcases. Keep section gaps generous, with comfortable rather than dense content grouping. Align the footer columns to the left and maintain a clear hierarchy between its headings and link lists. The overall page is a vertical sequence of distinct blocks, not a tightly packed dashboard.

## Shape & elevation

- Radius: button `8px` · card `24px` · xs `8px` · sm `16px` · md `24px` · pill `9999px`
- Shadow `hairline` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(182, 38, 0) 0px 3px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Favor flat white sections and fine gray borders over ambient shadows. Cards read as contained product surfaces with rounded corners and restrained outlines. The primary orange CTA may use a distinct darker lower edge, producing a compact, tactile button effect. Avoid layering decorative shadows across the page.

## Imagery

Use crisp product screenshots, mobile interface previews, and business-themed illustrated objects rather than lifestyle photography. The hero’s storefront, megaphone, and checkout imagery sits in a loose horizontal arrangement between large headline lines. Product mockups are displayed as contained vertical previews, while the developer section pairs a dark code panel with a phone checkout screen. Keep media centered, cleanly framed, and subordinate to the whitespace around it.

## Components

### Header navigation

A slim white header with the Whop mark at left and understated enterprise, API, and sign-in links at right; a subtle bottom divider separates it from the page.

### Hero composition

Centered display headline with orange-highlighted wording, a row of business illustrations, a second dark headline, and a compact orange Get Started CTA.

### Primary CTA button

Orange filled button with white label, rounded corners, and a darker orange lower edge; repeat at key conversion points.

### Business proof block

Large monetary proof statement on the left, paired with a bordered live-activity card on the right.

### Creation preview cards

Pale cards with subtle gray borders and rounded corners, each representing a business type or AI creation entry point.

### Embed showcase

A centered product explanation supported by tab-like controls, dark code imagery, and a phone checkout preview.

### Footer link columns

Quiet white footer with grouped link lists, small headings, brand mark, and low-contrast legal details.

### Measured component styles

- **Primary button** (“Get Started”): transparent background · text #202020 · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Click to create with Whop AI”): background #f0f0f0 · text #202020 · border 1px solid #d9d9d9 · radius 24px · padding 0px · 400 16px Inter
- **Navigation item** (“For enterprise API Sign in”): transparent background · text #202020 · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep the canvas predominantly white.
- Reserve Whop Orange for key emphasis and conversion actions.
- Use Acid Grotesk for display headlines and Inter for utility text.
- Give major sections generous whitespace.
- Show product previews as contained, readable interface imagery.
- Use subtle gray hairlines to separate cards and footer areas.

## Don't

- Do not turn the page into a dark interface.
- Do not spread orange across large areas except the closing CTA band.
- Do not crowd the hero with extra copy or controls.
- Do not replace product previews with generic stock photography.
- Do not add gradients or ambient shadows without evidence.
- Do not make the footer visually louder than the main content.

## Agent prompt

Build a new Whop-style business platform page on a Gallery White (#ffffff) canvas. Use Near Black (#202020) for headings and core copy, with Acid Grotesk-like bold, tightly tracked display headlines and Inter for navigation, body text, captions, and controls. Apply Whop Orange (#fa4616) selectively to highlighted words, prominent CTA buttons, and—if the page needs a closing conversion moment—a full-width CTA band. Keep the layout spacious and centered within the measured 1200px maximum width, with a centered hero, clear alternating content blocks, and a restrained multi-column footer. Present business illustrations and interface previews as clean, contained media. Use Soft Concrete (#f0f0f0) card surfaces with Card Hairline (#d9d9d9) outlines, minimal elevation, and no ornamental gradients. Maintain strong contrast and a clear scroll rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and illustration stack with header navigation above and compact footer links below. | Primary Get Started CTA, Secondary How it works link, Persistent destination links | Orange-highlighted headline words, Business illustration row, Subtle header and footer dividers |
| 2 | stats | Left-aligned proof statement balanced by a live activity card on the right. | Get Started conversion action, Live activity social proof | Large monetary figure, Bordered activity card, White background |
| 3 | gallery | Centered heading above a horizontal row of varied business and mobile product previews. | Browse business examples, Creation CTA, Carousel-style navigation | Multiple vertical previews, Compact category labels, Rounded preview cards |
| 4 | integrations | Centered introduction and controls above a code-and-phone product demonstration. | Switch component tabs, Get Started action | Dark code preview, Phone checkout mockup, Centered product composition |
| 5 | cta | Full-width orange band with centered white headline and light button. | Single conversion action | Solid orange background, White display text, Contrasting button |
| 6 | footer | White footer with grouped link columns, brand mark, and a slim legal row. | Grouped destination links, Legal and policy links | Small column headings, Muted link text, Subtle horizontal divider |

## Source CSS custom properties (selected)

```css
--whop-font-inter: "Inter","Inter Fallback";
--font-geist-sans: "Geist Variable";
--network-surface-charcoal: #151515;
--network-surface-charcoal-dark: #0f0e0d;
--network-surface-primary: #fff;
--network-surface-secondary: #faf8f6;
--network-surface-tertiary: #f5f0eb;
--network-surface-purple: #171721;
--network-surface-purple-dark: #10101a;
--network-text-primary: #000000e6;
--network-text-secondary: #000000bf;
--network-text-tertiary: #0009;
--network-text-inverse-primary: #fff;
--network-text-inverse-secondary: #ffffffbf;
--network-text-inverse-tertiary: #ffffff80;
--color-page-background: white;
--c15t-primary: hsl(228, 100%, 60%);
--c15t-primary-hover: hsl(228, 100%, 55%);
--c15t-surface: hsl(0, 0%, 100%);
--c15t-surface-hover: hsl(0, 0%, 98%);
--c15t-border: hsl(0, 0%, 90%);
--c15t-border-hover: hsl(0, 0%, 85%);
--c15t-text: hsl(0, 0%, 10%);
--c15t-text-muted: hsl(0, 0%, 40%);
--c15t-text-on-primary: hsl(0, 0%, 100%);
--c15t-font-family: system-ui, -apple-system, sans-serif;
--c15t-font-size-sm: 0.875rem;
--c15t-font-size-base: 1rem;
--c15t-font-size-lg: 1.125rem;
--c15t-font-weight-normal: 400;
--c15t-font-weight-medium: 500;
--c15t-font-weight-semibold: 600;
--c15t-space-xs: 0.25rem;
--c15t-space-sm: 0.5rem;
--c15t-space-md: 1rem;
--c15t-space-lg: 1.5rem;
--c15t-space-xl: 2rem;
--c15t-radius-sm: 0.25rem;
--c15t-radius-md: 0.5rem;
--c15t-radius-lg: 0.75rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/whop-com