---
name: Lemon Squeezy
tagline: A dark hero with white Circular display, signature lemon-yellow #ffc233 accent, and very-rounded 40px white pill CTAs — playful-but-pro payments for software.
updated_at: 2026-05-29T00:00:00.000Z
published_at: 2026-05-28T23:12:35.496Z
author: webdesignhot
source_url: https://www.lemonsqueezy.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas]
tags: [light, dark, playful, sans, creator, commerce, yellow]
preview_swatch: ['#ffffff', '#ffc233', '#5423e7']
related: []
description: 'Lemon Squeezy is the payments, tax, and subscription merchant-of-record built for software companies (now Stripe-owned). Its identity reads playful-but-pro: a dark near-black hero carrying white Circular display headlines at 80px over Inter body in #121217, a signature lemon-yellow #ffc233 banner/accent, a purple #5423e7 secondary, and unmistakably friendly white pill CTAs at a 40px radius. The yellow is the brand — a single warm chromatic against generous white canvas and one dark inversion band.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent
  muted: text-muted
  border: border

colors:
  # Primary
  bg: '#ffffff'                    # primary white canvas
  bg-dark: '#121217'              # near-black hero / inversion band
  bg-dark-2: '#1c1c24'           # raised dark surface within the band
  surface: '#f6f6f8'             # soft grey panel on white
  surface-2: '#ededf1'           # hover panel
  surface-3: '#e3e3e9'           # pressed panel
  surface-yellow-soft: '#fff3d6' # pale lemon tint for callouts
  surface-purple-soft: '#efe9fd' # pale purple tint for callouts

  # Text
  text: '#121217'                # ink near-black on white
  text-strong: '#000000'        # pure-black emphasis (rare)
  text-muted: '#6b6b76'         # grey caption
  text-soft: '#9a9aa3'          # tertiary
  text-faint: '#c4c4cc'         # disabled
  text-on-dark: '#ffffff'       # white on near-black hero
  text-on-dark-muted: '#b7b7c0' # muted on dark band
  text-on-brand: '#121217'      # ink always on lemon-yellow
  text-on-purple: '#ffffff'     # white on purple secondary

  # Brand
  brand: '#ffc233'              # signature lemon-yellow — the brand
  brand-deep: '#f5b21f'         # deeper lemon for hover on yellow
  brand-pressed: '#e0a318'      # pressed lemon
  accent: '#5423e7'            # purple secondary brand
  accent-deep: '#4a1dcc'        # deeper purple for hover
  accent-pressed: '#3f17b3'     # pressed purple

  # Borders
  border: '#e6e6ec'             # hairline on white
  border-strong: '#121217'      # ink emphasis border
  border-dark: '#2a2a33'        # hairline within dark band
  border-yellow: '#ffc233'      # lemon outline on emphasis

  # Semantic
  success: '#1f9d57'
  success-bg: '#dcf3e6'
  warning: '#d98a00'
  warning-bg: '#fdf0d2'
  danger: '#d92d20'
  danger-bg: '#fde4e1'
  info: '#5423e7'
  info-bg: '#efe9fd'
  on-brand: '#121217'

typography:
  display:
    family: '"Circular", "Circularpro book", "Circular Std", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    weights: [400, 500, 700]
    opentype-features: 'kern, liga'
  body:
    family: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
    opentype-features: 'kern, liga, cv11'
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 80, weight: 400, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-xl:      { size: 64, weight: 700, lineHeight: 1.02, tracking: '-0.025em', family: display }
    display-lg:      { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 40, weight: 700, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h2:              { size: 32, weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h3:              { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h4:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    h5:              { size: 18, weight: 600, lineHeight: 1.4,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    lead:            { size: 22, weight: 400, lineHeight: 1.45, tracking: '-0.005em', family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    button:          { size: 16, weight: 500, lineHeight: 1.2,  tracking: '0',        family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    eyebrow:         { size: 12, weight: 600, lineHeight: 1.4,  tracking: '0.08em',   family: body }
    code:            { size: 14, weight: 400, lineHeight: 1.6,  tracking: '0',        family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  xxl: 24
  featured: 24
  pill: 40

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120, 160]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64
  hero-y: 120
  section-y: 96
  gutter: 24

components:
  button-primary:
    bg: '#ffffff'
    text: '#121217'
    radius: 40
    paddingX: 20
    paddingY: 12
    font: 'Inter 500 / 16px'
    hover: 'bg #f6f6f8 + slight lift'
    use: 'white pill CTA on dark hero / yellow band'
  button-yellow:
    bg: '#ffc233'
    text: '#121217'
    radius: 40
    paddingX: 20
    paddingY: 12
    font: 'Inter 500 / 16px'
    hover: 'bg #f5b21f'
    use: 'primary CTA on white canvas — the lemon button'
  button-purple:
    bg: '#5423e7'
    text: '#ffffff'
    radius: 40
    paddingX: 20
    paddingY: 12
    font: 'Inter 500 / 16px'
    hover: 'bg #4a1dcc'
    use: 'secondary brand CTA'
  button-ghost:
    bg: 'transparent'
    text: '#121217'
    border: '1px solid #e6e6ec'
    radius: 40
    paddingX: 20
    paddingY: 12
    font: 'Inter 500 / 16px'
    hover: 'bg #f6f6f8'
    use: 'tertiary action on white'
  button-on-dark:
    bg: 'rgba(255,255,255,0.1)'
    text: '#ffffff'
    border: '1px solid rgba(255,255,255,0.2)'
    radius: 40
    paddingX: 20
    paddingY: 12
    font: 'Inter 500 / 16px'
    hover: 'bg rgba(255,255,255,0.16)'
    use: 'secondary action inside the dark hero band'
  card-default:
    bg: '#ffffff'
    radius: 16
    padding: 24
    border: '1px solid #e6e6ec'
    shadow: '0 1px 3px rgba(18,18,23,0.06), 0 8px 24px rgba(18,18,23,0.05)'
  card-dark:
    bg: '#1c1c24'
    radius: 16
    padding: 24
    border: '1px solid #2a2a33'
    shadow: 'none'
    use: 'card sitting inside the dark band'
  input-text:
    bg: '#ffffff'
    border: '1px solid #e6e6ec'
    radius: 8
    paddingX: 12
    paddingY: 10
    focus: 'border #5423e7 + ring 3px rgba(84,35,231,0.18)'
  badge-yellow:
    bg: '#ffc233'
    text: '#121217'
    radius: 40
    paddingX: 10
    paddingY: 4
    font: 'Inter 600 / 12px'
  badge-purple:
    bg: '#efe9fd'
    text: '#5423e7'
    radius: 40
    paddingX: 10
    paddingY: 4
    font: 'Inter 600 / 12px'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
  ease-soft: 'cubic-bezier(0.45, 0, 0.55, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  duration-cinematic: 520
  reduced-motion: 'respects prefers-reduced-motion: reduce — lemon/confetti flourishes become static, hover lifts drop translate but keep color, scroll reveals collapse to opacity-only fade'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'
  ambient: '0 1px 3px rgba(18,18,23,0.06)'
  standard: '0 1px 3px rgba(18,18,23,0.06), 0 8px 24px rgba(18,18,23,0.05)'
  elevated: '0 12px 32px rgba(18,18,23,0.10)'
  deep: '0 24px 64px rgba(18,18,23,0.14)'
  ring: '0 0 0 3px rgba(84,35,231,0.18)'

accessibility:
  contrast-text-on-bg: 18.7            # AAA — #121217 on white
  contrast-muted-on-bg: 5.3            # AA body, AAA large — #6b6b76 on white
  contrast-text-on-brand: 11.6         # AAA — #121217 on #ffc233 lemon
  contrast-white-on-dark: 18.7         # AAA — white on #121217 hero
  contrast-text-on-pill: 18.7          # AAA — #121217 on white pill
  contrast-white-on-purple: 7.6        # AAA large, AA all — #ffffff on #5423e7
  focus-ring: '3px ring rgba(84,35,231,0.18) on light surfaces; 3px rgba(255,194,51,0.6) lemon ring on dark band'
  reduced-motion-honored: true
  keyboard-nav: 'visible focus on every interactive; purple ring on light, lemon ring on dark'

dark-mode: optional                  # Marketing site is light-first with a recurring dark hero/inversion band; no global dark toggle

lineage:
  summary: 'Lemon Squeezy sits in the friendly geometric-sans, single-accent SaaS lineage — Circular as display, Inter as body, generous white canvas, and one warm chromatic (lemon-yellow #ffc233) doing the personality work. Its 40px pill CTAs and soft ambient shadows place it in the rounded, approachable branch of fintech rather than the hard-edged serious-bank branch, and its dark hero with white display signals confidence before dropping to a fast light canvas. The distinctive twist is the citrus identity applied to serious merchant-of-record payments and global tax — playful-but-pro. Now part of Stripe, it keeps its warm, rounded, lemon-yellow identity distinct from Stripe''s cooler, more technical palette.'
  influences:
    - name: Circular / Lineto
      role: Geometric display typeface carrying the friendly-modern voice
      url: https://lineto.com
    - name: Inter
      role: Neutral, highly legible body grotesque
      url: https://rsms.me/inter
    - name: Stripe
      role: Parent company and broader payments-design reference point
      url: https://stripe.com
    - name: Gumroad
      role: Playful creator-commerce sibling with a bright single-accent identity
      url: https://gumroad.com
    - name: Paddle
      role: Merchant-of-record contemporary it competes with on positioning
      url: https://www.paddle.com
---

## 1. Visual Theme & Atmosphere

Lemon Squeezy's marketing site runs on a deliberate contrast: a **dark, near-black `#121217` hero** carrying **white Circular display** headlines at 80px, dropped onto an otherwise generously white canvas. The dark band reads premium and confident; the white canvas below reads light, fast, and friendly. The single warm chromatic that ties the whole thing together is the **signature lemon-yellow `#ffc233`** — used as a banner color, an accent, and the playful primary button on white. Body type is **Inter** at 18px in ink `#121217`, never pure black at body scale, which keeps long-form copy calm against the bright canvas.

The signature compositional move is heroic **Circular** ("Circularpro book") at 80px / white on the dark band, with a single line of marketing copy and an unmistakable **white pill CTA at a 40px radius** sitting directly below. Those very-rounded pills are the most recognizable shape decision in the system — they are friendly to the point of being toy-like, and they are everywhere: hero CTAs, nav buttons, badges. Where most payments/fintech products lean into hard rectangles and seriousness, Lemon Squeezy leans into soft, confident roundness.

The atmosphere is **playful-but-pro**. Lemon Squeezy is, after all, the merchant-of-record handling **payments, tax, and subscriptions for software companies** (and is now Stripe-owned) — so the underlying product is serious infrastructure. The design resolves that tension by pairing the serious dark hero and precise Inter body with the playful lemon-yellow, the rounded geometric Circular display, and the toy-soft 40px pills. The result is a brand that feels approachable to indie makers and credible to finance teams at the same time.

The chromatic budget is intentionally small. **Lemon-yellow `#ffc233` is the brand**; **purple `#5423e7` is the secondary** that appears in illustration, accent fills, and the occasional secondary CTA. Everything else is white, ink near-black, and a warm-neutral grey scale. There is no third accent color competing for attention — the discipline of "one yellow, one purple, lots of white, one dark band" is what makes the identity feel cohesive rather than busy.

The deeper personality is **citrus-confident**. The lemon motif (the squeeze, the brightness, the freshness) gives the brand a sense of humor without undercutting the trust required to move money. Circular's perfectly geometric, friendly-modern letterforms reinforce the same posture: contemporary, rounded, optimistic, and clean.

**Key Characteristics**
- Dark near-black `#121217` hero band with white Circular display at 80px
- Signature lemon-yellow `#ffc233` as banner color, accent, and playful primary button
- Purple `#5423e7` secondary brand for accents and secondary CTAs
- Very-rounded **40px pill** CTAs — friendly, toy-soft, used everywhere
- White pill CTA (`#ffffff` bg, `#121217` text) is the hero's primary action
- Inter 18px body in ink `#121217`, never pure black at body scale
- Light-first white canvas with one recurring dark inversion band
- Geometric-rounded Circular display vs. neutral Inter body — friendly + legible
- Small chromatic budget: one yellow, one purple, lots of white
- Soft ambient shadows for elevation, not borders — gentle, modern depth

## 2. Color Palette & Roles

### Primary

- **bg** (`#ffffff`): the primary white canvas — most of the page
- **bg-dark** (`#121217`): near-black hero and inversion band — white type sits on it
- **bg-dark-2** (`#1c1c24`): raised dark surface (cards within the dark band)
- **text** (`#121217`): ink near-black body on white — never pure `#000`
- **text-on-dark** (`#ffffff`): white type on the dark hero/band
- **on-brand** (`#121217`): ink always sits on the lemon-yellow

### Brand

- **brand** (`#ffc233`): the signature lemon-yellow — the brand, exact not approximate
- **brand-deep** (`#f5b21f`): deeper lemon for hover on yellow surfaces
- **brand-pressed** (`#e0a318`): pressed lemon
- **accent** (`#5423e7`): purple secondary brand — accents, illustration, secondary CTA
- **accent-deep** (`#4a1dcc`): deeper purple for hover
- **accent-pressed** (`#3f17b3`): pressed purple

### Accent

- **surface-yellow-soft** (`#fff3d6`): pale lemon tint for "tip" callouts and highlight rows
- **surface-purple-soft** (`#efe9fd`): pale purple tint for callouts and purple badges

The accent system is two-color only — lemon and purple — and the soft tints are how those colors appear as backgrounds without overpowering. There is no third chromatic accent; the page leans on white and the dark band to carry the rest.

### Interactive

- **link**: `#5423e7` purple, no underline at rest
- **link-hover**: `#5423e7` with 1px underline + slight darken to `#4a1dcc`
- **link-on-dark**: `#ffffff` with 60% opacity at rest, full white on hover
- **selected**: `rgba(255,194,51,0.35)` — lemon highlight
- **disabled**: `#c4c4cc` text on `#f6f6f8` surface

### Neutral Scale

- **text** `#121217` — ink near-black body
- **text-strong** `#000000` — pure black, emphasis only (rare)
- **text-muted** `#6b6b76` — grey caption / secondary copy
- **text-soft** `#9a9aa3` — tertiary, metadata
- **text-faint** `#c4c4cc` — disabled
- **text-on-dark-muted** `#b7b7c0` — muted copy inside the dark band

The neutrals are **near-neutral with the faintest cool-violet cast** — they sit comfortably next to the purple secondary while staying quiet on white. Grey is never warm-brown here; the bias is toward the cool side of neutral.

### Surface & Borders

- **surface** `#f6f6f8` — soft grey panel on white
- **surface-2** `#ededf1` — hover panel
- **surface-3** `#e3e3e9` — pressed panel
- **border** `#e6e6ec` — hairline border on white (1px)
- **border-strong** `#121217` — ink emphasis border (rare, intentional)
- **border-dark** `#2a2a33` — hairline within the dark band
- **border-yellow** `#ffc233` — lemon outline for emphasis chips

### Shadow Colors

Lemon Squeezy uses **soft ambient shadows** for elevation rather than heavy borders. Shadows are tinted with the ink color at low opacity (`rgba(18,18,23,...)`) so they read as a gentle, modern lift rather than a hard drop. The dark band uses no shadow — depth there comes from the `#1c1c24` raised surface tone instead.

- **shadow-ambient** `0 1px 3px rgba(18,18,23,0.06)` — resting hairline lift
- **shadow-standard** `0 1px 3px rgba(18,18,23,0.06), 0 8px 24px rgba(18,18,23,0.05)` — default card
- **shadow-elevated** `0 12px 32px rgba(18,18,23,0.10)` — hover / floating
- **shadow-deep** `0 24px 64px rgba(18,18,23,0.14)` — modals, popovers
- **focus-ring** `0 0 0 3px rgba(84,35,231,0.18)` — purple focus halo

### Semantic

- **success** `#1f9d57` on `#dcf3e6` — fresh green
- **warning** `#d98a00` on `#fdf0d2` — amber, kin to the lemon
- **danger** `#d92d20` on `#fde4e1` — restrained red
- **info** `#5423e7` on `#efe9fd` — the purple doubles as info

## 3. Typography Rules

### Font Family

- **Display**: Circular ("Circularpro book") — Laurenz Brunner's geometric sans, friendly and perfectly rounded. Used for hero, all headings, and big marketing lines. The geometric `o` and single-story `a` carry the optimistic, modern voice.
- **Body**: Inter — the workhorse neo-grotesque, used at 400/500/600 for body, leads, labels, and buttons. Highly legible at every size, calm against the bright canvas.
- **Mono**: SF Mono / JetBrains Mono — code samples, API snippets, version strings, amounts in technical contexts.
- **OpenType**: `kern, liga` on Circular; `kern, liga, cv11` (single-story Inter `a`/`g` alternates optional) on Inter.

### Hierarchy

| Role | Font | Size | Weight | Line H | Tracking | Notes |
|---|---|---|---|---|---|---|
| display-hero | Circular | 80 | 400 | 1.0 | -0.03em | White on dark hero band |
| display-xl | Circular | 64 | 700 | 1.02 | -0.025em | Big marketing line |
| display-lg | Circular | 56 | 700 | 1.05 | -0.02em | Section opener |
| h1 | Circular | 40 | 700 | 1.1 | -0.018em | Page / subsection title |
| h2 | Circular | 32 | 600 | 1.2 | -0.012em | Feature header |
| h3 | Circular | 24 | 600 | 1.25 | -0.005em | Card title |
| h4 | Inter | 20 | 600 | 1.3 | 0 | Inline title — Inter takes over |
| h5 | Inter | 18 | 600 | 1.4 | 0 | Component label |
| lead | Inter | 22 | 400 | 1.45 | -0.005em | Hero subhead / intro paragraph |
| body-lg | Inter | 18 | 400 | 1.55 | 0 | Default marketing body |
| body | Inter | 16 | 400 | 1.55 | 0 | Dense body / app contexts |
| body-sm | Inter | 14 | 400 | 1.5 | 0 | Captions, fine print |
| button | Inter | 16 | 500 | 1.2 | 0 | Pill button label |
| label | Inter | 13 | 500 | 1.4 | 0 | Form labels |
| eyebrow | Inter | 12 | 600 | 1.4 | 0.08em | Section tag, UPPERCASE |
| caption | Inter | 12 | 500 | 1.4 | 0.02em | Meta below cards |
| code | SF Mono | 14 | 400 | 1.6 | 0 | API snippets, amounts |

### Principles

- **Circular for display, Inter for everything functional** — the geometric display does the personality; Inter does the reading.
- **Hero at 80px Circular, white on dark** — the single most heroic moment; one line, big air around it.
- **Circular only at ≥24px** — below that, the geometric roundness collapses; Inter handles h4 and down.
- **Body at 18px on marketing, 16px in dense contexts** — the larger 18px default reads friendly, not spec-sheet.
- **Ink near-black `#121217`, not pure black** — softer on the bright white canvas.
- **Tight tracking on display** (-0.02em to -0.03em) — Circular's wide geometric forms need pulling together at size.
- **Loose tracking on eyebrows** (0.08em) — UPPERCASE micro-labels get airy spacing.
- **One weight per role** — Circular display is 400 at hero, 600/700 elsewhere; don't mix bold and regular in a single headline.

## 4. Component Stylings

### Buttons

Every button is a **pill at 40px radius**. The radius is the through-line; the fill is what signals priority.

**White Pill CTA (the hero primary)** — the signature Lemon Squeezy button
- bg `#ffffff`, text `#121217`, radius `40px`
- padding `12px 20px`, Inter 500 16px
- hover: bg `#f6f6f8` + 1px lift, 240ms ease-standard
- focus: lemon ring `3px rgba(255,194,51,0.6)` on the dark band
- use: primary action on the dark hero — "Get started", "Get started for free"

**Lemon Button (primary on white)**
- bg `#ffc233`, text `#121217`, radius `40px`
- padding `12px 20px`, Inter 500 16px
- hover: bg `#f5b21f`, 240ms ease-standard
- focus: purple ring `3px rgba(84,35,231,0.18)`
- use: primary action on the white canvas — the playful lemon CTA

**Purple Button (secondary brand)**
- bg `#5423e7`, text `#ffffff`, radius `40px`
- padding `12px 20px`, Inter 500 16px
- hover: bg `#4a1dcc`
- use: secondary brand action, occasional alternate primary

**Ghost Button (tertiary)**
- bg `transparent`, text `#121217`, border `1px solid #e6e6ec`, radius `40px`
- padding `12px 20px`, Inter 500 16px
- hover: bg `#f6f6f8`
- use: "Learn more", "View docs", low-emphasis actions on white

**On-Dark Secondary** (inside the hero band)
- bg `rgba(255,255,255,0.1)`, text `#ffffff`, border `1px solid rgba(255,255,255,0.2)`, radius `40px`
- padding `12px 20px`, Inter 500 16px
- hover: bg `rgba(255,255,255,0.16)`
- use: the secondary action sitting next to the white pill in the hero

### Cards

**Card Default**
- bg `#ffffff`, radius `16px`, padding `24px`
- border `1px solid #e6e6ec`, shadow `0 1px 3px rgba(18,18,23,0.06), 0 8px 24px rgba(18,18,23,0.05)`
- hover: shadow → elevated `0 12px 32px rgba(18,18,23,0.10)`, 1px lift
- use: feature cards, pricing tiers, content blocks

**Card Dark** (inside the dark band)
- bg `#1c1c24`, radius `16px`, padding `24px`
- border `1px solid #2a2a33`, no shadow
- white type, muted `#b7b7c0` secondary
- use: cards composed onto the near-black band

**Card Lemon Highlight**
- bg `#fff3d6` pale lemon, radius `16px`, padding `24px`
- ink `#121217` type, optional `1px solid #ffc233` outline
- use: "most popular" pricing tier, tip callouts

**Card Purple Highlight**
- bg `#efe9fd` pale purple, radius `16px`, padding `24px`
- purple `#5423e7` heading, ink body
- use: feature spotlight, integration callouts

### Badges & Tags

**Badge Lemon**
- bg `#ffc233`, text `#121217`, radius `40px` (pill)
- padding `4px 10px`, Inter 600 12px
- use: "New", "Beta", "Most popular"

**Badge Purple**
- bg `#efe9fd`, text `#5423e7`, radius `40px` (pill)
- padding `4px 10px`, Inter 600 12px
- use: category tags, soft labels

**Tag Eyebrow**
- transparent bg, text `#6b6b76`, UPPERCASE
- Inter 600 12px / 0.08em — section labels above headings

### Inputs & Forms

**Text Input**
- bg `#ffffff`, border `1px solid #e6e6ec`, radius `8px`
- padding `10px 12px`, Inter 400 16px
- focus: border `#5423e7` purple + ring `3px rgba(84,35,231,0.18)`
- placeholder: `#9a9aa3`

**Inline Email Capture** (newsletter / get-started pattern)
- horizontal: rounded `8px` input + lemon or white pill submit
- input radius `8px`, submit radius `40px` — the pill submit is the accent
- placeholder: "you@company.com"

Note: inputs use a smaller `8px` radius while buttons stay at the `40px` pill — the contrast is intentional. Fields read as practical; actions read as playful.

### Navigation

**Top Nav**
- bg `#ffffff` (or transparent over the dark hero), height `64px`, gutters `24px`
- Lemon Squeezy wordmark/lemon mark left, link cluster center (Features / Pricing / Docs / Blog), pill CTA right
- 1px `#e6e6ec` bottom border on scroll (on white) / subtle backdrop on the dark hero
- dropdown menus reveal on hover with soft `0 12px 32px` shadow

**Footer**
- bg `#ffffff` or `#121217` inversion, padding `96px 24px`
- multi-column link grid in Inter 14px, muted `#6b6b76`
- lemon/purple accents on social + product links
- lemon mark + © at bottom

### Tabs / Tooltips / Toasts

**Tab Group** — underline-style: 2px lemon `#ffc233` (or purple) on active, text `#121217` active / `#6b6b76` rest.

**Tooltip** — bg `#121217`, text `#ffffff`, radius `8px`, padding `8px 12px`, Inter 500 12px, soft `0 12px 32px` shadow.

**Toast** — bg `#ffffff`, border `1px solid #e6e6ec`, radius `12px`, shadow `0 12px 32px rgba(18,18,23,0.10)`, Inter 500 14px message, lemon/green/red status dot.

## 5. Layout Principles

### Spacing System

- **base** `4px`, scale `[0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120, 160]`
- Density philosophy: **airy-modern**. Sections breathe at 96–120px vertical rhythm; the dark hero gets the most air to let the 80px Circular line sing.

### Grid & Container

- **page-width** `1280px` with 24px gutters
- 12-column grid; the hero and dark band run **full-bleed**, content resets to the 1280 container
- **prose-width** `720px` — blog, docs, legal/tax content
- Pricing and feature grids: 3-col → 2-col → 1-col

### Whitespace Philosophy

Whitespace is **generous and light**. The white canvas is the dominant surface; the dark hero and occasional inversion band punctuate it. Cards float on soft shadows with comfortable 24px internal padding, and the rounded geometry plus the air keeps the page feeling open rather than dense — fitting a product that wants to feel effortless.

### Section Cadence

The page reads as a light canvas with deliberate dark and lemon punctuation:
1. Dark `#121217` hero with white Circular 80px + white pill CTA
2. White feature row with soft-shadow cards
3. White / lemon-tinted callout band
4. White pricing grid (lemon highlight on the popular tier)
5. Purple-accented integration or testimonial band
6. Dark `#121217` CTA band — "Get started for free" mirroring the hero
7. White or dark footer

The rhythm is **dark → white → lemon accent → white → dark**, with the dark band bookending the page and the lemon-yellow appearing as accent rather than full background.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Inline chips, tiny indicators |
| Standard (sm) | 4px | Small controls, inline tags |
| Comfortable (md) | 8px | Inputs, dropdowns, small surfaces |
| Relaxed (lg) | 12px | Toasts, popovers, secondary cards |
| Large (xl) | 16px | Default cards, panels |
| Featured (xxl) | 24px | Hero media frames, large feature cards |
| Pill | 40px | **All buttons, CTAs, and badges** |

Lemon Squeezy's defining shape decision is the **40px pill** on every button and badge — far rounder than the typical 8–12px SaaS button. That softness is the playful signal. Surfaces (cards, inputs, panels) use a more conventional 8–24px scale, which keeps practical UI legible while the actions stay toy-soft. The deliberate gap between input radius (8px) and button radius (40px) is part of the system: fields look like fields, buttons look like fun.

Corners are never sharp on interactive elements. Even media frames and the largest feature cards round at 16–24px, so nothing on the page reads as a hard rectangle.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Type on canvas, dark-band content |
| 1 | `0 1px 3px rgba(18,18,23,0.06)` | Hairline lift, inline chips |
| 2 | `0 1px 3px ... , 0 8px 24px rgba(18,18,23,0.05)` | Resting cards (default) |
| 3 | `0 12px 32px rgba(18,18,23,0.10)` | Card hover, floating dropdowns |
| 4 | `0 24px 64px rgba(18,18,23,0.14)` | Modals, popovers |
| 5 | Dark inversion band `#121217` | Hero, CTA band — depth by tone, not shadow |

### Shadow Philosophy

Depth is carried by **soft, ink-tinted ambient shadows**, not borders. Cards rest on a layered shadow (a tight 1px contact shadow plus a wider, very soft diffusion) that reads modern and gentle. On hover, the shadow expands and the card lifts a pixel — a quiet, confident motion rather than a dramatic pop.

The dark band needs no shadow: depth there comes from the raised `#1c1c24` surface tone against the `#121217` base. This keeps the dark sections clean and lets the white type and lemon accents do the work.

## 8. Interaction & Motion

### Easing Curves

- **ease-standard** `cubic-bezier(0.4, 0, 0.2, 1)` — most state changes
- **ease-emphasized** `cubic-bezier(0.2, 0, 0, 1)` — modal entry, hero reveal
- **ease-bounce** `cubic-bezier(0.34, 1.56, 0.64, 1)` — playful lemon/confetti flourishes
- **ease-soft** `cubic-bezier(0.45, 0, 0.55, 1)` — symmetric breathing on idle accents

### Duration Buckets

- **fast** `150ms` — button hover, link state, focus ring
- **standard** `240ms` — card hover, dropdown reveal
- **slow** `320ms` — modal entry, section reveal
- **cinematic** `520ms` — lemon mascot / illustration flourish

### Per-Component Recipes

- **White pill hover**: bg `#fff` → `#f6f6f8` + translateY(-1px), 240ms ease-standard
- **Lemon button hover**: bg `#ffc233` → `#f5b21f`, 150ms, no lift required (color does the work)
- **Purple button hover**: bg `#5423e7` → `#4a1dcc`, 150ms
- **Card hover**: shadow standard → elevated + translateY(-1px), 240ms ease-standard
- **Link hover**: underline 0 → 1px + darken, 150ms
- **Dropdown reveal**: opacity 0→1 + translateY(4px→0), 240ms ease-emphasized

### Page Transitions

- Section reveals on scroll: fade-up 12px, 320ms ease-emphasized
- Hero on first paint: fade + slight scale on the dark band, 520ms (the lemon accents settle last)
- Sticky nav: 1px border + subtle backdrop on scroll, 240ms

### Reduced Motion Strategy

Lemon Squeezy respects `prefers-reduced-motion: reduce`:
- Lemon / confetti / mascot flourishes: static, no animation
- Hover lifts: drop the translate, keep the color/shadow change
- Scroll-triggered reveals: opacity-only fade
- Modal/dropdown entry: opacity-only, no translate or scale

## 9. Accessibility & A11y

### Contrast Pairs

- text `#121217` on bg `#ffffff`: **18.7** — AAA all sizes
- white `#ffffff` on bg-dark `#121217`: **18.7** — AAA — the hero pair
- text `#121217` on pill `#ffffff`: **18.7** — AAA — the white CTA
- on-brand `#121217` on brand `#ffc233`: **11.6** — AAA — ink on lemon
- text-muted `#6b6b76` on bg `#ffffff`: **5.3** — AA body, AAA large
- white `#ffffff` on accent `#5423e7`: **7.6** — AAA large text & UI, AA all
- text-on-dark-muted `#b7b7c0` on `#121217`: **9.3** — AAA — muted on dark

### Focus Indicators

- 3px purple ring `rgba(84,35,231,0.18)` on light surfaces
- 3px lemon ring `rgba(255,194,51,0.6)` on the dark hero/band (purple would vanish on near-black)
- Visible on every interactive; never `outline: none` without replacement
- Pills keep the ring outside the 40px radius so it reads as a clean halo

### ARIA Patterns

- Nav dropdowns: `aria-haspopup="menu"` + `aria-expanded` + `role="menu"`
- Modal: `role="dialog"` + `aria-modal="true"` + focus trap
- Pricing toggle (monthly/annual): `role="switch"` + `aria-checked`
- Lemon mascot illustration: `aria-hidden="true"` when decorative

### Keyboard Nav

- Tab order matches DOM source
- ENTER/SPACE activate pill buttons
- ARROW navigates within menus and the pricing toggle
- ESC closes modals/dropdowns

### Screen Reader Hints

- Wordmark SVG carries `<title>Lemon Squeezy</title>`
- Decorative lemon/confetti graphics: `aria-hidden="true"`
- Eyebrow labels are semantic spans, not headings
- Amounts/prices use real text, not images, for SR + selection

### Reduced Motion

- Honored across the site
- Flourishes static, reveals opacity-only, hover lifts drop translate

## 10. Responsive Behavior

### Breakpoints

| Tier | Min-width | Use |
|---|---|---|
| mobile | 0–639px | Single-column, full-width dark hero |
| tablet | 640–1023px | 2-column feature / pricing grid |
| desktop | 1024–1279px | Full 12-column |
| wide | 1280px+ | Container caps at 1280, generous gutters |

### Touch Targets

Minimum 44×44px on mobile. The pill CTA scales padding from `12px 20px` to `14px 24px` for a 48px+ tap area — the rounded pill stays on-brand and comfortable at touch sizes.

### Collapsing Strategy

- **Hero display**: 80px → 56px → 40px → 32px down the cascade — Circular scales aggressively
- **Feature / pricing grid**: 3-col → 2-col → 1-col
- **Top nav**: full link cluster → hamburger drawer at <1024px
- **Section vertical rhythm**: 120px → 80px → 56px
- **Dual CTAs**: side-by-side pills → stacked full-width pills on mobile

### Image Behavior

- Product mockups: aspect-ratio ~16:10, rounded `16–24px` frame, `object-fit: cover`
- Lemon/mascot illustrations: SVG, scale infinitely
- Logos in social-proof rows: greyed, equal optical sizing

### Container Queries

Used on the pricing card grid — when a tier card narrows below ~300px, the feature list switches from two columns to one and the badge moves above the price.

## 11. Content & Voice

### Tone

**Friendly-confident, lightly cheeky.** Lemon Squeezy talks to software makers — indie devs, SaaS founders, plugin and template sellers — who want to sell globally without becoming tax experts. The voice is plain-spoken and warm with a wink ("Payments, tax & subscriptions for software companies"), never enterprise-stiff. It promises to handle the boring, scary parts (VAT, sales tax, compliance) so makers can ship. Adjectives go to the user's product, not the marketing.

### Microcopy Patterns

- **Button verbs**: "Get started", "Get started for free", "Talk to sales", "Read the docs", "See pricing"
- **Empty states**: "No products yet — let's create your first." (Inviting, action-first.)
- **Errors**: "Hmm, that didn't work. Mind trying again?" (Conversational, low-blame.)
- **Success**: "You're all set." (Reassuring, done.)
- **Loading**: "Setting up your store…" (Verb in progress.)
- **Confirmations**: "Saved." / "Done." (Brief, breezy.)

### CTA Verb Conventions

The dominant primary CTA is **"Get started"** / **"Get started for free"** — the freemium-friendly, low-friction invitation that appears in the hero, mid-page, and the closing dark band. Secondary actions use **"Talk to sales"** (for larger sellers) and **"Read the docs"** (for developers). The word "free" earns its place because onboarding has no upfront cost.

### Empty States

Empty states are co-conspiratorial invitations rather than dead ends — "No products yet — let's create your first." A small lemon/illustration often accompanies the prompt, keeping the playful tone even in the product's quiet moments.

## 12. Dark Mode & Theming

Lemon Squeezy's marketing site is **light-first** — a white canvas is the dominant surface — but it ships a **recurring dark `#121217` band** as a compositional device for the hero and the closing CTA, not a global dark toggle. There is no user-facing light/dark switch on the marketing pages; the dark is a deliberate punctuation, not a preference.

Within any dark band, the token swap is:

```yaml
colors-inverted:
  bg: '#121217'
  surface: '#1c1c24'
  surface-2: '#26262f'
  text: '#ffffff'                # white type
  text-muted: '#b7b7c0'          # muted on dark
  brand: '#ffc233'               # lemon unchanged — pops on dark
  accent: '#7c54ee'              # purple lightened for dark legibility
  border: '#2a2a33'
```

The lemon-yellow is unchanged across light and dark — it is engineered to read against both white and near-black. The purple is lightened slightly inside the dark band so it stays legible. Pills become **white** on dark (the hero CTA) and **lemon** on light (the canvas CTA): same shape, inverted fill.

## 13. Lineage & Influences

Lemon Squeezy sits in the lineage of the **friendly geometric-sans, single-accent SaaS** look that defined late-2010s product design — Circular (Lineto) as display, a neutral grotesque (Inter) as body, generous white space, and one warm chromatic doing all the personality work. Its 40px pill CTAs and soft ambient shadows place it firmly in the **rounded, approachable** branch of fintech/SaaS rather than the hard-edged, serious-bank branch. The dark hero with white display is a move it shares with a generation of premium developer-tool sites that use a near-black band to signal confidence before dropping into a light, fast canvas.

The brand's distinctive twist is the **citrus identity** — the lemon motif, the squeeze, the brightness — applied to genuinely serious infrastructure (merchant-of-record payments, global tax compliance). That playful-but-pro tension is the whole point: it makes tax and compliance feel approachable to indie makers while staying credible to finance teams. Now part of **Stripe**, Lemon Squeezy keeps its own warm, rounded, lemon-yellow identity distinct from Stripe's cooler, more technical palette — the friendly front door to serious money infrastructure.

**Named Influences**
- **Circular / Lineto** ([lineto.com](https://lineto.com)) — the geometric display typeface that carries the friendly-modern voice
- **Inter** ([rsms.me/inter](https://rsms.me/inter)) — the neutral, highly legible body grotesque
- **Stripe** ([stripe.com](https://stripe.com)) — parent company and the broader payments-design reference point
- **Gumroad** ([gumroad.com](https://gumroad.com)) — the playful creator-commerce sibling with bright single-accent identity
- **Paddle** ([paddle.com](https://paddle.com)) — the merchant-of-record contemporary it competes with on positioning

## 14. Do's and Don'ts

### Do

- Keep the lemon-yellow at exactly `#ffc233`; it is the brand and the only warm chromatic
- Use the dark `#121217` band for the hero and closing CTA — white Circular display on near-black
- Make every button and badge a `40px` pill — the roundness is the playful signal
- Use the white pill (`#ffffff` bg, `#121217` text) for the hero CTA on the dark band
- Use the lemon pill for the primary CTA on white canvas
- Keep body in Inter at 18px (marketing) or 16px (dense), ink `#121217` not pure black
- Use Circular only at ≥24px; let Inter handle h4 and below
- Lean on soft ambient ink-tinted shadows for elevation, not heavy borders
- Keep the purple `#5423e7` as the secondary accent — illustration, links, secondary CTA
- Give the hero generous air so the 80px Circular line breathes

### Don't

- Substitute a different yellow (e.g. amber, gold, or a greener lemon) for `#ffc233`
- Square off the buttons — sharp-cornered CTAs break the playful identity
- Use a smaller radius like 8px on buttons; the 40px pill is the signature (8px is for inputs only)
- Render hero display in Inter; Circular's geometry carries the brand voice
- Put yellow text on white or yellow buttons on the dark band — ink-on-lemon and white-on-dark are the protected pairs
- Add a third accent color; the budget is lemon + purple + neutral
- Use pure black `#000` for body; ink `#121217` is the warmer near-black
- Apply heavy 2px borders as the elevation language; depth here is soft shadow + tone
- Make the dark band the dominant surface; it is punctuation, not the canvas
- Crowd the hero — one line, one or two pills, lots of air

## 15. Agent Prompt Guide

### Quick Color Reference

```
bg:            #ffffff
bg-dark:       #121217 (near-black hero / inversion band)
text:          #121217 (ink near-black body)
text-on-dark:  #ffffff (white on hero)
text-muted:    #6b6b76
brand:         #ffc233 (lemon-yellow — the brand)
accent:        #5423e7 (purple secondary)
on-brand:      #121217 (ink on lemon)
surface:       #f6f6f8
border:        #e6e6ec (1px hairline)
```

### Example Component Prompts

1. *"Create a Lemon Squeezy hero: full-bleed near-black `#121217` band, white Circular 80px / weight 400 headline reading 'Payments, tax & subscriptions for software companies' tracked at -0.03em, Inter 400 22px white-90% lead below, and a white pill CTA (`#ffffff` bg, `#121217` text, 40px radius, 12px 20px padding) saying 'Get started for free' next to a translucent on-dark secondary pill."*
2. *"Design a Lemon Squeezy feature card: white bg, 16px radius, 1px `#e6e6ec` border, soft shadow `0 1px 3px rgba(18,18,23,0.06), 0 8px 24px rgba(18,18,23,0.05)`, 24px padding. Circular 600 24px title in ink `#121217`, Inter 400 16px body in `#6b6b76`, small lemon `#ffc233` pill badge reading 'New' at top."*
3. *"Build a Lemon Squeezy pricing grid on white: three 16px-radius cards, soft shadows, the middle tier highlighted with a pale lemon `#fff3d6` bg and `1px solid #ffc233` outline plus a lemon pill badge 'Most popular'. Primary CTA on the highlighted card is a lemon pill `#ffc233` / `#121217`; others use a ghost pill with `#e6e6ec` border."*
4. *"Compose a Lemon Squeezy closing CTA band: full-bleed `#121217`, 120px vertical padding, centered white Circular 56px headline, Inter 18px white-80% subhead, and a single white pill 'Get started' with a lemon `3px` focus ring."*
5. *"Create a Lemon Squeezy inline email capture: white card, rounded 8px input with placeholder 'you@company.com' and a `#5423e7` focus ring, paired with a lemon `#ffc233` pill submit (40px radius) reading 'Get started' — input and button share the same height."*
6. *"Design a Lemon Squeezy nav bar over the dark hero: transparent bg, 64px height, lemon-mark wordmark left, center links (Features / Pricing / Docs / Blog) in white Inter 16px, and a white pill 'Get started' on the right at 40px radius."*

### Iteration Guide

1. **Lock the lemon exactness.** If the yellow has drifted toward amber/gold or a greener tone, force back to `#ffc233`. It is the single brand color.
2. **Round the buttons to 40px.** If CTAs use 8px or square corners, switch to the 40px pill — that is the playful signature.
3. **Set the hero on dark.** If the hero is on white, move it to a full-bleed `#121217` band with white Circular display and a white pill CTA.
4. **Swap display to Circular.** If headings render in Inter at large sizes, switch to Circular (≥24px); keep Inter for h4 and body.
5. **Use ink, not black.** If body type is `#000`, change to `#121217`. Softer on the bright canvas.
6. **Soften the elevation.** If cards use heavy borders or hard shadows, replace with the layered soft ambient shadow and a 16px radius.
7. **Keep the palette to two accents.** If a third chromatic has crept in, remove it — lemon + purple + neutral only.
8. **Protect the contrast pairs.** Ink-on-lemon and white-on-dark are the safe pairs; never yellow text on white or white pills on the white canvas.
---

*Theme-toggle audit: score=0, signals=[none]*