whop___style_reference:
  info: "> Bold sticker on cream paper — a minimal light canvas with a single orange button that casts a hard burnt-orange shadow."

  theme: "light"

  info: "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."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ember Orange | `#fa4616` | `--color-ember-orange` | Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |"
    info: "| Ember Shadow | `#b62600` | `--color-ember-shadow` | Hard 3px offset shadow beneath Ember Orange buttons — a deeper burnt orange instead of a soft drop shadow |"
    info: "| Carbon | `#202020` | `--color-carbon` | Primary text, heading strokes, heavy borders, icon fills |"
    info: "| Snow | `#ffffff` | `--color-snow` | Card surfaces, button text on dark fills, the elevated layer above the page canvas |"
    info: "| Mist | `#f9f9f9` | `--color-mist` | Page canvas — the near-white background that all sections sit on |"
    info: "| Silver | `#e1e4e8` | `--color-silver` | Hairline dividers, card borders, subtle structural separators |"
    info: "| Slate | `#646464` | `--color-slate` | Muted body text, secondary links, inactive nav items, mid-weight borders |"
    info: "| Ash | `#838383` | `--color-ash` | Tertiary text, placeholder text, disabled labels |"
    info: "| Pearl | `#bbbbbb` | `--color-pearl` | Light borders, icon outlines, low-emphasis strokes |"
    info: "| Obsidian | `#0a0a0a` | `--color-obsidian` | Dark surface variant for inverted cards or code-editor panels |"

  tokens___typography:

    acidgrotesk___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_____font_acidgrotesk:
      - "**Substitute:** Inter Tight at weight 800, or Space Grotesk Bold"
      - "**Weights:** 700"
      - "**Sizes:** 56px, 128px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.0300em (constant across all sizes)"
      - "**Role:** 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."

    inter___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_____font_inter:
      - "**Substitute:** Inter (native) or system-ui, -apple-system, sans-serif"
      - "**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"
      - "**Role:** 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)."

    geist_mono___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_____font_geist_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, ui-monospace"
      - "**Weights:** 500, 600"
      - "**Sizes:** 12px, 13px, 14px, 16px"
      - "**Line height:** 1.50–1.70"
      - "**Role:** 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."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.32px | `--text-subheading` |"
      info: "| heading | 56px | 1 | -1.68px | `--text-heading` |"
      info: "| display | 128px | 1 | -3.84px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| buttons | 8px |"
      info: "| smallElements | 4px |"
      info: "| largeContainers | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(182, 38, 0) 0px 3px 0px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64-80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 24px"

  components:

    primary_cta_button:
      role: "The singular high-emphasis action — the only chromatic button in the system"

      info: "Background #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:
      role: "Low-emphasis action paired with the primary CTA"

      info: "Transparent 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:
      role: "Persistent site header"

      info: "White 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:
      role: "Hero and section-level titles"

      info: "acidGrotesk 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:
      role: "Product showcase tile in horizontal scroll galleries"

      info: "White 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:
      role: "Switches between embed component examples (Checkout, Wallet, Chat)"

      info: "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:
      role: "Shows code snippets for embed components"

      info: "Dark 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:
      role: "Minimal site footer"

      info: "White 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:
      role: "Labels above each phone mockup (Agency, Game, Service business, etc.)"

      info: "Inter 14px weight 500, #202020, centered above each phone card. Acts as a subheading for the showcase tiles."

    hero_section:
      role: "Full-viewport above-the-fold area"

      info: "Full-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."

  do_s_and_don_ts:

    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"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f9f9f9` | Page background — every section sits on this near-white |"
    info: "| 1 | Card | `#ffffff` | Elevated content containers, phone mockups, code panels |"
    info: "| 2 | Dark Surface | `#0a0a0a` | Inverted code-editor and dark-mode product surfaces |"
    info: "| 3 | Accent Surface | `#fa4616` | Primary CTA button fill — the only chromatic surface |"

  elevation:

    - "**Primary CTA Button:** `rgb(182, 38, 0) 0px 3px 0px 0px`"

  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."

  layout:

    info: "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."

  agent_prompt_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:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "**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."

    - "**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."

    - "**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."

    - "**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"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ember-orange: #fa4616;
          --color-ember-shadow: #b62600;
          --color-carbon: #202020;
          --color-snow: #ffffff;
          --color-mist: #f9f9f9;
          --color-silver: #e1e4e8;
          --color-slate: #646464;
          --color-ash: #838383;
          --color-pearl: #bbbbbb;
          --color-obsidian: #0a0a0a;
        
          /* Typography — Font Families */
          --font-acidgrotesk: 'acidGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.32px;
          --text-heading: 56px;
          --leading-heading: 1;
          --tracking-heading: -1.68px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -3.84px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-buttons: 8px;
          --radius-smallelements: 4px;
          --radius-largecontainers: 16px;
        
          /* Shadows */
          --shadow-subtle: rgb(182, 38, 0) 0px 3px 0px 0px;
        
          /* Surfaces */
          --surface-canvas: #f9f9f9;
          --surface-card: #ffffff;
          --surface-dark-surface: #0a0a0a;
          --surface-accent-surface: #fa4616;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ember-orange: #fa4616;
          --color-ember-shadow: #b62600;
          --color-carbon: #202020;
          --color-snow: #ffffff;
          --color-mist: #f9f9f9;
          --color-silver: #e1e4e8;
          --color-slate: #646464;
          --color-ash: #838383;
          --color-pearl: #bbbbbb;
          --color-obsidian: #0a0a0a;
        
          /* Typography */
          --font-acidgrotesk: 'acidGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.32px;
          --text-heading: 56px;
          --leading-heading: 1;
          --tracking-heading: -1.68px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -3.84px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        
          /* Shadows */
          --shadow-subtle: rgb(182, 38, 0) 0px 3px 0px 0px;
        }