---
name: Buttondown
description: "Worth including as an excellent example of using typography and generous whitespace to create a calm, trustworthy brand voice in a crowded SaaS category."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#4b5563"
  tertiary: "#0069ff"
  neutral: "#6b7280"
  bg-quiet: "#fef9c3"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 96px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.55
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 9999px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A calm, dependable post office for digital creators.*

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#4b5563`)** — uses `ink-soft` token
- **Accent (`#0069ff`)** — uses `accent` token
- **Muted (`#6b7280`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 9999px
- `pill`: 9999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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