CURATED · OPEN · FREE

Buttondown

A no-nonsense, human-friendly email newsletter platform for independent creators.

publishingnewsletter

↓ Download design system (6 MB)Open in OpenDesign

Visit: https://buttondown.com

📦 Browse pack contents →

Identity DNA

newsletteremailreliabilitysimplicityindependent

A calm, dependable post office for digital creators.

Color

#0069ffAccent

#000000Ink

#4b5563Ink soft

#ffffffBG

#fef9c3BG quiet

#6b7280Muted

rgba(0, 0, 0, 0.1)Line

High-contrast black-on-white for maximum readability, with a vibrant primary blue for actions and warm pastel accents.

Typography

transitional-serif · humanist-sans

display96px · 900
heading48px · 700
body18px · 400
caption14px · 400

Display typography uses a heavy, tightly tracked serif font. · Body text uses a clean sans-serif for high legibility. · Line lengths are kept short for comfortable reading.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Standard 4px baseline grid with generous vertical padding between sections.

Surfaces

sm · 4px

md · 8px

lg · 9999px

pill · 9999px

1px solid rgba(0, 0, 0, 0.1)

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard centered layout with a clear hierarchy from hero to features to testimonials.

Motion & Interaction

150msmicro

300mssmall

800msmedium

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

Subtle color and background transitions on interactive elements.

Subtle background color shift on interactive elements. · Visual state change to indicate action.

Components

button High-contrast blue pill-shaped buttons with white text, or simple text links.
card Testimonial blocks with a soft yellow background and bold attribution.
hero Large, impactful serif headline on a white background, flanked by vibrant flat illustrations.

Voice & Don'ts

Tone Confident, slightly informal, and reassuring.
Headlines Direct, rhetorical questions and bold, clear statements.
CTAs Action-oriented and straightforward.

Don't use dark mode — screenshot shows a pure white background.
Don't use neon colors — screenshot uses a primary blue (#0069ff) and pastel accents.
Don't use sans-serif for headlines — screenshot uses a heavy transitional-serif for display text.
Don't use sharp corners everywhere — screenshot shows pill-shaped buttons and rounded card elements.
Don't clutter the interface — screenshot maintains significant white space between elements.
Don't use dense multi-column layouts for reading — screenshot keeps paragraph widths constrained.
Avoid: Corporate jargon
Avoid: Vague promises
Avoid: Overly complex technical language

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Buttondown is an email newsletter platform positioning itself as the reliable, human-friendly choice for independent creators. The design DNA is built on a clean, high-contrast palette featuring a pure white background, solid black text, and a vibrant primary blue (#0069ff) for calls-to-action, supplemented by warm pastel yellows for accents. Typography is defined by a heavy transitional-serif (Auto Pro) for impactful display headlines and a clean humanist-sans (Inter) for highly legible body text. Critical design constraints include avoiding dark mode, using only the established brand colors, and maintaining generous white space. Do not use a sans-serif for headlines, and do not use sharp, unrounded corners on buttons or cards.

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