Gumroad Design System Reference

Foundation

Color Tokens

The full color palette extracted from Gumroad's design system, including bold accents, interactive states, neutrals, and surfaces.

Black

#000000

Primary text · UI elements · High emphasis

White

#FFFFFF

Primary background · Card surfaces · Contrast

Magenta

#FF90E8

Primary CTA · Brand accent · Emphasis

Yellow

#FFC900

Secondary accent · Warning · Excitement

Light Yellow

#F1F333

Bright highlight · Secondary warning

Orange Warning

#F3A642

Tertiary warning · Mild alert states

Periwinkle

#90A8ED

Interactive states · Hover feedback · Secondary CTA

Blue Primary

#4087FC

Links · Hover states · Secondary interactive

Deep Blue

#625BF6

Tertiary interactive · Dark accent

Navy

#00457C

High-contrast interactive · Emphasis text

Dark Gray

#242423

Secondary text · Subtle borders · Disabled

Light Gray

#F4F4F0

Subtle background · Input backgrounds

Pale Gray

#F0F0F0

Surface variation · Minimal contrast

Medium Gray

#8A8A85

Tertiary text · Placeholder · Muted UI

Error Red

#DC341E

Error states · Critical alerts · Destructive

Facebook Blue

#4267B2

Social integration · Secondary link

Typography

Type Scale

ABC Favorit defines Gumroad's voice — modern, accessible, and designed for clarity. Fallback to Arial for system consistency.

Primary ABC Favorit Headings · Body · Buttons · UI

Fallback Arial System fallback · Consistent rendering

Display Large Earn online 96px · 500 · 86.4px

Display Medium Sell your work 96px · 400 · 96px

Display Small Creator commerce 72px · 400 · 72px

Heading 1 Build your audience 60px · 500 · 60px

Heading 2 The quick brown fox 48px · 400 · 60px

Heading 3 Large Start earning today 48px · 500 · 48px

Heading 3 Medium Featured work 36px · 400 · 45px

Heading 3 Small Quick overview 24px · 700 · 32px

Heading 4 Component headers 18px · 700 · 28px

Body Large Large paragraph text for emphasis 24px · 400 · 32px

Body Regular Standard paragraph text and body copy 16px · 400 · 24px

Body Medium Emphasized inline text 16px · 500 · 16px

Layout

Spacing & Shapes

4px base grid — spacing values scale from 8px to 172px. Border radii are minimal (0–4px) or fully rounded, maintaining the graphic aesthetic.

Spacing Scale

8px xs

12px sm

16px md

24px lg

32px xl

56px 2xl

64px 3xl

96px 4xl

Border Radius

Sharp 0px

Subtle 4px

Medium 6px

Full Full Circle

Shadows

No Shadow Default · flat surfaces

Offset Shadow Featured cards · elevated CTA

Border Widths

Thin 1px

Opacity

Full 100%

Hover 90%

Disabled 60%

Z-index / Layering

Base 1

Dropdown 10

Modal 50

Elevation

Depth & Surfaces

Two primary surfaces define depth: White for primary content, Light Gray for inputs and subtle variations. Offset shadows add playful elevation.

White Surface

Primary background · Cards · Containers

L0 · #FFFFFF

Light Gray Surface

Input backgrounds · Subtle container fills

L1 · #F4F4F0

Pale Gray Surface

Minimal contrast backgrounds · Variation

L2 · #F0F0F0

White #FFFFFF

Light Gray #F4F4F0

Pale Gray #F0F0F0

Magenta Accent #FF90E8

Components

Component Library

Core interactive elements rendered at Gumroad's exact specifications — bold colors, clean borders, offset shadows, and accessible touch targets.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #FF90E8 bg · #000000 text · 4px radius · 0/24px padding · 48px height · 1px black border. Secondary: #FFFFFF bg · #000000 text · dark gray border. Ghost: transparent bg · black text on default, periwinkle on hover.

Text Input

Form control — Primary search and standard input states

.input

Primary: #F4F4F0 bg · #000000 text · 20px font · 64px height · 0/32px padding · 4px radius. Focused: #4087FC border · 48px height · 16px font · 0/16px padding.

Card

Content container — elevated surface with offset shadow

.card

Creator profile

Share your work with the world. Build an audience and earn from day one.

#FFFFFF bg · #000000 border · 4px radius · rgb(0,0,0) 4px 4px offset shadow. Title: 14px/600/#000000. Body: 13px/#242423. CTA: magenta primary button.

Badges

Status indicators — Success, Error, Info

.badge

Live Error Info

12px/600 · 4/8px padding · 12px radius. Success: #FF90E8 bg · black text. Error: #DC341E bg · white text. Info: #4087FC bg · white text.

Guidelines

Do's & Don'ts

Principles for consistent application of the Gumroad design language across all surfaces and contexts.

Do — Embrace

Use Magenta (#FF90E8) for all primary CTAs and brand moments
Apply the signature hard offset shadow (4px 4px) to featured cards and elevated components
Maintain high contrast with black text on light backgrounds and white on dark
Use 90% opacity on hover for interactive feedback without color changes
Embrace generous whitespace — minimum 64px vertical spacing between sections
Keep typography large and accessible — body text never below 16px

Don't — Avoid

Don't use soft, blurred shadows — stick to the hard offset shadow treatment
Don't reduce type size below 16px for body text
Don't apply unnecessary border radius — keep containers sharp (0px) or use 4px
Don't use low-contrast color combinations; always verify WCAG AA compliance
Don't deviate from ABC Favorit (or Arial fallback) for typography
Don't overcrowd layouts — respect the spacing system and allow components to breathe

gumroad.com

Preview