# Gumroad · Design system migration spec

> Source: https://gumroad.com  ·  Curated by OpenDesign  ·  en

> An excellent example of a clean, modern, and friendly SaaS platform design.

## 1. Identity DNA

Gumroad functions as an inviting digital marketplace for independent creators, a platform built for empowerment and monetization. Its system embodies the simplicity required for a creator to sell directly to their audience, prioritizing directness over decoration.

**One-liner:** A platform enabling creators to sell directly to their audience.
**Keywords:** creator · marketplace · monetization · empowerment · simplicity
**Analogy:** An inviting digital marketplace for independent creators.

## 2. Color

The palette establishes a high-contrast foundation with a warm neutral base, punctuated by playful accents. Stark black text sits upon a warm off-white background, with vibrant pink serving as a decorative, not a functional, accent.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F4F4F0` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High contrast with a warm neutral base and playful accents.

The principle is clear contrast on a warm, humanized base.

## 3. Typography

The typographic voice is geometric and clear, employing a sans-serif like ABC Favorit to convey modernity without formality. Tight letter-spacing and bold display weights create a focused, headline-driven hierarchy for main content areas.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 500 | -0.4px | main headline |

## 4. Spacing

Rhythm is established through generous whitespace that frames central elements, creating an open, uncluttered field for focus.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous whitespace around central elements.

## 5. Surfaces

Surfaces are defined by depth through restraint, relying on thin 1px solid borders rather than heavy shadows. Components like cards and inputs sit on a clean white background, separated from the page by minimal, precise definition.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Borders:** thin 1px solid borders on inputs and some cards.

## 6. Layout

The layout skeleton is fundamentally centered, with a focused hero section serving as the primary entry point. Generous whitespace around this core element ensures a clear focal point and a sense of calm progression through content.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered hero section with floating 3D elements.

## 7. Motion & Interaction

Motion is functional and minimal, used to acknowledge interaction rather than to decorate. All transitions, such as subtle hover shifts, follow a swift 0.15s cubic-bezier curve, ensuring responsiveness without distraction.

- **Durations:** micro 150ms · small 150ms · medium 150ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - subtle hover transitions on buttons and links.

- **Hover:** background color change or opacity shift.
- **Click:** subtle scale or color change.
- **Transition:** all 0.15s cubic-bezier(0.4, 0, 0.2, 1).
- **Keyboard:** standard focus outlines.

## 8. Voice & Don'ts

The editorial voice is encouraging, direct, and friendly, favoring bold, clear headlines and action-oriented verbs. It deliberately avoids jargon, complexity, and formality to maintain an approachable, creator-first tone.

- **Tone:** encouraging, direct, and friendly.
- **Headline style:** bold and clear, using a '0 to $1' motif.
- **CTA style:** action-oriented verbs like 'Start selling'.
- **Avoid:** jargon / complexity / formality

### Don'ts
- ❌ don't use a pure white background — screenshot shows a warm off-white (#F4F4F0) instead.
- ❌ don't use blue as an accent — screenshot shows pink/magenta decorative elements instead.
- ❌ don't use decorative serif fonts — screenshot shows geometric sans-serif fonts instead.
- ❌ don't use heavy drop shadows — screenshot shows flat design with thin borders instead.
- ❌ don't use complex gradients — screenshot shows solid colors and clean transitions instead.
- ❌ don't use overly dense layouts — screenshot shows generous whitespace and centered content instead.

The system deliberately omits decorative elements like complex gradients, heavy shadows, and dense layouts to preserve clarity and calm.

## System Prompt (paste into AI tool)

```
This site is a SaaS platform for creators to sell digital products. The color palette uses a warm off-white background (#F4F4F0) with high-contrast black text (#000000) and playful pink accents. The typography is a geometric sans-serif (ABC Favorit) with tight letter-spacing (-0.4px) and bold display weights. Critical donts: never use pure white backgrounds; avoid blue accents; never use serif fonts; avoid heavy drop shadows; avoid complex gradients; avoid dense layouts. The layout is clean and centered, focusing on a clear call to action.
```
