# Buttondown · Design system migration spec

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

> Worth including as an excellent example of using typography and generous whitespace to create a calm, trustworthy brand voice in a crowded SaaS category.

## 1. Identity DNA

Buttondown’s design system is built like a well-organized post office: a calm, dependable infrastructure for digital creators. Its identity is rooted in reliability and simplicity, offering a no-nonsense, human-friendly email newsletter platform without the corporate weight.

**One-liner:** A no-nonsense, human-friendly email newsletter platform for independent creators.
**Keywords:** newsletter · email · reliability · simplicity · independent
**Analogy:** A calm, dependable post office for digital creators.

## 2. Color

The color system is stark and purposeful, built on a high-contrast foundation of pure white and solid black for maximum reading clarity. A vibrant primary blue signals key actions, while warm pastel yellows provide soft, inviting accents.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-quiet` | `#fef9c3` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#4b5563` | secondary text |
| `--muted` | `#6b7280` | placeholder |
| `--accent` | `#0069ff` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

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

The palette’s strict restraint—forgoing dark mode and neon tones—ensures every color choice is functional, not decorative.

## 3. Typography

Typography establishes a clear voice: a heavy transitional-serif commands display headlines with authority, while a clean humanist-sans carries body text with quiet legibility. This pairing creates a distinct hierarchy, using line length as a tool for comfortable, focused reading.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 900 | -2px | Hero headlines |
| heading | 48px | 1.1 | 700 | -1px | Section headlines |
| body | 18px | 1.55 | 400 | 0px | Main body text |
| caption | 14px | 1.4 | 400 | 0px | Secondary info |

**Type rules:**
- 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.

## 4. Spacing

A consistent 4px baseline grid provides the underlying rhythm, ensuring all elements align to a predictable, orderly structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px baseline grid with generous vertical padding between sections.

## 5. Surfaces

Surfaces are defined by subtle, layered depth and minimal ornamentation. Soft shadows lift elements from the background, while thin, semi-transparent borders provide definition without visual weight.

- **Radius:** sm 4px · md 8px · lg 9999px · pill 9999px
- **Shadows:**
  - 0 4px 6px -1px rgba(0, 0, 0, 0.1)
  - 0 2px 4px -2px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid rgba(0, 0, 0, 0.1)

## 6. Layout

The layout follows a standard, centered column, creating a clear visual hierarchy from hero to features to testimonials. Generous white space and constrained paragraph widths prioritize content focus and prevent cognitive clutter.

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

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

## 7. Motion & Interaction

Motion is applied with utility in mind, offering subtle, fast transitions on interactive elements for clear feedback. It is not theatrical; its purpose is to confirm a user’s action with a smooth, immediate shift in color or state.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle color and background transitions on interactive elements.

- **Hover:** Subtle background color shift on interactive elements.
- **Click:** Visual state change to indicate action.
- **Transition:** Smooth, fast transitions for colors and backgrounds.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, slightly informal, and reassuring—directly stating value without corporate jargon or vague promises. CTAs are action-oriented, and headlines often pose a bold, rhetorical question.

- **Tone:** Confident, slightly informal, and reassuring.
- **Headline style:** Direct, rhetorical questions and bold, clear statements.
- **CTA style:** Action-oriented and straightforward.
- **Avoid:** Corporate jargon / Vague promises / Overly complex technical language

### Don'ts
- ❌ 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.

Crucially, the system deliberately avoids dark mode, sharp corners, sans-serif headlines, and dense multi-column layouts, upholding its core tenet of calm reliability.

## System Prompt (paste into AI tool)

```
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.
```