CURATED · OPEN · FREE

Gumroad

A platform enabling creators to sell directly to their audience.

SaaSProductivityConsumerCalmRefined

↓ Download design system (1 MB)Open in OpenDesign

Visit: https://gumroad.com

📦 Browse pack contents →

Identity DNA

creatormarketplacemonetizationempowermentsimplicity

An inviting digital marketplace for independent creators.

Color

#000000Ink

#F4F4F0BG

#999999Muted

rgba(0,0,0,0.1)Line

High contrast with a warm neutral base and playful accents.

Typography

geometric-sans

display48px · 500

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

generous whitespace around central elements.

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 999px

thin 1px solid borders on inputs and some cards.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered hero section with floating 3D elements.

Motion & Interaction

150msmicro

150mssmall

150msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

subtle hover transitions on buttons and links.

background color change or opacity shift. · subtle scale or color change.

Components

button solid black with white text, rounded corners.
card rounded corners, white background, thin border.
input rounded corners, thin border, white background.
hero centered text with large display font and a call to action.

Voice & Don'ts

Tone encouraging, direct, and friendly.
Headlines bold and clear, using a '0 to $1' motif.
CTAs action-oriented verbs like 'Start selling'.

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.
Avoid: jargon
Avoid: complexity
Avoid: formality

Inside the pack — real screenshots

Gumroad — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko