---
version: alpha
name: Gumroad
description: A defiantly flat creator-commerce canvas where bubblegum pink fills sit inside hard 1px black borders, every interactive surface looks die-cut from paper, and a heavy ABC Favorit grotesk shouts plain-spoken copy — the anti-gradient, sticker-book aesthetic of selling your first dollar online.
colors:
  # Surface / canvas
  background: "#f4f4f0"        # warm off-white page canvas
  surface: "#ffffff"           # white card / tile fill
  surface-muted: "#f4f4f0"     # input fill, muted panels

  # Ink / text — black does the heavy lifting
  ink: "#000000"               # text, borders, primary fills — pure black
  ink-soft: "#242423"          # near-black headings on white, secondary ink
  ink-muted: "#808080"         # captions, placeholder, metadata
  on-dark: "#ffffff"           # text on black surfaces

  # Brand accent — the signature Gumroad pink
  primary: "#ff90e8"           # the bubblegum brand pink — fills, highlights, the spinning G
  primary-strong: "#ff6fdf"    # deeper pink for pressed / hover tint
  on-primary: "#000000"        # black text/icon on pink (pink is a fill behind black, never a CTA text color)

  # Supporting accents — the crayon-box palette
  accent-yellow: "#ffc900"     # highlight yellow, coin accents
  accent-yellow-lime: "#f1f333" # the lime CSS-var yellow
  accent-red: "#dc341e"        # alert / sale red
  accent-green: "#23a094"      # success teal-green
  accent-blue: "#90a8ed"       # periwinkle blue accent

  # Borders — the structural device
  border: "#000000"            # the hard 1px black outline on everything
  border-soft: "#242423"       # near-black input border

  # Shadow tint (opaque approximation for the elevation table)
  shadow-hard: "#000000"       # was rgba(0,0,0,1) hard offset shadow — Google format requires hex

typography:
  display-mega:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.4px
    fontFeature: "\"ss04\", \"ss11\""
  display:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.4px
    fontFeature: "\"ss04\", \"ss11\""
  heading:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.4px
    fontFeature: "\"ss04\", \"ss11\""
  heading-sub:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.4px
    fontFeature: "\"ss04\", \"ss11\""
  title:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.4px
    fontFeature: "\"ss04\", \"ss11\""
  body-large:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.4px
    fontFeature: "\"ss04\", \"ss11\""
  body:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: -0.4px
    fontFeature: "\"ss04\", \"ss11\""
  link:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: -0.4px
    fontFeature: "\"ss04\", \"ss11\""
  button:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.4px
  caption:
    fontFamily: "ABC Favorit, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 56px
  4xl: 96px
  5xl: 128px
  6xl: 224px

rounded:
  sm: 4px
  md: 16px
  lg: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 8px 24px
    border: "1px solid {colors.border}"
  button-primary-hover:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-dark}"

  button-pink:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 8px 24px
    border: "1px solid {colors.border}"
  button-pink-hover:
    backgroundColor: "{colors.primary-strong}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 8px 24px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"

  button-pill:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
    border: "1px solid {colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    border: "1px solid {colors.border}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    border: "1px solid {colors.border}"

  input:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 32px
    border: "1px solid {colors.border-soft}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.ink}"

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
    border: "1px solid {colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px 32px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.link}"
    padding: 0px
---

# Gumroad Design System

## Overview

Gumroad's site is a refusal. In an era when every SaaS landing page reaches for a gradient mesh and a soft drop shadow, Gumroad draws a hard 1px black line (`{colors.border}`) around everything and dares you to call it ugly. The canvas is a warm, papery off-white (`{colors.background}`) — not pure white, which keeps it from feeling sterile — and onto it the brand stamps blocks of bubblegum pink (`{colors.primary}`), saturated crayon-box yellows, reds, and teals, each one boxed inside that same uncompromising black outline. Nothing has a soft edge of light. The whole page reads like a sticker sheet or a zine, die-cut and assembled by hand.

The signature move is the **flat offset shadow plus hard border** combo. Cards and the spinning "G" coins don't float on a blurred ambient shadow; they cast a solid black shadow with zero blur, the way a sticker sits proud of a page. Paired with the 1px black stroke on every surface, this gives the entire system a tactile, physical, almost printed quality. Pink is the brand's flag — it's the color of the rotating Gumroad coin and the highlight behind key copy — but notice the discipline: the pink is almost always a *fill behind black text or a black icon*, never the color of the words themselves. Black does the typographic heavy lifting; pink does the shouting.

Then there's the voice. Type is set in **ABC Favorit**, a Swiss-rooted neo-grotesk with quirky stylistic-set alternates (`ss04`, `ss11`) switched on, tracked tight at -0.4px and run huge — the hero "Go from 0 to $1" lands near 96px (`{typography.display-mega}`). The copy is plain-spoken and confident ("Anyone can earn their first dollar online"), and the type matches: no thin weights, no elegant flourishes, just blunt grotesk mass. The overall impression is anti-corporate, creator-first, and a little punk — software that looks like it was made by people who'd rather be making zines.

**Key Characteristics:**
- Warm off-white canvas (`{colors.background}`), never pure white — keeps the page from feeling clinical
- **Hard 1px black borders** (`{colors.border}`) outline nearly every surface — the core structural device
- **Flat offset shadows** (zero blur, solid black) make elements look die-cut and physical, not floating
- Bubblegum pink (`{colors.primary}`) used as a *fill behind black*, never as text color — black does the typographic work
- A saturated crayon-box of supporting accents: yellow (`{colors.accent-yellow}`), red, teal-green, periwinkle
- **ABC Favorit** neo-grotesk with stylistic sets `ss04` + `ss11`, run at huge sizes, tracked -0.4px
- Compact 4px radius (`{rounded.sm}`) on buttons and inputs; larger 16-24px on content cards
- Plain-spoken, confident copy — software that reads like a zine, not an enterprise deck
- Zero gradients, zero soft ambient blur — the flatness is a deliberate stance
- Pill-shaped (`{rounded.pill}`) nav chips and avatar badges sit alongside the boxy cards

## Colors

### Surface & Canvas
- **Off-White Paper** (`{colors.background}`): The warm papery page canvas — the default backdrop for everything.
- **White** (`{colors.surface}`): Card and tile fills that sit on the off-white page, separated by their black border.
- **Muted Panel** (`{colors.surface-muted}`): Input fills and quiet panels — same value as the page, distinguished by border.

### Ink / Text
- **Pure Black** (`{colors.ink}`): Text, borders, and primary button fills. Black is the workhorse color of the whole system.
- **Near-Black** (`{colors.ink-soft}`): Slightly softened headings on white and the input border.
- **Gray** (`{colors.ink-muted}`): Placeholder text, captions, metadata.
- **White on Dark** (`{colors.on-dark}`): Text on black buttons and surfaces.

### Brand Accent
- **Gumroad Pink** (`{colors.primary}`): The signature bubblegum pink — fills, highlight blocks, the rotating coin. Almost always a backdrop for black text/icons.
- **Pink Strong** (`{colors.primary-strong}`): A deeper pink for hover/pressed tints on pink surfaces.

### Supporting Accents
- **Yellow** (`{colors.accent-yellow}`) / **Lime** (`{colors.accent-yellow-lime}`): Highlight and coin accents.
- **Red** (`{colors.accent-red}`): Sale / alert moments.
- **Teal-Green** (`{colors.accent-green}`): Success states.
- **Periwinkle** (`{colors.accent-blue}`): A cooler accent for variety.

### Borders & Shadow Tint
- **Black Border** (`{colors.border}`): The hard 1px stroke on every card, button, and input — the system's defining structural element.
- **Hard Shadow** (`{colors.shadow-hard}`): Opaque stand-in for the zero-blur offset shadow (the original was solid black — recorded here for the elevation table).

## Typography

### Font Family
- **Primary**: `ABC Favorit` — a Swiss neo-grotesk with personality, with fallbacks `Inter, Helvetica Neue, Arial, sans-serif`. Carries every level of the hierarchy; there is no separate display or mono face.
- **OpenType Features**: stylistic sets `"ss04"` and `"ss11"` are switched on across display and body type — these swap in Favorit's alternate glyph shapes that give the brand its quirky, characterful grotesk look.
- **Tracking**: a consistent, gentle negative tracking of -0.4px at nearly every size — even body text — for a dense, deliberate set.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-mega` | 96px / 400 — the marquee hero ("Go from 0 to $1") |
| `display` | 72px / 500 — major section headlines |
| `heading` | 48px / 500 — feature headings |
| `heading-sub` | 30px / 400 — sub-section headings |
| `title` | 24px / 500 — card titles ("Sell anything") |
| `body-large` | 20px / 400 — lead paragraphs |
| `body` | 18px / 400 — standard body copy |
| `link` | 18px / 500 — inline links, weighted up |
| `button` | 18px / 400 — button labels |
| `caption` | 16px / 400 — captions, badge text, metadata |

### Principles
- **One face, all sizes**: ABC Favorit does everything from 96px hero to 16px caption. No font pairing.
- **Stylistic sets are the signature**: keep `ss04` + `ss11` on — they're what make the type read as Gumroad rather than generic Helvetica.
- **Mass over delicacy**: weights stay at 400-500. The system never goes thin; confidence comes from size and tight tracking, not weight contrast.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Gumroad's spacing is generous and bold — major sections breathe with very large gaps (`{spacing.4xl}` = 96px up to `{spacing.6xl}` = 224px), while the bordered cards keep tight, deliberate internal padding.

### Grid & Container
- Wide, near-full-bleed content blocks — the design favors big colorful tiles edge to edge over a narrow centered column
- Common pattern: a bordered card grid where each tile is its own boxed, outlined object
- Hero is left-aligned text over the papery canvas with decorative spinning coins floating in the margins

### Whitespace Philosophy
- **Borders define space, not whitespace alone**: separation comes from the black outline, so elements can sit close without blurring together
- **Big, confident gaps** between major sections — the page is not afraid of empty off-white room
- **Decorative objects in the margins**: the rotating "G" coins occupy whitespace as playful furniture

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, 1px black border (`{colors.border}`) only | Most surfaces — the default |
| Offset (Level 1) | Hard offset shadow, zero blur, solid black (`{colors.shadow-hard}`), e.g. `4px 4px 0 0` | Cards and tiles that should look die-cut / proud of the page |
| Lifted (Level 2) | Larger hard offset, e.g. `8px 8px 0 0` (`{colors.shadow-hard}`) | The most prominent stickers/coins and hover-lifted cards |

**Shadow Philosophy**: Gumroad rejects the soft ambient drop shadow entirely. Its shadows are *hard offsets* — a solid black copy of the shape pushed a few pixels down and right with no blur, exactly like the shadow a real paper sticker casts. Combined with the 1px black border on every object, this produces the system's defining tactile, printed, die-cut quality. There is no blur, no light source softness, no glow. Depth is graphic, not photographic.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Buttons, inputs, the default tight corner |
| `md` | 16px | Content cards and tiles |
| `lg` | 24px | Large feature cards and panels |
| `pill` | 9999px | Nav chips, avatar badges, count pills |

The system is split-personality on radius: crisp 4px corners on interactive controls (buttons/inputs feel boxy and stamped), softer 16-24px on big content cards, and full pills on nav chips and badges. The constant across all of them is the hard black border riding the edge.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Black (`{colors.ink}`) fill, white text, 1px black border, 4px radius. The main CTA ("Start selling"). Hover softens to `{colors.ink-soft}`.
- **`button-pink`** — Bubblegum pink (`{colors.primary}`) fill with **black** text and a black border — the playful brand CTA. Hover deepens to `{colors.primary-strong}`.
- **`button-secondary`** — White fill, black text, black border. Hover fills pink (`{colors.primary}`) — a signature delight.
- **`button-pill`** — Black pill (`{rounded.pill}`) used in the nav for items like "About".

### Cards
- **`card`** / **`card-elevated`** — White surface, **1px black border**, 16-24px radius. The elevated variant adds a hard offset shadow to look die-cut and gets larger padding.

### Inputs
- **`input`** — Off-white fill, near-black border, 4px radius (the marketplace search). **`input-focus`** swaps to a white fill and a crisp pure-black border — no glow ring, just a harder line.

### Badges
- **`badge`** — Pink (`{colors.primary}`) pill with black text and black border. Small, stamped, sticker-like.

### Navigation
- **`nav-bar`** — Sits flush on the off-white canvas, black text, with pill-shaped chips for primary nav items.

### Links
- **`link`** — Black text weighted up to 500. Links are bold rather than colored — the brand reserves color for fills, not type.

## Do's and Don'ts

### Do
- Outline every card, button, and input with a **1px black border** (`{colors.border}`) — it's the structural backbone
- Keep the canvas warm off-white (`{colors.background}`), not pure white
- Use **hard offset shadows** (zero blur, solid black) to make elements look die-cut — `4px 4px 0 0` style
- Use pink (`{colors.primary}`) as a *fill behind black text/icons*, never as the text color itself
- Set type in ABC Favorit with stylistic sets `ss04` + `ss11` on, tracked -0.4px
- Let buttons fill pink (`{colors.primary}`) on hover from a white default — the signature interaction
- Run hero type huge (96px) and left-aligned with confident, plain-spoken copy
- Keep interactive controls at a tight 4px radius (`{rounded.sm}`); content cards at 16-24px

### Don't
- Don't use blurred, soft, ambient drop shadows — the whole system is hard offset only
- Don't reach for gradients or mesh backgrounds — flat saturated blocks only
- Don't color the text pink — pink is a fill, black is the ink
- Don't drop the black border to "clean things up" — it's the identity, not decoration
- Don't use thin font weights — Favorit stays at 400-500; mass comes from size and tracking
- Don't make corners uniformly soft — keep the boxy 4px on controls vs. rounder cards split
- Don't turn off the stylistic sets — generic Helvetica fallback loses the brand's quirk

---

## Responsive Behavior

### Breakpoints
*(Only one breakpoint surfaced in extraction; the values below are the standard stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero type scales 96px → ~40px; bordered tiles stack full-width; nav collapses to a menu; decorative coins reduce or hide |
| Tablet | 640–1023px | Two-column tile grids begin; hero stays left-aligned at reduced size |
| Desktop | 1024–1279px | Full multi-column bordered tile layout |
| Large | ≥1280px | Wide near-full-bleed blocks; generous section gaps (`{spacing.4xl}`+) |

### Touch Targets
- Buttons run comfortably tall with `8px 24px` padding plus the 1px border
- Pill nav chips and badges keep generous tap padding

### Collapsing Strategy
- **Navigation**: horizontal pill nav → menu toggle on mobile
- **Hero**: huge display type drops dramatically (96px → ~40px) while keeping the -0.4px tracking
- **Tile grid**: multi-column bordered cards collapse to a single stacked column, each keeping its black border and offset shadow
- **Spacing**: oversized section gaps compress but stay generous

### Image Behavior
- Decorative brand objects (the spinning "G" coins) are positioned furniture that reduce or hide on small screens
- Product/preview imagery sits inside bordered, rounded cards and scales as grid children

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Off-White Paper (`{colors.background}`)
- Text: Pure Black (`{colors.ink}`)
- Brand accent: Gumroad Pink (`{colors.primary}`) — used as a fill, behind black
- Secondary text: Gray (`{colors.ink-muted}`)
- Border: Black (`{colors.border}`) — 1px on everything
- Primary CTA: Black (`{colors.ink}`) fill or Pink (`{colors.primary}`) fill with black text

### Example Component Prompts

- "Create a hero on warm off-white (`{colors.background}`) with a 96px black (`{colors.ink}`) headline in ABC Favorit, stylistic sets ss04 + ss11 on, letter-spacing -0.4px, left-aligned, and two buttons: a black primary (`{colors.ink}` fill, white text, 1px black border, `{rounded.sm}`) and a pink one (`{colors.primary}` fill, black text, 1px black border)"
- "Build a content card: white (`{colors.surface}`) fill, **1px solid black border** (`{colors.border}`), `{rounded.md}` radius, 24px padding, and a hard offset shadow `4px 4px 0 0` in solid black (`{colors.shadow-hard}`) so it looks die-cut"
- "Make a secondary button: white fill, black text, 1px black border, `{rounded.sm}` radius — on hover fill it bubblegum pink (`{colors.primary}`) while keeping the black text and border"
- "Create a pink badge: pink (`{colors.primary}`) fill, black text, 1px black border, `{rounded.pill}` radius, `6px 12px` padding — small and sticker-like"
- "Design a search input: off-white (`{colors.surface-muted}`) fill, near-black border (`{colors.border-soft}`), `{rounded.sm}` radius; on focus swap to white fill with a pure-black (`{colors.ink}`) border, no glow ring"

### Iteration Guide

1. Start on warm off-white (`{colors.background}`). If you reached for pure white or a gradient, stop — the canvas is papery off-white and flat.
2. Put a 1px black border (`{colors.border}`) on every card, button, and input. If something has no border, it's probably wrong.
3. Replace any blurred drop shadow with a **hard offset shadow** (zero blur, solid black) — `4px 4px 0 0`.
4. Pink (`{colors.primary}`) is a fill, never text. If your text is pink, recolor it black (`{colors.ink}`) and move the pink to a background.
5. Set type in ABC Favorit with `ss04` + `ss11` on, -0.4px tracking, weights 400-500 only. No thin weights.
6. Keep controls boxy at `{rounded.sm}` (4px); soften only the big content cards to `{rounded.md}`–`{rounded.lg}`.
7. Run the hero huge and left-aligned with plain, confident copy — the voice is zine, not enterprise.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Gumroad. Brand names and trademarks belong to their respective owners.