# Gumroad — Marketing Site Design Spec

> Source: gumroad.com (live DOM, computed styles via scripts/extract.js), 2026-08-05 (desktop 1514px). sheetsBlocked: 0 — full stylesheet coverage.
> Coverage: marketing home. Seller dashboard behind login (`needs-dashboard`).
> Reality check: hint said "bold flat maximalist, thick borders + yellow." Partly wrong. The maximalist creator-commerce archetype HOLDS, but the specifics are off: the current site is a **DARK** canvas (#242423), not white; borders are **thin 1px** (usually white), not thick; and the primary accent is **PINK #ff90e8**, not yellow (yellow #ffc900 is present but is one of six accents). The real signature is a dark canvas carrying huge white ABC Favorit grotesque type, playful hand-drawn doodle illustrations, and a bright SIX-colour accent set (pink, purple, green, yellow, lime, red-orange) always paired with BLACK text. Depth is refused (shadow census empty) — flat cards are the canvas colour with 1px hairlines and an asymmetric 24px 24px 24px 4px corner. Distinct from itch.io (calm content-dense) and any light SaaS page.

## 1. Visual Theme & Atmosphere

Playful, flat and maximalist creator-commerce set on a warm near-black canvas. The whole page is #242423; structure comes from 1px hairlines (mostly white) and generous rounded cards that share the canvas colour rather than lifting off it — depth is deliberately refused. Personality lives in two places: a huge white ABC Favorit grotesque running the display, and a bright six-colour accent set (pink #ff90e8, purple #90a8ed, green #23a094, yellow #ffc900, lime #f1f333, red-orange #dc341e) that appears as flat app-icon squares, price tags, chart lines and hand-drawn doodle illustrations. Every accent carries BLACK text, never white. The primary CTA is a square (0px) pink block. A signature asymmetric card corner (24px 24px 24px 4px) and marquee/parallax motion complete the character. Feels: playful, flat, maximalist, indie-confident.

## 2. Color Palette & Roles

### Text & neutrals
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Primary text, product-mockup cards, 1px borders |
| black | `#000000` | Text on every accent colour, dark borders |
| primary | `#dddddd` | Muted text (--primary / --color-primary) |
| canvas | `#242423` | Page background AND card fill (flat) |

### Accent set (each with black text)
| Token | Hex | Role / usage |
|---|---|---|
| pink | `#ff90e8` | Primary brand accent (--accent): CTAs, tags, chart line |
| pink-600 | `#e60076` | Deep pink accent variant |
| pink-800 | `#a3004c` | Darkest pink accent |
| purple | `#90a8ed` | Accent square / illustration |
| green | `#23a094` | Accent square / illustration |
| yellow | `#ffc900` | Accent square / illustration (--orange token) |
| lime | `#f1f333` | Accent square / highlight |
| red-orange | `#dc341e` | Accent square / illustration |

Rule: accents always carry BLACK text (`--accent-foreground: #000000`). Rule: the canvas and cards share `#242423`; borders (1px) do the separating, not shadows. Rule: pink `#ff90e8` is the default brand accent; the other five are for illustration/variety.

## 3. Typography Rules

- Font: **ABC Favorit** (single family, 633× on page; Dinamo neo-grotesque). Specimen stand-in: **Inter** (Favorit is licensed).
- Body: 16px / 24px / 400 / `#ffffff`, tracking -0.4px.
- A constant -0.4px letter-spacing runs across every role.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 96 / 96 | 400 | -0.4px |
| Section (h2) | 48 / 60 | 400 | -0.4px |
| Card title (h3) | 18 / 28 | 700 | -0.4px |
| Body | 16 / 24 | 400 | -0.4px |
| Button / nav | 18–20 / 28 | 400 | -0.4px |

Patterns: display runs at weight 400 (not bold) at very large sizes — hierarchy from scale, not weight; only card titles bump to 700. No uppercase. Constant -0.4px tracking everywhere.

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: bg `#ff90e8` pink, text `#000000`, radius **0px (square)**, h ~79px tall block, pad `8px 24px`, ABC Favorit 18–20px/400. No shadow at rest.
- **Nav pill**: transparent, white text, radius full pill, h 46px, pad `8px 16px`, 18px.
- **Active nav pill**: bg `#ffffff`, text `#000000`, 1px `#000000` border, full pill, h 46px.
- **Log in block**: bg `#000000`, text `#ffffff`, radius 0px, tall block.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | bg `#ff90e8` / black, square | border → `#000000` (`.hover:border-black`) | border `#ff90e8` + 2px `#000000` ring (`.focus:ring-2`), outline hidden | — | not captured |
| Nav pill | transparent / white | fill toward white | same ring recipe | active = white pill | — |

### Inputs
- **Search**: h 64px, bg `#242423`, 1px `#242423` border, radius 4px, pad `0 80px 0 32px`, 20px, placeholder `#ffffff`.
- **Email**: h 48px, transparent, 1px `#ffffff` border, radius 4px, pad `0 16px`, 16px.

### Cards / panels
- Flat: bg `#242423` (same as canvas), 1px hairline border, radius `24px` — with a signature **asymmetric corner** `24px 24px 24px 4px`. No drop shadow.
- Inside: white `#ffffff` product-mockup cards with black text, pink price tags, pink chart lines, hand-drawn doodle art, and flat multi-colour app-icon squares.

### Nav / masthead
- h ~78px, bg `#000000`, lowercase Gumroad wordmark left (+ GitHub star badge pill); center pill nav; right = Log in + a pink `#ff90e8` "Start selling" block.

## 5. Layout Principles

- Wide two-column feature grid; big rounded cards on the flat dark canvas.
- Heavy container-query usage (11 observed) — components reflow at their own widths, not just page breakpoints.
- Hero: 96px white display → body → square pink CTA + dark search field → GitHub attribution.
- Accent squares (green/red-orange/yellow/purple) and doodle illustrations carry the visual energy; pink checkmark bullets in lists.

## 6. Depth & Elevation

- Radii: controls/inputs `4px`, cards `16px`/`24px`, the signature asymmetric `24px 24px 24px 4px`, small `6px`. Primary CTA is `0px` (square).
- Elevation is **refused** — the box-shadow census is essentially empty (one inset warm glow only). Structure is 1px borders: `#ffffff` (124×), `#000000`, `#242423`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.15s | cubic-bezier(0.4,0,0.2,1) | most hovers (dominant, 106×) |
| all | 0.2s | cubic-bezier(0.4,0,0.2,1) | larger transitions |
| transform/translate/scale/rotate | 0.15s | cubic-bezier(0.4,0,0.2,1) | button/icon moves |
| opacity | 0.3s | ease-in-out | fades |

- House transition: `all 0.15s cubic-bezier(0.4,0,0.2,1)` (Tailwind default ease). Keyframes: `parallax-scroll`, `marquee`, `marquee-scroll` (a scrolling banner), `spin`, `pulse`. No third-party animation library.
- **Honours reduced motion** — 2 `prefers-reduced-motion` blocks (reducedMotionBlocks 2). (`claude-pulse` keyframe is a capture-tool artifact, excluded.)

## 8. Backgrounds, Effects & WebGL

- Flat solid surfaces: no CSS gradients, no canvas/WebGL, no background video, no grain (rasterLayers 0, canvases 0, three false, videos 0).
- Atmosphere is illustration, not effects: flat multi-colour accent squares and hand-drawn doodle art placed on the dark canvas.
- No `backdrop-filter`.

## 9. Do's and Don'ts

### Do
- Use a warm near-black canvas `#242423` for both page and cards; separate with 1px hairlines, not shadows.
- Set huge white ABC Favorit display at weight 400 (scale, not weight) with a constant -0.4px tracking.
- Make the primary CTA a square (0px) pink `#ff90e8` block with BLACK text.
- Draw from the six-colour accent set (pink/purple/green/yellow/lime/red-orange), always with black text.
- Give feature cards the asymmetric `24px 24px 24px 4px` corner.
- Add playful hand-drawn doodle illustrations and flat app-icon squares for energy.

### Don't
- Don't put white text on an accent colour — accents always carry black.
- Don't add drop shadows — the system is flat, borders do the work.
- Don't make the display bold; weight stays 400 and scale carries hierarchy.
- Don't treat this as a white/thick-border page — the current identity is dark, thin-bordered.
- Don't drop the reduced-motion support when adding the marquee/parallax.

## 10. Responsive Behavior

- Tailwind v4 ladder: 40rem, 48rem, 64rem, 80rem, 96rem (+ a 2000px cap).

| Breakpoint | What changes |
|---|---|
| 40rem / 48rem | single column ↔ two-column feature grid; nav collapses |
| 64rem / 80rem | wider gutters, larger display type |
| 96rem / 2000px | max content width caps |

- Heavy **container queries** (11) drive component-level reflow. Dark-scheme blocks present (`darkSchemeBlocks` 5) — the site ships genuine light/dark support; the marketing home renders dark.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#242423` · Text `#ffffff` · Muted `#dddddd` · Border `#ffffff` (1px) · Accent `#ff90e8` (black text)
- Font: `ABC Favorit` (Inter stand-in) · Body: 16px, -0.4px tracking · Radius: 4px control / 24px card (asymmetric 24 24 24 4) / 0px CTA · Control height: 46px pill, 64px input
- Focus: border `#ff90e8` + 2px `#000000` ring · CTA: square pink block, black text

<gumroad-marketing_design_language>
Use the Gumroad design language: playful flat maximalist creator-commerce on a warm near-black canvas #242423 (page AND cards share it; 1px hairlines, mostly white, do the separating, never shadows). Huge white ABC Favorit grotesque (Inter stand-in) runs the display at weight 400 with a constant -0.4px tracking — hierarchy from scale, not weight; only card titles hit 700. Muted text #dddddd. Energy comes from a six-colour accent set — pink #ff90e8 (the primary --accent), purple #90a8ed, green #23a094, yellow #ffc900, lime #f1f333, red-orange #dc341e — each ALWAYS carrying black text, appearing as flat app-icon squares, price tags, chart lines and hand-drawn doodle illustrations. The primary CTA is a SQUARE (0px) pink block with black text; nav uses full pills (active = white pill). Cards use a signature asymmetric corner 24px 24px 24px 4px; inputs radius 4px. Motion is Tailwind-default all 0.15s cubic-bezier(0.4,0,0.2,1) with a marquee/parallax and an honoured reduced-motion block. Feels: playful, flat, maximalist, indie-confident. Avoid: white text on accents, drop shadows, a bold display weight, a white thick-bordered layout, and dropping reduced-motion support.
</gumroad-marketing_design_language>