Buttondown

---
version: alpha
name: Buttondown landing-page reference
description: An independent newsletter-platform landing page with heavy black editorial
  headlines, vivid blue pill actions, playful pink-yellow-blue illustrations, sticky-note-style
  testimonials and a narrow persuasive reading column.
colors:
  primary: '#0069FF'
  surface: '#FFFFFF'
  on-surface: '#000000'
  quote: '#FEF9C3'
  quote-label: '#FEF08A'
  secondary: '#F3F4F6'
typography:
  headline-display:
    fontFamily: Auto Pro
    fontSize: 96px
    fontWeight: 900
    lineHeight: 96px
  headline-md:
    fontFamily: Auto Pro
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
  headline-mobile:
    fontFamily: Auto Pro
    fontSize: 36px
    fontWeight: 900
    lineHeight: 40px
  body-md:
    fontFamily: Auto Pro
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
---

# Buttondown landing-page reference

## Overview

Observed at https://buttondown.com/ on 2026-09-18 at 1440px desktop and 390px mobile widths. An independent newsletter-platform landing page with heavy black editorial headlines, vivid blue pill actions, playful pink-yellow-blue illustrations, sticky-note-style testimonials and a narrow persuasive reading column. This is an independent visual reference, not an official brand specification.

## Colors

The palette above records key sampled CSS colors, with approximate neutral conversions explicitly noted where relevant. Use the primary color for the observed emphasis and acquisition hierarchy; keep surface and text roles distinct. Artwork, photography and gradients add colors beyond these tokens. Preserve the narrow prose rhythm and the hierarchy between heavy headings and open body text.

## Typography

The visible display sample uses "Auto Pro", 96px size, 96px line height and weight 900. Tracking is normal. The frontmatter records measured display, secondary-heading and mobile-heading samples, not an exhaustive scale. Body tokens, when present, are one observed paragraph sample rather than a universal paragraph rule. Preserve supplied font assets when licensed; fallback font metrics will differ.

## Layout

Frame the compact centered hero with oversized editorial illustrations. Move into a narrow essay-like column interrupted by yellow testimonials. Expand outward for three benefit columns, an illustrated two-column audience section, then return to a narrow migration-help section and support form. The desktop hero text region is 492px wide; the main prose sample is 672px wide.

At 390px the compact header keeps pricing, login and signup. The hero question becomes a two-line block with illustrations cropped at the edges. The action spans most of the width, quote cards fill the viewport, and body copy is conspicuously large and readable. No page-level horizontal overflow was measured. Both inspected widths measured no horizontal document overflow. Intermediate breakpoints and the full mobile scroll sequence were not inspected. Desktop section spacing and card arrangement are visual observations; no complete spacing scale was inferred.

## Elevation & Depth

Keep most of the page flat and white. Give testimonials a small paper-like shadow and let overlapping author labels create depth. Illustration layering supplies energy; heavy chrome or glass effects would conflict with the editorial style.

## Shapes

Use fully rounded bright-blue actions, rectangular pale-yellow quote blocks with offset author labels, and soft gray form panels. Illustrations combine curved figures, envelopes, markers and small graphic strokes rather than generic software-window mockups. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

A rhetorical hero question leads to one primary signup action. Long-form paragraphs build the product argument, quotations interrupt the reading flow, benefit columns use small illustrations, and the migration form closes the page. Inputs include name, email, topic and a free-text request; the form was inspected but not submitted.

## Do's and Don'ts

Preserve the narrow prose rhythm and the hierarchy between heavy headings and open body text. Keep testimonial author labels visibly attached to their quotes. Do not compress this into a generic dashboard-heavy SaaS page or invent behavior for the unsubmitted form.

- Do retain the reference-specific layout and responsive hierarchy, not only its palette.
- Do verify readable content when substituting your own assets and copy.
- Don't infer hover, keyboard focus, validation or open-menu states: those were not exercised.
- Don't treat the static screenshot as a complete animation or carousel specification.