DESIGN.md inspired by Gumroad

---
name: Gumroad
tagline: Hot pink `#ff90e8` on cream, ABC Favorit at 96px, hard black borders and offset shadows — neo-brutalist creator commerce.
updated_at: 2026-05-28T23:12:32.659Z
published_at: 2026-05-28T23:12:32.659Z
author: webdesignhot
source_url: https://gumroad.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas]
tags: [light, bold, sans, creator, commerce, pink]
preview_swatch: ['#f4f4f0', '#ff90e8', '#000000']
related: [stripe, substack, patreon, notion]
description: 'Gumroad''s site is a warm cream canvas (`#f4f4f0`) stamped with hot bubblegum pink (`#ff90e8`) and outlined in unforgiving 1px black. It is the most-recognised face of the neo-brutalist web revival: every card, button, and badge wears a hard black border and a hard-offset drop shadow (`4px 4px 0 #000`) with no blur, no gradient, no softness — boxes that look stamped onto the page like sticker labels. Type is ABC Favorit, a contemporary grotesque from Dinamo, run huge — hero headlines hit 96px at a near-conversational weight (400), so the size, not the boldness, carries the volume. Where Stripe sells trust through restraint and Linear sells precision through dark glass, Gumroad sells *approachability through cheerful crudeness*: the design deliberately looks hand-assembled, almost MS-Paint-confident, to signal that anyone — a first-time creator with one PDF to sell — belongs here. The pink is the brand''s single loud note, used for primary fills, highlights, and decorative blocks; the cream keeps the whole thing from feeling clinical; and the black borders give every element the same flat, equal-weight presence. The result is a commerce site that reads like a zine or a Risograph poster rather than a SaaS dashboard — playful, flat, high-contrast, and impossible to mistake for anyone else.'


# 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
  accent: accent-yellow
  muted: text-muted
  border: border
colors:
  bg: '#f4f4f0'                   # warm cream canvas — the brand's default ground
  surface: '#ffffff'             # pure white card surface, framed by black border
  surface-pink: '#ff90e8'        # hot-pink decorative / highlight block
  surface-cream-deep: '#efefe8'  # slightly deeper cream for alternating bands
  text: '#000000'                # pure black ink — headlines, body, borders
  text-muted: '#555555'          # secondary copy, captions, metadata
  text-subtle: '#767676'         # lowest-hierarchy, disabled labels
  text-on-pink: '#000000'        # black ink on pink fills (pink is light)
  text-on-black: '#ffffff'       # white ink on the rare black fill
  brand: '#ff90e8'               # Gumroad Pink — signature hot bubblegum
  brand-deep: '#ff62db'          # deeper pink for hover / pressed fills
  brand-soft: '#ffe1f8'          # pale pink wash — tint backgrounds, badges
  accent-yellow: '#ffc900'       # secondary highlight — promo blocks, stars
  accent-blue: '#90a8ed'         # tertiary cool accent — info blocks
  accent-green: '#23a094'        # success / "earnings" teal-green
  link: '#000000'                # links are black with underline (not pink)
  link-hover: '#ff62db'          # hover lifts link to deeper pink
  border: '#000000'              # the defining 1px hard black border — everywhere
  border-thick: '#000000'        # 2px black for emphasis frames
  shadow-hard: '#000000'         # hard offset shadow color — no blur, solid black
  divider: '#dcdcd4'             # faint cream-grey rule inside light surfaces
  semantic-success: '#23a094'    # teal-green — payouts, "you got paid"
  semantic-warning: '#ffc900'    # amber-yellow — caution notices
  semantic-danger: '#dc341e'     # error red on cream
  semantic-info: '#90a8ed'       # periwinkle blue — informational

typography:
  display:
    family: '"ABC Favorit", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif'
    weights: [400, 500, 600, 700]
    opentype-features: ['kern']
  body:
    family: '"ABC Favorit", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
    opentype-features: ['tnum']
  scale:
    display-hero:    { size: 96, weight: 400, lineHeight: 1.0,  tracking: '-0.02em',  family: display }
    display-lg:      { size: 72, weight: 400, lineHeight: 1.02, tracking: '-0.02em',  family: display }
    display-md:      { size: 56, weight: 500, lineHeight: 1.05, tracking: '-0.015em', family: display }
    h1:              { size: 40, weight: 600, 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 }
    title-sm:        { size: 18, weight: 600, lineHeight: 1.35, 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-strong:     { size: 16, weight: 600, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        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 }
    price-mono:      { size: 16, weight: 500, lineHeight: 1.4,  tracking: '0',        family: mono, opentype: 'tnum' }

radius:
  none: 0
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

components:
  button-primary:   { bg: brand, text: on-brand, border: '1px solid border', shadow: '4px 4px 0 #000', padding: '12px 20px', radius: 8, font: button }
  button-secondary: { bg: surface, text: text, border: '1px solid border', shadow: '4px 4px 0 #000', padding: '12px 20px', radius: 8, font: button }
  button-ghost:     { bg: transparent, text: text, border: '1px solid border', padding: '10px 16px', radius: 8, font: button }
  button-dark:      { bg: text, text: text-on-black, border: '1px solid border', padding: '12px 20px', radius: 8, font: button }
  card:             { bg: surface, border: '1px solid border', shadow: '4px 4px 0 #000', radius: 12, padding: 24 }
  card-pink:        { bg: brand, text: text-on-pink, border: '1px solid border', shadow: '4px 4px 0 #000', radius: 12, padding: 24 }
  input:            { bg: surface, border: '1px solid border', text: text, radius: 8, padding: '10px 14px', height: 44 }
  badge:            { bg: brand-soft, text: text, border: '1px solid border', radius: pill, padding: '4px 10px', font: caption }
  top-nav:          { bg: bg, text: text, height: 64, border-bottom: '1px solid border', font: button }
  footer:           { bg: bg, text: text, border-top: '1px solid border', padding: '48px 0' }

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce — the press-translate (shadow collapse) on buttons/cards snaps instead of animating'

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

shadows:
  hard-sm: '2px 2px 0 #000'
  hard: '4px 4px 0 #000'
  hard-lg: '6px 6px 0 #000'
  hard-xl: '8px 8px 0 #000'
  pressed: '0px 0px 0 #000'

accessibility:
  contrast-text-on-bg: 19.05
  contrast-text-on-brand: 10.41
  contrast-text-on-surface: 21.0
  contrast-muted-on-bg: 6.76
  focus-ring: '2px solid #000 with 2px offset (hard black ring matches the border system)'
  reduced-motion-honored: true
  min-target: 44

lineage:
  summary: 'Gumroad is the flagship of the neo-brutalist web movement that surged around 2020–2022, drawing its visual grammar from three older sources: Swiss/International Typographic Style flat grids stripped of their austerity, the hard 1px borders and beveled-but-flattened controls of early-web and Windows-98 chrome, and the cheap-print energy of Risograph posters and punk-zine layouts. Designer Adam "@nakamura" — working under founder Sahil Lavingia''s direction during the brand''s 2021 relaunch — pushed the site away from the conventional rounded-soft SaaS look toward deliberate crudeness: hot pink on cream, every box outlined in solid black, every shadow a hard pixel-offset with zero blur. The throughline is anti-corporate approachability. By making the interface look almost handmade — flat colour blocks, oversized type at a casual weight, sticker-like cards — Gumroad signals that selling online is not the domain of polished agencies but of any individual creator. It rejects the gradient-glass-blur aesthetic of Stripe and the dark-precision look of Linear in favour of something that feels closer to a market stall flyer than a financial platform.'
  influences:
    - { name: 'Dinamo (ABC Favorit typeface)', role: 'The grotesque sans that defines Gumroad''s voice', url: 'https://abcdinamo.com/typefaces/favorit' }
    - { name: 'Swiss / International Typographic Style', role: 'Flat grid and unornamented type structure it borrows then loosens', url: 'https://en.wikipedia.org/wiki/International_Typographic_Style' }
    - { name: 'Neo-brutalism in web design', role: 'The hard-border, hard-shadow, raw-block movement Gumroad anchors', url: 'https://en.wikipedia.org/wiki/Brutalist_architecture' }
    - { name: 'Risograph print aesthetic', role: 'Limited bright-spot-colour-on-paper energy the cream+pink palette evokes', url: 'https://en.wikipedia.org/wiki/Risograph' }
    - { name: 'Sahil Lavingia (Gumroad founder)', role: 'Directed the 2021 anti-corporate brand relaunch', url: 'https://sahillavingia.com' }
---

## 1. Visual Theme & Atmosphere

Gumroad's site is the most legible example of **neo-brutalism** in mainstream commerce. The canvas is a warm **cream `#f4f4f0`** — not white, not grey, but a soft off-paper tone that reads like a sheet of recycled stock. Onto that ground the brand stamps a single loud voltage: **hot bubblegum pink `#ff90e8`**, used for primary buttons, highlight blocks, and decorative panels. The third and most structurally important colour is **pure black `#000000`**, which appears not as a fill but as a **1px hard border around almost everything** — every card, button, input, and badge is outlined in solid black, the way a sticker is die-cut from a sheet. The combined effect is flat, high-contrast, and unmistakably hand-assembled.

The defining gesture is the **hard offset shadow**: `4px 4px 0 #000` — a solid black rectangle pushed down-and-right behind each element, with **zero blur and zero softness**. Where a conventional SaaS site uses a diffuse `0 8px 24px rgba(0,0,0,0.1)` to suggest gentle floating, Gumroad uses a crisp pixel-offset that makes elements look like physical cards stacked on a desk, or like a 1990s GUI button frozen mid-press. On hover or press these shadows often **collapse** — the element translates `4px 4px` toward its own shadow and the shadow shrinks to zero, producing a satisfying "click-down" that feels mechanical rather than animated.

Type is **ABC Favorit**, a contemporary neo-grotesque from the Berlin foundry Dinamo. Crucially, Gumroad runs its hero headlines **enormous (96px) but at a near-regular weight (400)** — the scale carries the volume, not the boldness. This is a deliberate inversion of the usual "big-and-bold" hero formula: the casual weight at giant size feels confident and conversational rather than shouty, like someone speaking plainly but standing very close. Below the hero, headings step down to weights 500–600, and body copy sits at a comfortable 16–18px / 1.55 line-height.

The atmosphere is **cheerful crudeness**. Gumroad deliberately looks like it could have been built by one person in an afternoon — flat colour blocks, equal-weight black outlines, oversized plain type, sticker-like cards arranged on a forgiving cream grid. That roughness is the message: selling online is not reserved for polished agencies or VC-backed storefronts; it's for the individual creator with one PDF, one preset pack, or one course to sell. The design is the value proposition rendered as style.

Sections alternate between the cream canvas, occasional **pink decorative blocks**, and pure-white card surfaces — but the visual rhythm is held together by the constant black outline and the constant hard shadow. There are no gradients, no glassmorphism, no blur, no subtle depth. Everything is flat, framed, and equal.

**Key Characteristics:**
- Warm cream canvas `#f4f4f0` — off-paper, never clinical white
- Hot bubblegum pink `#ff90e8` as the single brand voltage — fills, highlights, decorative blocks
- 1px hard **black border** on virtually every element — the structural backbone
- Hard **offset shadow** `4px 4px 0 #000` — solid black, zero blur, zero softness
- Press interaction **collapses the shadow** — elements translate into their own shadow on click
- ABC Favorit (Dinamo) run **huge (96px) at casual weight (400)** — scale carries the volume
- Pure-black ink, pure-white card surfaces, equal-weight flat blocks
- No gradients, no glassmorphism, no blur — deliberately flat and "handmade"
- Yellow `#ffc900`, periwinkle `#90a8ed`, and teal `#23a094` as secondary accent blocks
- Risograph/zine energy: bright spot colour on paper, sticker-like cards

## 2. Color Palette & Roles

### Primary
- **Canvas** (`#f4f4f0`) [→ `bg`]: Warm cream default ground — off-paper, holds the whole page.
- **Surface** (`#ffffff`) [→ `surface`]: Pure-white card surface, always framed by a 1px black border.
- **Ink** (`#000000`) [→ `text`]: Pure black — headlines, body copy, *and* the universal border colour.
- **Brand** (`#ff90e8`, Gumroad Pink) [→ `brand`]: Hot bubblegum pink — primary fills, highlights, decorative panels.

### Brand
- **Gumroad Pink** (`#ff90e8`) [→ `brand`]: The signature voltage. Primary button fill, highlight blocks, brand moments.
- **Brand Deep** (`#ff62db`) [→ `brand-deep`]: Deeper pink for hover/pressed button fills.
- **Brand Soft** (`#ffe1f8`) [→ `brand-soft`]: Pale pink wash — badge backgrounds, tint sections.

### Accent
Gumroad uses a small kit of bright spot colours, applied as flat blocks (always black-bordered):
- **Yellow** (`#ffc900`) [→ `accent-yellow`]: Promo blocks, rating stars, "popular" highlights.
- **Periwinkle Blue** (`#90a8ed`) [→ `accent-blue`]: Informational blocks, secondary callouts.
- **Teal Green** (`#23a094`) [→ `accent-green`]: Earnings/payout moments, the "you got paid" colour.

### Interactive
- **Link** = `#000000` with underline (links are black, *not* pink — pink is reserved for fills).
- **Link Hover** — `#ff62db` (deeper pink), underline retained.
- **Button hover** — primary fill shifts `#ff90e8` → `#ff62db`; shadow may lift to `6px 6px 0 #000`.
- **Button press** — element translates `4px 4px`, shadow collapses to `0 0 0 #000` (the "click-down").
- **Disabled** — `#efefe8` fill, `#767676` text, no shadow.
- **Focus** — `2px solid #000` ring with 2px offset (hard black, matches the border system).

### Neutral Scale
A short, warm scale tuned to the cream ground rather than a cold grey ramp:

`#f4f4f0` (Canvas) → `#efefe8` (Cream Deep) → `#dcdcd4` (Divider) → `#767676` (Subtle) → `#555555` (Muted) → `#000000` (Ink).

### Surface & Borders
- **Surface** (`#ffffff`): Default card surface.
- **Surface Cream Deep** (`#efefe8`): Alternating band / disabled fill.
- **Border** (`#000000`): The defining 1px hard black border — on cards, buttons, inputs, badges.
- **Border Thick** (`#000000` at 2px): Emphasis frames, featured cards.
- **Divider** (`#dcdcd4`): Faint cream-grey hairline *inside* a white surface (where a black rule would be too heavy).

### Shadow Colors
Shadows are **solid black `#000000` with zero blur** — they are not atmospheric depth, they are graphic offset. The scale is `2px 2px 0` (small), `4px 4px 0` (default), `6px 6px 0` (hover/featured), `8px 8px 0` (hero card), collapsing to `0 0 0` on press. This is the single biggest departure from conventional design systems: shadow as a hard graphic shape, not a soft glow.

### Semantic
- **Success** (`#23a094`): Teal-green — payouts, "you got paid", positive confirmations.
- **Warning** (`#ffc900`): Amber-yellow — caution notices.
- **Danger** (`#dc341e`): Error red on cream.
- **Info** (`#90a8ed`): Periwinkle blue — informational callouts.

## 3. Typography Rules

### Font Family

**Primary: ABC Favorit** — a contemporary neo-grotesque from the Berlin foundry Dinamo (abcdinamo.com). It carries the rational, even-stroke clarity of a Swiss grotesque but with subtly humanist terminals that keep it warm rather than cold. Gumroad uses it for *everything* — display, headings, and body — leaning on weight and size to build hierarchy rather than switching families. Weights deployed: 400, 500, 600, 700.

**Body: ABC Favorit (regular cut)** — same family, used at 16–18px for running text. Weights: 400, 500, 600.

**Fallback chain**: `"ABC Favorit", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif`. The chain hands off to system-ui then Helvetica — both share ABC Favorit's grotesque proportions, so the fallback degrades gracefully.

**Mono: system monospace** — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`, reserved for prices, transaction figures, and code, with `tnum` (tabular numerals) for aligned columns. Weights: 400, 500.

**OpenType features**: `kern` always on. The brand does not lean on stylistic sets; its character comes from scale and the surrounding black-border system, not from glyph alternates.

### Hierarchy

| Role          | Font         | Size | Weight | Line Height | Letter Spacing | OT Features | Notes                                            |
|---------------|--------------|------|--------|-------------|----------------|-------------|--------------------------------------------------|
| display-hero  | ABC Favorit  | 96   | 400    | 1.0         | -0.02em        | kern        | Hero headline — **giant but casual weight**      |
| display-lg    | ABC Favorit  | 72   | 400    | 1.02        | -0.02em        | kern        | Secondary hero                                   |
| display-md    | ABC Favorit  | 56   | 500    | 1.05        | -0.015em       | kern        | Section opener                                   |
| h1            | ABC Favorit  | 40   | 600    | 1.1         | -0.018em       | kern        | Page title                                       |
| h2            | ABC Favorit  | 32   | 600    | 1.2         | -0.012em       | kern        | Section heading                                  |
| h3            | ABC Favorit  | 24   | 600    | 1.25        | -0.005em       | —           | Card title                                       |
| h4            | ABC Favorit  | 20   | 600    | 1.3         | 0              | —           | Sub-card heading                                 |
| title-sm      | ABC Favorit  | 18   | 600    | 1.35        | 0              | —           | List heading                                     |
| body-lg       | ABC Favorit  | 18   | 400    | 1.55        | 0              | —           | Lead paragraph                                   |
| body          | ABC Favorit  | 16   | 400    | 1.55        | 0              | —           | Default body                                     |
| body-strong   | ABC Favorit  | 16   | 600    | 1.55        | 0              | —           | Inline emphasis                                  |
| body-sm       | ABC Favorit  | 14   | 400    | 1.5         | 0              | —           | Secondary body                                   |
| label         | ABC Favorit  | 13   | 500    | 1.4         | 0              | —           | Form labels                                      |
| button        | ABC Favorit  | 16   | 500    | 1.2         | 0              | —           | All CTA labels — medium weight, not bold         |
| caption       | ABC Favorit  | 12   | 500    | 1.4         | 0.02em         | —           | Metadata, footnotes (slight tracking)            |
| price-mono    | mono         | 16   | 500    | 1.4         | 0              | tnum        | Prices and transaction figures                   |

### Principles

- **One family, hierarchy by scale**: ABC Favorit does display, heading, and body. Hierarchy comes from size and weight steps, not from mixing typefaces.
- **Hero is big but *not* bold**: the 96px hero runs at weight 400. The casual weight at giant scale is the brand's typographic signature — confident, plain, conversational.
- **Weight climbs as size drops**: display tiers sit at 400–500; headings (h1–h4) step up to 600. The smaller the text, the more weight it needs to hold presence on the busy cream-and-border ground.
- **Negative tracking on display only**: -0.02em to -0.005em on display/heading sizes tightens the giant type; body and below sit at 0 for readability.
- **Generous body leading**: 1.55 line-height on body keeps long-form creator copy comfortable against the high-contrast surfaces.
- **Mono for money**: prices use tabular monospace numerals so figures align in product grids and earnings tables.
- **Pure-black ink**: headlines and body are absolute `#000000` — maximum contrast against cream, consistent with the black-border system.
- **No italics for emphasis**: emphasis is carried by weight (600) or by a pink/black block, not by slanting.

## 4. Component Stylings

### Buttons

**Primary CTA** ("Start selling", "Get started")
- Background: `#ff90e8` (Gumroad Pink)
- Text: `#000000`, weight 500, 16px
- Border: 1px solid `#000000`
- Shadow: `4px 4px 0 #000` (hard, no blur)
- Padding: 12px / 20px
- Radius: 8px
- Hover: fill `#ff62db`, shadow lifts to `6px 6px 0 #000`
- Press: element translates `4px 4px`, shadow collapses to `0 0 0 #000`
- Use case: every primary action

**Secondary** ("Learn more")
- Background: `#ffffff`
- Text: `#000000`, weight 500
- Border: 1px solid `#000000`
- Shadow: `4px 4px 0 #000`
- Same geometry and press behaviour as primary
- Use case: lower-priority action sitting beside a pink CTA

**Ghost / Tertiary** ("Cancel", "Skip")
- Background: transparent
- Text: `#000000`, weight 500
- Border: 1px solid `#000000`
- No shadow at rest; gains `2px 2px 0 #000` on hover
- Padding: 10px / 16px
- Use case: dismissive or inline actions

**Dark CTA** ("Log in" / inverse moments)
- Background: `#000000`
- Text: `#ffffff`, weight 500
- Border: 1px solid `#000000`
- No offset shadow (the fill *is* the weight)
- Use case: contrasting action, nav, or on-pink surfaces

### Cards

**Standard Card**
- Background: `#ffffff`
- Border: 1px solid `#000000`
- Shadow: `4px 4px 0 #000`
- Radius: 12px
- Padding: 24px
- Hover (if interactive): shadow lifts to `6px 6px 0 #000`, slight `-2px -2px` translate
- Use case: product card, feature tile, pricing card

**Pink Card** (highlight / featured)
- Background: `#ff90e8`
- Text: `#000000`
- Border: 1px solid `#000000`
- Shadow: `4px 4px 0 #000`
- Radius: 12px
- Use case: featured plan, promo block, the one card you want noticed

**Product Tile** (creator storefront)
- Background: `#ffffff`, 1px black border, `4px 4px 0` shadow
- Cover image at top (full-bleed inside the border, no inner radius)
- Title 18px / 600, price in mono below, rating in yellow stars
- Use case: the grid of products on a creator's page

### Badges, Tags, Pills

**Soft Badge**
- Background: `#ffe1f8` (brand-soft)
- Text: `#000000`, 12px / 500
- Border: 1px solid `#000000`
- Radius: pill (9999)
- Padding: 4px / 10px
- Use case: "New", "Bestseller", category tag

**Accent Block Tag** (flat coloured chip)
- Background: one of `#ffc900` / `#90a8ed` / `#23a094`
- Text: `#000000`, border 1px black, square or 4px radius
- Use case: "Popular", "Sale", status flags

### Inputs / Forms

**Text Input**
- Background: `#ffffff`
- Border: 1px solid `#000000`
- Radius: 8px
- Height: 44px
- Padding: 10px / 14px
- Focus: `2px solid #000` ring with 2px offset (no colour change — the border *is* the system)
- Placeholder: `#767676`
- Use case: email signup, product fields, search

**Price Field** (with currency prefix)
- Same frame as text input
- `$` prefix in `#555555`, value in mono `tnum`
- Use case: "Set your price" — Gumroad's core creator gesture

**Checkbox / Toggle**
- Square 18px box, 1px black border, white fill; checked state fills `#ff90e8` with a black check
- Use case: plan options, agree-to-terms

### Navigation

**Top Nav**
- Height: 64px
- Background: `#f4f4f0` (cream, matches canvas)
- Bottom border: 1px solid `#000000` (the nav is *underlined*, not floated)
- Logo left (Gumroad wordmark in black), nav links centre/right, "Log in" + a pink "Start selling" CTA
- Nav link: 16px / 500, colour `#000000`; hover gains underline

**Footer**
- Background: `#f4f4f0`
- Top border: 1px solid `#000000`
- Black text, column headers 600, links 400 with hover underline
- Padding: 48px vertical
- Often closes with a large pink or yellow CTA block (black-bordered)

### Tabs
- Container row of black-bordered pills
- Active: `#ff90e8` fill, black text, `2px 2px 0 #000` shadow
- Inactive: white fill, black text, no shadow

### Tooltips
- Background: `#000000`
- Text: `#ffffff`, 13px / 500
- Radius: 4px, no border (the black fill is the frame)
- Padding: 6px / 10px

### Modals
- Overlay: `rgba(0, 0, 0, 0.5)`
- Dialog: `#ffffff` bg, 1px black border, `8px 8px 0 #000` hard shadow, 12px radius, 32px padding
- Black close glyph top-right

## 5. Layout Principles

### Spacing System
Base 4px. Scale: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96. Section spacers run 64–96px; component padding clusters at 24px. The spacing is generous around blocks so the black borders and offset shadows have room to breathe without colliding.

### Grid & Container
- Page max-width 1280px
- Prose width 720px
- 12-col grid with 24px gutters
- Product grids: 3–4 cards per row on desktop, each a self-contained black-bordered tile
- Header height 64px, full-width with a single bottom border rule

### Whitespace Philosophy
Gumroad balances **busy, high-contrast blocks with deliberate cream breathing room**. Because every element is outlined and shadowed, crowding reads as noise fast — so blocks get padded apart on the cream ground, letting each card sit like a separate object on a desk. The cream itself functions as whitespace: it never feels empty because it's warm, but it gives the loud pink-and-black blocks somewhere to rest.

### Section Cadence
Cream canvas → white card cluster → cream canvas → pink/yellow highlight block → cream canvas → footer (cream, top-bordered, often a final coloured CTA block). Coloured blocks are the page's punctuation; the cream-and-border system is the constant.

## 6. Shapes & Radius Scale

| Tier        | Value | Use                                              |
|-------------|-------|--------------------------------------------------|
| None        | 0     | Full-bleed cover images inside a bordered card   |
| Micro       | 2     | Tiny chips, inline tags                          |
| SM          | 4     | Inputs (compact), small badges, tooltips         |
| MD          | 8     | Buttons, inputs, default controls                |
| LG          | 12    | Cards, modals, product tiles                     |
| XL          | 16    | Large feature panels, hero cards                 |
| Pill        | 9999  | Soft badges, status pills, tabs                  |

Gumroad's signature radius is **modest (8–12px)**. The corners are softened just enough to feel friendly, but never so much that the black border loses its hard, stamped quality. The radius is deliberately *smaller* than a typical rounded-SaaS site — the brand wants boxes that look like labels, not pillows. Pill radius is reserved for badges and tabs.

## 7. Depth & Elevation

| Level   | Treatment                                          | Use                                          |
|---------|----------------------------------------------------|----------------------------------------------|
| 0       | Flat on cream `#f4f4f0`, no border                  | Body copy, plain text blocks                 |
| 1       | 1px black border, no shadow                         | Dividers, ghost buttons, inline frames       |
| 2       | 1px border + `2px 2px 0 #000`                       | Small badges, tabs, compact chips            |
| 3       | 1px border + `4px 4px 0 #000`                       | Default cards, buttons, inputs               |
| 4       | 1px border + `6px 6px 0 #000`                       | Hover state, featured cards                  |
| 5       | 1px border + `8px 8px 0 #000`                       | Hero cards, modals                           |
| Pressed | 1px border + `0px 0px 0 #000` (collapsed)           | Active/clicked state                          |

### Shadow Philosophy

Gumroad's elevation system is **graphic, not atmospheric**. The shadow is a solid black rectangle offset down-and-right with *zero blur* — it does not simulate light, it simulates a physical card lifted off a surface and casting a flat, hard shadow, like a printed sticker. Elevation is a discrete, countable ladder (`2 → 4 → 6 → 8`px offset) rather than a continuous blur-and-spread system. The single most distinctive move is the **press collapse**: clicking a button or card translates it `4px 4px` *into* its own shadow while the shadow shrinks to zero, so the element appears to physically depress into the page. This mechanical, tactile feedback is core to the neo-brutalist feel and is unique among mainstream commerce sites.

## 8. Interaction & Motion

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — most state changes
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal/menu entrance

### Durations
- **Fast**: 150ms — button hover, shadow lift, link underline
- **Standard**: 240ms — card hover, colour transitions
- **Slow**: 320ms — modal entrance, accordion expand

### Per-Component Recipes
- **Button hover**: fill `#ff90e8` → `#ff62db` over 150ms; shadow grows `4px 4px` → `6px 6px 0 #000`; element translates `-2px -2px` (lifts toward the viewer)
- **Button press**: element translates `+4px +4px`, shadow collapses to `0 0 0 #000` over 150ms — the "click-down"
- **Card hover**: shadow lifts to `6px 6px 0 #000`, slight `-2px -2px` translate over 240ms
- **Link hover**: underline appears, colour shifts to `#ff62db` over 150ms
- **Modal entrance**: overlay fades 240ms; dialog scales `0.97 → 1.0` and shadow snaps to `8px 8px 0 #000` over 320ms ease-emphasized
- **Accordion**: 320ms height expand; chevron rotates 180°

### Page Transitions
Transitions are minimal — the brand favours instant, snappy state changes over choreographed page motion. Content fades/slides in subtly on scroll (15–20px translate, 240ms) but there is no heavy parallax or scroll-jacking.

### Reduced Motion
Honoured via `prefers-reduced-motion: reduce`. The signature press-translate and shadow-collapse **snap** to their end states instead of animating; scroll-in fades become instant; modal scale becomes a plain fade. The hard graphic depth is preserved — only the movement is removed.

## 9. Accessibility & A11y

### Contrast Pairs
- `#000000` text on `#f4f4f0` canvas: **19.05:1** — AAA
- `#000000` text on `#ffffff` surface: **21.0:1** — AAA (maximum)
- `#000000` text on `#ff90e8` brand: **10.41:1** — AAA (the pink is light enough that *black* ink, never white, sits on it)
- `#555555` muted on `#f4f4f0` canvas: **6.76:1** — AAA for normal text
- `#767676` subtle on `#f4f4f0` canvas: **~4.8:1** — AA for normal text (use for captions/metadata only)
- `#ffffff` on `#000000` (dark CTA / tooltip): **21.0:1** — AAA

Note: **pink is never a text colour and never a text background with white ink**. Pink `#ff90e8` on cream is only ~1.83:1 — it works exclusively as a *fill behind black ink* or as a decorative block, never as type on the canvas.

### Focus Indicators
`2px solid #000` ring with 2px offset on every interactive element. The hard black ring matches the border system, so focus reads as an intentional part of the visual language rather than a browser default.

### ARIA Patterns
- **Dialog**: modals use `role="dialog"`, `aria-modal="true"`, focus-trap
- **Tabs**: `role="tablist"` / `role="tab"` with `aria-selected`
- **Accordion**: `aria-expanded` on the trigger, region labelled by the header
- **Live region**: checkout/payout confirmation toast uses `aria-live="polite"`

### Keyboard Nav
Tab order matches the cream-grid reading flow (left-to-right, top-to-bottom). Modals are focus-trapped and Escape-dismissible. The press-collapse animation is decorative only — keyboard activation triggers the same end state.

### Screen Reader Hints
- Logo: `role="img"` with `aria-label="Gumroad"`
- Price fields: visible "$" + numerals; `aria-label="Price in US dollars"`
- Star ratings: `aria-label="4.8 out of 5 stars"`, not just decorative glyphs

### Reduced Motion
All press/hover/scroll animations honour `prefers-reduced-motion`. The hard-shadow depth remains; only movement is suppressed.

## 10. Responsive Behavior

### Breakpoints
| Name    | Width      | Use                              |
|---------|------------|----------------------------------|
| mobile  | <640       | Stacked single-column            |
| tablet  | 640–1024   | 2-col grid                       |
| desktop | 1024–1280  | 3–4-col grid                     |
| wide    | ≥1280      | Full 1280px layout               |

### Touch Targets
Minimum 44×44px. Buttons sit at 44px height; inputs at 44px. On touch, the press-collapse fires on `:active` so the tactile feedback survives.

### Collapsing Strategy
- Top nav collapses to a hamburger below 1024px; the pink "Start selling" CTA persists
- display-hero scales 96 → 64 → 44px (desktop → tablet → mobile) — still casual weight
- Product grid 4-col → 2-col → 1-col
- Hard shadows shrink on mobile (`4px 4px` → `3px 3px`) so they don't crowd narrow viewports

### Image Behavior
- Product covers sit full-bleed *inside* the card's black border (no inner radius), so the border frames the image like a poster mount
- `loading="lazy"` for below-fold product tiles
- Cover images keep a fixed aspect ratio (4:3 or 16:9) so grids stay tidy

### Container Queries
Product tiles use container queries where supported: below a narrow tile width, the price and rating row stacks below the title instead of sitting inline.

## 11. Content & Voice

### Tone
**Plain-spoken, encouraging, slightly irreverent.** Gumroad's voice talks to the first-time creator like a friendly peer who's been there. Headlines are direct and human ("Earn your first dollar online"), never corporate-aspirational. The brand is comfortable being small and earnest — it celebrates the *first* sale, not the millionth — and its copy carries a faint indie/anti-establishment edge that matches the deliberately rough visual style.

### Microcopy Patterns
- **Button verbs**: "Start selling", "Get started", "Add to cart", "I want this!", "Pay", "Download"
- **The signature CTA**: **"I want this!"** — the checkout button, written in the buyer's own voice, exclamation included. It's the brand's most-recognised piece of copy.
- **Error message recipe**: short and human. "Something went wrong. Try again?"
- **Success confirmation**: celebratory — "You made a sale! 🎉" — Gumroad leans into the milestone.
- **Loading state**: "Hang tight…"

### Empty States
- **No products yet**: "You haven't published anything yet. Let's fix that."
- **No sales yet**: "No sales yet — but everyone starts at zero. Share your link."
- Empty states are encouraging, never scolding — they nudge the creator toward the next action.

### CTA Verb Conventions
- **Acquisition**: "Start selling", "Get started", "Create your first product"
- **Sign-in**: "Log in"
- **Purchase**: "I want this!", "Add to cart", "Pay"
- **Creator actions**: "Publish", "Set your price", "Share your link"
- **Exploration**: "Learn more", "See how it works"

The brand treats the creator's *first dollar* as the hero metric, and the copy reinforces that everywhere — encouraging, milestone-driven, and warmly low-pressure.

## 12. Dark Mode & Theming

Gumroad's marketing and storefront experience is **light-only** — built around the cream `#f4f4f0` canvas, hot pink, and black borders. There is no system-wide dark variant; the design's identity is fundamentally tied to "bright spot colour on warm paper", which a dark inversion would erase.

If extending to a dark theme, the safest move is to invert the *ground* while keeping the pink and the hard-border logic:

```yaml
colors-dark:
  bg: '#1a1a1a'                 # near-black ground replacing cream
  surface: '#262626'           # elevated card surface
  text: '#ffffff'              # white ink
  text-muted: '#a0a0a0'
  brand: '#ff90e8'             # pink stays — it reads well on dark too
  brand-deep: '#ff62db'
  border: '#ffffff'            # the hard border flips to white
  shadow-hard: '#ff90e8'       # offset shadow can shift to pink for glow-by-offset
  divider: '#3a3a3a'
```

The defining gesture — **hard 1px border + zero-blur offset shadow** — must survive the inversion: in dark mode the border flips to white and the offset shadow can take on the pink for a "graphic glow" effect. Without the border-and-offset system, a dark Gumroad would just be a generic dark SaaS site; the neo-brutalist grammar, not the colours, is what must persist.

## 13. Lineage & Influences

Gumroad is the flagship of the **neo-brutalist web movement** that surged around 2020–2022, and its visual grammar draws from three older sources. First, the **Swiss / International Typographic Style** — flat grids, an unornamented grotesque (ABC Favorit is a direct descendant of that tradition), and a rejection of decoration — but Gumroad *loosens* the Swiss austerity, swapping the cool restraint for cheerful colour and deliberately crude framing. Second, the **hard 1px borders and beveled-flat controls of early-web and Windows-98-era chrome** — the offset drop shadow and the press-to-collapse interaction are direct descendants of the 3D button bevels of 1990s GUIs, flattened into pure graphic shapes. Third, the **cheap-print energy of Risograph posters and punk zines** — bright spot colour on warm paper stock, hand-assembled layouts, and an anti-polish attitude.

The throughline is **anti-corporate approachability**. During the 2021 relaunch under founder Sahil Lavingia, Gumroad deliberately walked away from the gradient-glass-blur aesthetic of Stripe and the dark-precision look of Linear, choosing instead something that feels closer to a market-stall flyer than a financial platform. The roughness is intentional and load-bearing: by making the interface look almost handmade, Gumroad tells every would-be creator that selling online is not the domain of polished agencies but of any individual with one thing to sell. What it rejects is precisely the smooth, trustworthy, enterprise-grade gloss that most fintech and SaaS brands chase — Gumroad would rather look friendly and a little rough than slick and intimidating.

**Influences:**
- **Dinamo — ABC Favorit** ([abcdinamo.com](https://abcdinamo.com/typefaces/favorit)) — The grotesque sans that defines the brand's voice
- **Swiss / International Typographic Style** ([wikipedia](https://en.wikipedia.org/wiki/International_Typographic_Style)) — Flat grid and unornamented type, then loosened
- **Neo-brutalism (architecture → web)** ([wikipedia](https://en.wikipedia.org/wiki/Brutalist_architecture)) — The raw-block, hard-border movement Gumroad anchors on the web
- **Risograph print aesthetic** ([wikipedia](https://en.wikipedia.org/wiki/Risograph)) — Bright spot-colour-on-paper energy of the cream + pink palette
- **Sahil Lavingia** ([sahillavingia.com](https://sahillavingia.com)) — Founder who directed the 2021 anti-corporate relaunch

## 14. Do's and Don'ts

**Do:**
- Use the warm cream `#f4f4f0` canvas — it's the off-paper ground the whole system rests on
- Outline almost everything in a **1px hard black `#000000` border** — it's the structural backbone
- Apply the **hard offset shadow** `4px 4px 0 #000` (zero blur) to cards and buttons
- Collapse the shadow on press — the "click-down" translate is the signature interaction
- Use hot pink `#ff90e8` as the single brand voltage — primary fills, highlight blocks
- Put **black ink on pink** (never white) — pink is light, 10.41:1 with black
- Run hero headlines **huge (96px) at casual weight (400)** in ABC Favorit
- Keep radius modest (8–12px) so boxes read as labels, not pillows
- Use the bright accent kit (yellow `#ffc900`, periwinkle `#90a8ed`, teal `#23a094`) as flat black-bordered blocks
- Write encouraging, milestone-driven copy that celebrates the creator's first dollar

**Don't:**
- Don't use pure white as the canvas — cream `#f4f4f0` is what keeps it warm, not clinical
- Don't use blurred/diffuse shadows — every shadow is solid black with zero blur
- Don't drop the black borders — without them the whole neo-brutalist grammar collapses
- Don't put white text on pink — pink is a fill *behind black*, not a colour for white ink
- Don't use pink as a text colour on cream — at ~1.83:1 it fails contrast entirely
- Don't make the hero bold — the casual weight 400 at giant scale is the whole point
- Don't over-round corners — radius above ~16px turns the labels into generic soft cards
- Don't add gradients, glassmorphism, or blur — the system is deliberately flat
- Don't crowd blocks together — the borders and shadows need cream breathing room
- Don't make links pink — links are black with underline; pink is reserved for fills
- Don't write corporate-aspirational copy — the voice is plain, human, and encouraging

## 15. Agent Prompt Guide

### Quick Color Reference

```
Canvas:       #f4f4f0  (warm cream)
Surface:      #ffffff  (white card)
Ink / Border: #000000  (text AND every border)
Brand:        #ff90e8  (Gumroad Pink)
Brand Deep:   #ff62db  (hover/pressed pink)
Brand Soft:   #ffe1f8  (pale pink wash)
Yellow:       #ffc900  (accent block)
Periwinkle:   #90a8ed  (accent block)
Teal:         #23a094  (success/earnings)
Muted:        #555555  (secondary text)
Shadow:       4px 4px 0 #000  (hard, zero blur)
```

### Example Component Prompts

1. *"Create a Gumroad hero: warm cream `#f4f4f0` background, a 96px ABC Favorit headline at weight 400 (casual, NOT bold) in pure black `#000000` with -0.02em tracking — text 'Earn your first dollar online'. Below, an 18px body in `#000000`. A primary CTA: hot pink `#ff90e8` fill, black text weight 500, 1px solid black border, hard offset shadow `4px 4px 0 #000`, 8px radius, labelled 'Start selling'. On press the button translates 4px/4px and its shadow collapses to 0."*

2. *"Design a Gumroad product card: white `#ffffff` background, 1px solid black `#000000` border, hard offset shadow `4px 4px 0 #000`, 12px radius. Cover image full-bleed inside the border at the top (no inner radius). Below: title in 18px ABC Favorit weight 600, price in monospace with tabular numerals, and a yellow `#ffc900` star rating. On hover the shadow lifts to `6px 6px 0 #000` and the card translates -2px/-2px."*

3. *"Build a Gumroad pricing block: three cards in a row on cream, each white with a 1px black border and `4px 4px 0 #000` shadow. Make the middle (featured) card pink `#ff90e8` with black ink and a soft pink `#ffe1f8` 'Most popular' badge with a 1px black border and pill radius. CTA on each: pink primary button with the hard-shadow press-collapse."*

4. *"Compose a Gumroad signup form: cream background, a white card with 1px black border and `4px 4px 0 #000` shadow. An email input at 44px height, white fill, 1px black border, 8px radius, focus ring `2px solid #000` with 2px offset. Submit button in pink `#ff90e8`, black text 'Get started', hard offset shadow."*

5. *"Design a Gumroad nav bar: 64px tall, cream `#f4f4f0` background, a single 1px solid black bottom border (the nav is underlined, not floated). Black wordmark left, black 16px/500 nav links centre-right, a black 'Log in' link and a pink `#ff90e8` 'Start selling' button (1px black border, `4px 4px 0 #000` shadow) far right."*

6. *"Create a Gumroad success state: a centered white card, 1px black border, `8px 8px 0 #000` shadow, 12px radius. Headline 'You made a sale! 🎉' in 40px ABC Favorit weight 600 black. Below, the amount in monospace tabular numerals. A pink 'View your sales' button with the hard offset shadow."*

### Iteration Guide

1. **Warm up the ground**: if your background is pure white, switch it to cream `#f4f4f0`. The off-paper tone is the first thing that reads as "Gumroad".
2. **Outline everything in black**: add a 1px solid `#000000` border to every card, button, input, and badge. This is the single biggest move toward the brand.
3. **Make shadows hard**: replace any blurred `box-shadow` with a solid `4px 4px 0 #000` (zero blur, down-and-right offset). No `rgba`, no spread, no blur radius.
4. **Add the press-collapse**: on `:active`, translate the element `4px 4px` and shrink its shadow to `0 0 0`. This mechanical click is the signature interaction.
5. **Pink is a fill, black is the ink**: use `#ff90e8` for button/card/block fills only, always with *black* text on top — never pink text, never white-on-pink.
6. **Un-bold the hero**: drop your giant headline to weight 400 in ABC Favorit (or a grotesque fallback). The casual weight at 96px is the brand's voice.
7. **Pull radius down**: if corners are above ~16px, reduce to 8–12px so boxes read like labels, not pillows.
8. **Loosen the copy**: rewrite corporate headlines into plain, encouraging, milestone-driven lines ("Earn your first dollar online") — and make the checkout button say "I want this!".