--- name: Buttondown tagline: 'Indie newsletter software in heavy 900-weight Auto Pro — electric `#0069ff` pill CTAs and soft-yellow highlights on a pure-white canvas.' updated_at: 2026-05-28T23:12:41.909Z published_at: 2026-05-28T23:12:41.909Z author: webdesignhot source_url: https://buttondown.com spec: webdesignhot/0.1 quality: curated featured: false categories: [saas] tags: [light, minimal, sans, creator, newsletter] preview_swatch: ['#ffffff', '#0069ff', '#fef08a'] related: [beehiiv, substack, ghost] description: 'Buttondown is newsletter software built for independents, and its marketing surface reads exactly that way — pure white `#ffffff` canvas, plain black `#000000` body, and a single electric blue `#0069ff` that does all the brand work. The headline voice is the loudest thing on the page: Auto Pro set at 96px / 900 weight, heavy and type-forward, with soft-yellow `#fef08a` swept under key phrases like a highlighter on a printout. The primary action is a full-pill (`9999px`) blue button that reads "Join your last newsletter" — opinionated copy from an opinionated product. Where beehiiv shouts about money in black-on-yellow and Substack frames itself around the literary, Buttondown frames itself around the maker: calm white space, one confident accent, and type heavy enough to carry the personality without a second hue. The lineage runs through Swiss-grid restraint, the indie-web "small software" aesthetic, and the highlighter-on-paper warmth of a personal newsletter.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand accent: accent muted: text-muted border: border colors: bg: '#ffffff' # primary white marketing canvas surface: '#fafafa' # near-white card / nested panel surface-2: '#f4f4f5' # second-level neutral surface-3: '#e9e9eb' # third-level neutral text: '#000000' # plain black body — no opacity tilt text-strong: '#000000' # display headlines stay pure black text-muted: '#525252' # captions, meta, secondary copy text-soft: '#737373' # tertiary — timestamps, micro-copy text-faint: '#a3a3a3' # disabled / placeholder brand: '#0069ff' # electric blue — the single accent brand-hover: '#0052cc' # blue pressed a step darker brand-active: '#0043a8' # deepest pressed blue brand-soft: '#e6f0ff' # palest blue tint for selection / wash on-brand: '#ffffff' # white text on the blue pill accent: '#fef08a' # soft-yellow highlighter sweep accent-soft: '#fefce8' # palest yellow wash highlight: '#fef08a' # alias — text-highlight role border: '#e5e5e5' # 1px hairline divider / input border border-strong: '#d4d4d4' # heavier divider on hover link: '#0069ff' # inline links take the brand blue success: '#15803d' # editorial green success-bg: '#dcfce7' warning: '#b45309' # warm amber (not the brand yellow) warning-bg: '#fef3c7' danger: '#dc2626' # brick red danger-bg: '#fee2e2' info: '#0069ff' # info reuses the brand blue info-bg: '#e6f0ff' typography: display: family: '"Auto Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif' weights: [700, 800, 900] opentype-features: ['kern', 'liga'] body: family: '"Auto Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif' weights: [400, 500, 600, 700] opentype-features: ['kern', 'liga'] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace' weights: [400, 500] scale: display-hero: { size: 96, weight: 900, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 72, weight: 900, lineHeight: 1.02, tracking: '-0.028em', family: display } display: { size: 56, weight: 800, lineHeight: 1.05, tracking: '-0.024em', family: display } h1: { size: 44, weight: 800, lineHeight: 1.1, tracking: '-0.02em', family: display } h2: { size: 32, weight: 800, lineHeight: 1.15, tracking: '-0.016em', family: display } h3: { size: 24, weight: 700, lineHeight: 1.25, tracking: '-0.01em', family: display } h4: { size: 20, weight: 700, lineHeight: 1.3, tracking: '-0.005em', family: body } h5: { size: 17, weight: 700, lineHeight: 1.35, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } lead: { size: 20, weight: 500, lineHeight: 1.55, tracking: '0', family: body } label: { size: 13, weight: 600, lineHeight: 1.4, tracking: '0.01em', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } code-inline: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: mono } code: { size: 14, weight: 400, lineHeight: 1.6, tracking: '0', family: mono } radius: none: 0 micro: 2 sm: 4 md: 8 lg: 12 xl: 16 xxl: 24 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128] layout: page-width: 1280 prose-width: 720 header-height: 64 hero-padding-y: 96 section-padding-y: 96 card-padding: 24 components: button-primary: backgroundColor: brand textColor: on-brand radius: pill padding: '12px 24px' font: { family: body, weight: 600, size: 16 } hover: { backgroundColor: brand-hover, transform: 'translateY(-1px)' } use: 'The electric-blue full-pill CTA — Buttondown''s canonical action' button-secondary: backgroundColor: bg textColor: text border: border-strong radius: pill padding: '12px 24px' font: { family: body, weight: 600, size: 16 } hover: { backgroundColor: surface } use: 'Outlined pill — secondary action beside the blue primary' button-ghost: backgroundColor: transparent textColor: text radius: md padding: '10px 16px' font: { family: body, weight: 600, size: 16 } hover: { backgroundColor: surface } use: 'Bare text button — tertiary nav / inline actions' button-link: backgroundColor: transparent textColor: brand radius: 0 padding: '0' font: { family: body, weight: 600, size: 16 } hover: { textColor: brand-hover, textDecoration: underline } use: 'Inline blue text link with hover underline' card: backgroundColor: bg border: border borderWidth: 1 radius: lg padding: 24 shadow: 'rgba(0,0,0,0.04) 0 1px 3px' use: 'Quiet hairline card — 1px border, whisper shadow' card-highlight: backgroundColor: accent-soft textColor: text border: border radius: lg padding: 24 use: 'Pale-yellow callout card for emphasis blocks' badge: backgroundColor: brand-soft textColor: brand-active radius: pill padding: '4px 12px' font: { family: body, weight: 600, size: 13 } use: 'Soft-blue pill badge for tags / status' input: backgroundColor: bg border: border borderWidth: 1 radius: md padding: '10px 14px' font: { family: body, weight: 400, size: 16 } focus: { border: brand, ring: '0 0 0 3px rgba(0,105,255,0.2)' } use: 'Hairline input; blue focus ring' highlight: backgroundColor: accent textColor: text padding: '0 2px' use: 'Soft-yellow text highlight — the highlighter-on-paper sweep' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-decelerate: 'cubic-bezier(0, 0, 0.2, 1)' duration-instant: 80 duration-fast: 150 duration-standard: 240 duration-slow: 320 hover-lift: 'translateY(-1px)' page-transition: 'opacity-only, 200ms standard' reduced-motion: 'respects prefers-reduced-motion: reduce — collapses transforms to opacity-only at 100ms' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: none: 'none' whisper: 'rgba(0,0,0,0.04) 0 1px 3px' # the only ambient shadow — barely there raised: 'rgba(0,0,0,0.08) 0 4px 12px' # dropdowns, popovers overlay: 'rgba(0,0,0,0.12) 0 12px 32px' # modals ring-brand: '0 0 0 3px rgba(0,105,255,0.2)' # focus ring accessibility: contrast-text-on-bg: 21.0 # AAA — black on white contrast-on-brand-on-brand: 4.7 # AA — white on #0069ff blue contrast-text-on-accent: 18.05 # AAA — black on #fef08a yellow contrast-brand-on-bg: 4.7 # AA — blue link on white contrast-muted-on-bg: 7.81 # AAA — #525252 muted on white focus-ring: '3px rgba(0,105,255,0.2) ring with 2px brand-blue border' reduced-motion-honored: true keyboard-trap-free: true min-touch-target: 44 dark-mode: none lineage: summary: | Buttondown's marketing system is the indie-web "small software" aesthetic in its purest form: a pure-white `#ffffff` canvas, plain black `#000000` body, and exactly one accent — electric blue `#0069ff` — doing every piece of brand work. The headline carries the personality. Auto Pro (a contemporary grotesk) runs at 96px / 900 weight, heavier than nearly any peer, set tight and type-forward so the page reads like a confident manifesto rather than a SaaS landing template. The one piece of warmth is the soft-yellow `#fef08a` highlighter sweep under key phrases — a direct quotation of marking up a printed newsletter with a highlighter pen. The primary action is a full-pill (`9999px`) blue button with opinionated copy ("Join your last newsletter"). Where beehiiv shouts about money in black-on-yellow and Substack leans literary-serif, Buttondown leans maker-first: calm space, one accent, heavy type. The lineage runs through Swiss/International-Typographic restraint (Müller-Brockmann grids, minimal palette), the indie-web small-software movement (one-person products, opinionated defaults), and the everyday highlighter-on-paper warmth of a personal newsletter. influences: - name: Josef Müller-Brockmann role: Swiss grid discipline — restraint, single accent, type-as-system. url: https://en.wikipedia.org/wiki/Josef_M%C3%BCller-Brockmann - name: Substack role: Direct rival; Buttondown positions as the indie, maker-first alternative. url: https://substack.com - name: Stripe role: The clean electric-blue-on-white SaaS register Buttondown adapts and simplifies. url: https://stripe.com - name: Pangram Pangram role: Contemporary grotesk display lineage (Auto Pro sits in this neo-grotesk family). url: https://pangrampangram.com - name: Tailwind CSS role: The `#fef08a` highlight is Tailwind''s yellow-200 — the utility-CSS color vocabulary it draws from. url: https://tailwindcss.com --- ## 1. Visual Theme & Atmosphere Buttondown's site looks like software made by one opinionated person who cares about typography — which is exactly what it is. The canvas is pure white `#ffffff`, the body is plain black `#000000`, and the entire brand identity rides on a single electric blue `#0069ff`. There is no second hue, no gradient field, no atmospheric wash. The restraint is deliberate: by spending the whole color budget on one confident blue, the page reads as intentional rather than under-designed. The loudest element on the page is the type. The hero headline is set in Auto Pro at 96px / 900 weight — heavier than almost any newsletter competitor, and heavier than the 700–800 weights you see on Substack, Ghost, or Kit. That 900-weight display register is the personality. It compresses the headline into a dense, declarative block that reads like a manifesto rather than a marketing banner, and it lets the page get away with almost no other decoration. When type is this confident, you don't need illustration to carry the mood. The one piece of warmth in the system is the soft-yellow highlight `#fef08a`, swept under key phrases the way someone marks up a printed newsletter with a highlighter pen. It's the same yellow as Tailwind's `yellow-200`, and Buttondown uses it sparingly — never as a fill, never as a band, only as a thin sweep behind a word or two of black text. That single gesture does enormous work: it signals "personal, handmade, paper-adjacent" in a way the electric blue cannot, and it pulls the otherwise clinical white-and-blue palette back toward the human. The primary action is a full-pill blue button — `9999px` radius, white text, opinionated copy. The canonical CTA reads "Join your last newsletter," which is both a tagline and a button at once. That blending of voice and action is the whole product in miniature: opinionated software that tells you what it thinks, in a button you actually click. Everywhere else the radius ladder is moderate (cards at 12px, inputs at 8px), so the full-pill CTA stands out as the single most-rounded element on the page — the action pressure-point. The atmosphere is calm-confident. There's generous white space around the hero (96px+ vertical padding), quiet hairline cards with a 1px `#e5e5e5` border and at most a whisper of shadow, and abrupt-but-gentle section transitions on the same white canvas. Where beehiiv cycles aggressively between yellow and black bands for tabloid impact, Buttondown stays on white and lets the heavy type and the single blue accent carry the entire visual load. The result feels less like a SaaS funnel and more like a well-set personal website that happens to sell software. **Key Characteristics** - Pure white `#ffffff` canvas with plain black `#000000` body — zero warmth in the neutrals - A single brand accent: electric blue `#0069ff` (rgb 0,105,255) does all the work, no second hue - Auto Pro display at 96px / 900 weight — heavier than nearly every newsletter peer - Soft-yellow `#fef08a` highlighter sweep under key phrases — the one note of warmth - Full-pill (`9999px`) blue CTA with opinionated copy ("Join your last newsletter") - Moderate radius ladder (cards 12px, inputs 8px) against the full-pill action - Quiet hairline cards: 1px `#e5e5e5` border, whisper shadow at most - Generous hero white space (96px+ vertical) — calm, not crowded - Type-forward identity: the headline carries personality, not illustration - Indie / maker register — opinionated defaults, single-author software energy ## 2. Color Palette & Roles ### Primary (Canvas & Text) - **bg** (`#ffffff`): the primary marketing canvas; full pure white, no warmth — sourced live from the production `body` background. - **text** (`#000000`): plain black body and headlines; no opacity tilt — sourced live from production `body` and `h1` color. - **text-strong** (`#000000`): display headlines hold pure black at all weights. ### Brand - **brand** (`#0069ff`): the electric blue (rgb 0,105,255) — the single accent that carries the brand; sourced live from the primary CTA background. - **brand-hover** (`#0052cc`): blue pressed one step darker for hover. - **brand-active** (`#0043a8`): deepest pressed blue for active / focus-fill. - **brand-soft** (`#e6f0ff`): palest blue tint for selection backgrounds, badges, and info washes. - **on-brand** (`#ffffff`): white text on the blue pill — sourced live from the CTA text color. ### Accent (Highlight) - **accent** (`#fef08a`): the soft-yellow highlighter sweep behind key phrases — sourced live from the highlighted-name span on production. Used only as a thin text highlight, never a fill or band. - **accent-soft** (`#fefce8`): palest yellow wash for callout-card backgrounds. - **highlight** (`#fef08a`): alias of `accent` for the text-highlight role. ### Interactive - **link** (`#0069ff`): inline links take the brand blue, underlined on hover. - **link-hover** (`#0052cc`): pressed link blue. - **selected**: `brand-soft` (`#e6f0ff`) fill with `#000000` text. - **focus-ring**: `0 0 0 3px rgba(0,105,255,0.2)` with a `#0069ff` border. - **disabled**: `text-faint` (`#a3a3a3`) on `surface` (`#fafafa`). ### Neutral Scale - **text-muted** (`#525252`): captions, meta, secondary copy — 7.8:1 on white (AAA). - **text-soft** (`#737373`): tertiary text — timestamps, micro-copy. - **text-faint** (`#a3a3a3`): disabled state, placeholder text. - The system keeps neutrals cool-grey and shallow; it never reaches for warm taupe or a deep charcoal-as-brand. ### Surface & Borders - **surface** (`#fafafa`): near-white nested card panel. - **surface-2** (`#f4f4f5`): second-tier neutral, table rows. - **surface-3** (`#e9e9eb`): third-tier neutral, divider areas. - **border** (`#e5e5e5`): the canonical 1px hairline divider and input border. - **border-strong** (`#d4d4d4`): heavier divider on hover / outlined buttons. ### Shadow Colors - **whisper** (`rgba(0,0,0,0.04) 0 1px 3px`): the only ambient shadow — barely perceptible, used on cards. - **raised** (`rgba(0,0,0,0.08) 0 4px 12px`): dropdowns and popovers. - **overlay** (`rgba(0,0,0,0.12) 0 12px 32px`): modal dialogs. Note: Buttondown leans on the 1px hairline border far more than on shadow. Where Stripe builds a soft elevation language, Buttondown keeps shadows to a whisper — the border is the primary edge, the shadow is an afterthought. ### Semantic - **success** (`#15803d`) on **success-bg** (`#dcfce7`): editorial green. - **warning** (`#b45309`) on **warning-bg** (`#fef3c7`): warm amber — the system reaches for amber rather than the brand yellow so the highlight role stays unambiguous. - **danger** (`#dc2626`) on **danger-bg** (`#fee2e2`): brick red. - **info** (`#0069ff`) on **info-bg** (`#e6f0ff`): info reuses the brand blue rather than introducing a separate info hue. ## 3. Typography Rules ### Font Family - **Display**: `"Auto Pro"` (a contemporary neo-grotesk) → system-ui → -apple-system → BlinkMacSystemFont → Segoe UI → Helvetica → Arial → sans-serif. - **Body**: `"Auto Pro"` (the same family carries both roles) → system-ui → -apple-system → BlinkMacSystemFont → Segoe UI → Helvetica → Arial → sans-serif. - **Mono companion**: ui-monospace → SFMono-Regular → SF Mono → Menlo → Consolas → Liberation Mono → monospace. - **OpenType features**: `kern` and `liga` on display and body. No tabular-figure or stylistic-set affectation — the personality comes from weight, not feature switches. Buttondown runs a single typeface across the whole page. Display and body are both Auto Pro; the contrast comes entirely from weight (400 body vs. 900 display) and size, not from a second family. This is a deliberately economical choice that reinforces the single-author, single-system feel. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |---|---|---|---|---|---|---| | display-hero | Auto Pro | 96 | 900 | 1.0 | -0.03em | the live hero size — heaviest weight on the page | | display-lg | Auto Pro | 72 | 900 | 1.02 | -0.028em | secondary heroes | | display | Auto Pro | 56 | 800 | 1.05 | -0.024em | feature-band heads | | h1 | Auto Pro | 44 | 800 | 1.1 | -0.02em | page / section heads | | h2 | Auto Pro | 32 | 800 | 1.15 | -0.016em | sub-section heads | | h3 | Auto Pro | 24 | 700 | 1.25 | -0.01em | card / feature heads | | h4 | Auto Pro | 20 | 700 | 1.3 | -0.005em | inline emphasis heads | | h5 | Auto Pro | 17 | 700 | 1.35 | 0 | label-grade heads | | lead | Auto Pro | 20 | 500 | 1.55 | 0 | hero subhead / intro paragraph | | body-lg | Auto Pro | 18 | 400 | 1.6 | 0 | hero supporting copy | | body | Auto Pro | 16 | 400 | 1.6 | 0 | default reading size (live body) | | body-sm | Auto Pro | 14 | 400 | 1.5 | 0 | secondary copy | | label | Auto Pro | 13 | 600 | 1.4 | 0.01em | eyebrow, form labels | | caption | Auto Pro | 12 | 500 | 1.4 | 0.02em | image / chart caption | | code-inline | mono | 14 | 400 | 1.5 | 0 | inline code | | code | mono | 14 | 400 | 1.6 | 0 | code block | ### Principles - **Weight is the hierarchy**: the page jumps from 400 body straight to 900 display. There is no gradual weight ramp; the contrast between plain body and heavy headline is the whole typographic system. - **900 is the brand**: the hero runs at 900, heavier than the 700–800 register most newsletter platforms use. Drop below 800 at hero scale and the page loses its declarative, manifesto character. - **Negative tracking at scale**: at 96px the track tightens to `-0.03em` so the heavy letterforms knit into a dense block. Without the negative tracking, 900-weight Auto Pro reads loose and loud rather than confident and compressed. - **One family, two roles**: Auto Pro carries both display and body. The economy is intentional — it signals single-system, maker-built software, not a multi-typeface marketing department. - **No serif, no rounded warmth**: the warmth in this system comes from the yellow highlight, not the typeface. Auto Pro is a clean neo-grotesk; keep it that way and let `#fef08a` add the human note. - **Generous body leading**: body copy sits at 1.6 line-height for comfortable long-form reading — appropriate for a product whose users write and read newsletters all day. - **The highlight is typographic, not chromatic decoration**: the `#fef08a` sweep behaves like a type treatment (it marks a phrase), so it appears inline within running text, never as a standalone block. ## 4. Component Stylings ### Buttons **Primary (blue pill)** - Background: `#0069ff`. Text: `#ffffff` at Auto Pro 600 / 16px. Padding: `12px 24px`. Radius: 9999px (full pill). Border: none. - Hover: background → `#0052cc`, transform → `translateY(-1px)`, 150ms standard ease. Active: `translateY(0)`, background → `#0043a8`. - Use: every primary CTA — "Join your last newsletter", "Start writing", "Get started". The canonical Buttondown action. **Secondary (outlined pill)** - Background: `#ffffff`. Text: `#000000` at Auto Pro 600 / 16px. Padding: `12px 24px`. Radius: 9999px. Border: `1px solid #d4d4d4`. - Hover: background → `#fafafa`, border → `#a3a3a3`. Use: secondary action set beside the blue primary (e.g. "See features"). **Ghost (bare text)** - Background: transparent. Text: `#000000` at Auto Pro 600 / 16px. Padding: `10px 16px`. Radius: 8px. Border: none. - Hover: background → `#fafafa`. Use: tertiary actions, nav items, low-emphasis buttons. **Link (inline blue)** - Background: transparent. Text: `#0069ff` at Auto Pro 600 / 16px. No padding, no radius. - Hover: color → `#0052cc`, underline appears. Use: inline text links inside running copy. ### Cards **Standard (hairline)** - Background: `#ffffff`. Border: `1px solid #e5e5e5`. Radius: 12px. Padding: 24px. Shadow: `rgba(0,0,0,0.04) 0 1px 3px` (whisper). - Hover: border → `#d4d4d4`, transform → `translateY(-1px)`. Use: feature cards, pricing tiers, content blocks. **Highlight card (pale-yellow callout)** - Background: `#fefce8`. Text: `#000000` at Auto Pro 400 / 16px. Border: `1px solid #e5e5e5`. Radius: 12px. Padding: 24px. - Use: emphasis blocks, "good to know" callouts — the pale-yellow companion to the inline highlight. **Soft-blue card (info)** - Background: `#e6f0ff`. Text: `#000000`. Border: none. Radius: 12px. Padding: 24px. - Use: info / tip blocks where the brand blue should register without the full saturation. ### Badges, Tags, Pills **Soft-blue badge** - Background: `#e6f0ff`. Text: `#0043a8` at Auto Pro 600 / 13px. Padding: `4px 12px`. Radius: 9999px. - Use: "NEW", "BETA", category tags, status markers. **Yellow-highlight badge** - Background: `#fef08a`. Text: `#000000` at Auto Pro 600 / 13px. Padding: `4px 12px`. Radius: 9999px. - Use: rare emphasis tags ("Popular") where the highlighter note is wanted. ### Inputs / Forms **Text input** - Background: `#ffffff`. Border: `1px solid #e5e5e5`. Radius: 8px. Padding: `10px 14px`. Font: Auto Pro 400 / 16px. - Focus: border → `#0069ff`, ring `0 0 0 3px rgba(0,105,255,0.2)`. Placeholder: `#a3a3a3`. **Newsletter signup input** - Background: `#ffffff`. Border: `1px solid #e5e5e5`. Radius: 9999px (pill) when paired with the inline blue pill submit, or 8px when stacked. Padding: `12px 18px`. Font: Auto Pro 400 / 16px. - Pairs with the blue pill submit button — the brand's signature email-capture gesture. ### Navigation **Top bar** - Background: `#ffffff` with a `1px solid #e5e5e5` bottom border that appears on scroll. Height: 64px. - Logo: Buttondown wordmark in Auto Pro 800 / 20px in `#000000`. - Nav items: Auto Pro 600 / 14px, color `#000000`, hover → `#fafafa` ghost background or underline. - Primary CTA always visible at top right (blue pill). ### Tooltips, Toasts, Modals - **Tooltip**: background `#000000`, text `#ffffff` at Auto Pro 500 / 12px, radius 6px, padding `6px 10px`. Shadow: `raised`. - **Toast**: background `#000000`, text `#ffffff` at Auto Pro 500 / 14px, radius 12px, padding `14px 18px`, `raised` shadow. - **Modal**: background `#ffffff`, border `1px solid #e5e5e5`, radius 16px, `overlay` shadow. Backdrop: `rgba(0,0,0,0.4)`. Padding: 24px. ## 5. Layout Principles ### Spacing System Base unit: 4px. Scale: `[0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]`. The system favours medium-large jumps for calm breathing — 24px card padding, 32–48px between stacked elements, 96px between major sections. It is looser than a dense dashboard and tighter than beehiiv's broadsheet 120–160px; the rhythm is "personal-website calm". ### Grid & Container - **Page width**: 1280px max, centred. - **Prose width**: 720px for editorial blog, docs, and the newsletter-preview reading column. - **Hero treatment**: hero copy claims roughly 760–900px horizontal; headline at 96px display-hero; supporting copy at body-lg below; primary blue pill CTA directly under. - **Feature grid**: 3-column at 1024px+, 2-column at 640–1024px, 1-column below 640px. Card gap: 24px. ### Whitespace Philosophy Whitespace here is calm-confident, not poster-loud. The hero gets generous vertical room (96px+ top/bottom), but the system never inflates to broadsheet scale. The white canvas itself is the breathing room — because there are no competing bands or colored sections, the page feels open even at moderate padding. The single blue accent and the heavy headline are what punctuate the calm. ### Section Cadence Sections stay on the white canvas; there is no band-cycling. Cadence comes from the heavy section headers (display / h1 at 800–900 weight), the occasional pale-yellow highlight callout, and the blue CTA repeating at the foot of major sections. Transitions are gentle — a 1px hairline divider or a shift to `#fafafa` surface, never an abrupt color band. The page reads as one continuous document, which suits the maker-first, single-author register. ## 6. Shapes & Radius Scale | Tier | Value | Use | |---|---|---| | none | 0px | full-bleed dividers, the yellow text-highlight sweep | | micro | 2px | inline indicators, tiny chips | | sm | 4px | tight UI primitives, checkboxes | | md | 8px | inputs, ghost buttons, small surfaces | | lg | 12px | the canonical card radius | | xl | 16px | modals, larger feature shells | | xxl | 24px | hero image / illustration corners | | pill | 9999px | the canonical CTA pill and all badges | The radius ladder is moderate-with-a-pill-spike. Most surfaces sit at 8–12px (inputs 8px, cards 12px), and then the primary CTA jumps all the way to a full pill (`9999px`). That gap is intentional: the pill is reserved almost exclusively for the action, so the most-rounded element on the page is always the thing you're meant to click. Badges share the pill shape, reinforcing "pill = interactive / status" as a visual rule. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 | flat, on `#ffffff` or `#fafafa` | body content, default surfaces | | 1 | `1px solid #e5e5e5` border + whisper shadow (`rgba(0,0,0,0.04) 0 1px 3px`) | the canonical card | | 2 | `1px solid #d4d4d4` + `translateY(-1px)` on hover | hovered card | | 3 | `rgba(0,0,0,0.08) 0 4px 12px` shadow | dropdowns, popovers, tooltips | | 4 | `rgba(0,0,0,0.12) 0 12px 32px` + backdrop | modal dialog | | 5 | full-pill blue button `translateY(-1px)` on hover | the elevated primary action | **Shadow Philosophy**: Buttondown treats elevation as mostly a border problem, not a shadow problem. The 1px `#e5e5e5` hairline does the visual separation; the whisper shadow underneath is so faint it reads almost as a border softening rather than true depth. Real shadow appears only on genuinely floating chrome — dropdowns, popovers, modals — where the element must lift off the page. This keeps the marketing surface flat and document-like, in contrast to Stripe's richer soft-shadow elevation language. The blue CTA's `translateY(-1px)` hover is the most expressive depth gesture on the page, and even that is restrained. ## 8. Interaction & Motion ### Easing - **standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — workhorse Material-style ease for hovers and color shifts. - **emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — sharper accel/decel for the CTA press and dropdown open. - **decelerate**: `cubic-bezier(0, 0, 0.2, 1)` — for elements entering from off-canvas. ### Durations - **instant** (80ms): hover background color shifts on ghost buttons and nav items. - **fast** (150ms): card hover lift, blue-pill hover, link underline appearance. - **standard** (240ms): primary CTA press, dropdown open, input focus-ring fade. - **slow** (320ms): modal open, page-section reveal. ### Per-component micro-states - **Blue-pill CTA hover**: background → `#0052cc`, `translateY(-1px)`, 150ms standard ease. Active: `translateY(0)`, background → `#0043a8`. - **Card hover**: border → `#d4d4d4`, `translateY(-1px)` over 150ms; the whisper shadow stays constant. - **Link hover**: color → `#0052cc`, underline grows in at 150ms. - **Input focus**: blue ring `0 0 0 3px rgba(0,105,255,0.2)` fades in at 240ms; border switches to `#0069ff`. - **Highlight reveal**: where the `#fef08a` sweep animates on scroll, it wipes left-to-right over 320ms decelerate (the highlighter-stroke effect), and renders instantly under reduced-motion. ### Page transitions Buttondown uses opacity-only fades at ~200ms between marketing routes; no slide, no scale. The calm white canvas means route transitions stay quiet — the heavy type and single blue accent carry the visual interest, so motion does not need to. ### Reduced-motion strategy `prefers-reduced-motion: reduce` is honored: card hover lifts and CTA `translateY` collapse to color-only changes, the highlighter wipe renders as a static fill, and section reveals become instant. Focus rings and color-state changes are preserved — they communicate state, not decoration. ## 9. Accessibility & A11y ### Contrast pairs (computed) - **text on bg**: `#000000` on `#ffffff` → **21.0:1** (AAA at all sizes) — the maximum possible contrast. - **on-brand on brand**: `#ffffff` on `#0069ff` → **4.7:1** (AA for normal text and UI components; AAA for large text). The white-on-blue pill clears the 4.5:1 normal-text threshold. - **text on accent**: `#000000` on `#fef08a` → **18.05:1** (AAA) — black on the soft-yellow highlight is extremely legible. - **brand link on bg**: `#0069ff` on `#ffffff` → **4.7:1** (AA for normal text). Blue inline links pass; pair with underline for non-color affordance. - **text-muted on bg**: `#525252` on `#ffffff` → **7.81:1** (AAA at body sizes). - **brand-active on brand-soft**: `#0043a8` on `#e6f0ff` (badge) → ~7:1 (AAA at badge sizes). Note: because white-on-blue lands at 4.7:1 (just above the 4.5:1 floor), keep the blue at exactly `#0069ff` and the pill text at full white — lightening the blue or tinting the text would drop the primary CTA below AA. For blue-on-white inline links, the underline is required as a redundant non-color cue. ### Focus indicators - **Default focus ring**: `3px rgba(0,105,255,0.2)` ring with a `#0069ff` 1–2px border, visible on every neutral surface. - **On the blue pill**: focus shows a `#ffffff` inner ring plus the offset blue glow for contrast against the saturated background. - Focus rings are never removed; they are color-adaptive but always present. ### ARIA patterns - Pricing toggles use `role="radiogroup"` rather than tabs. - Newsletter-signup input uses `aria-describedby` to associate the field with helper text. - Modals use `role="dialog"`, `aria-modal="true"`, focus trap, and `Esc` to close. - The yellow highlight is purely presentational — it carries no semantics and is not announced by screen readers (it wraps existing text, no `aria-label` needed). ### Keyboard nav order Top bar → hero CTA → feature sections in DOM order → pricing → footer. A skip-to-content link sits at the top of the DOM, visible on focus. Tab order matches visual order throughout the single-canvas layout. ### Screen reader hints - Icon-only buttons carry an `aria-label` describing the action. - Decorative dividers and the highlighter sweep carry no announced content. - Form fields pair `