Marigold
#ffdd00Yellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
Buymeacoffee
buymeacoffee.comWebsite preview
The design language
Buy Me a Coffee operates on a warm, generous canvas — a cream paper background (#faf8f0) that softens the entire experience like sunlight through a café window. The interface is overwhelmingly monochromatic with black text at heroic sizes (96px display), reserving color for two highly intentional roles: a bright marigold yellow (#ffdd00) for creator-facing signup actions, and a burnt terracotta (#d8573f) for supporter-facing payment actions. Cards float with generous 24-40px radii and soft layered shadows that feel like paper resting on a table. The Circular font family gives everything a friendly, geometric warmth — bold weights carry massive headlines with tight tracking while lighter weights handle conversational body copy. The system breathes: wide margins, floating creator cards, pill-shaped buttons, and small-caps section labels that whisper rather than shout.
Color palette
brand
Buttercup
#f7d046Yellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
Terracotta
#d8573fOrange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color
accent
Blush Border
#f5d5cfSoft warm border accent for notification cards and supporter activity popovers — bridges Terracotta's intensity into a gentle outline
neutral
Cream Paper
#faf8f0Page canvas, section backgrounds — the warm off-white ground that softens every interface layer and gives the whole product its café-on-paper atmosphere
Card White
#ffffffCard surfaces, modal backgrounds, raised panels — pure white floats above the cream canvas to create depth through luminance contrast rather than color
Hairline Gray
#e5e7ebBorders, dividers, icon outlines, badge outlines — used at 1146+ occurrences as the universal hairline separator across cards, buttons, and inputs
Ink Black
#000000Primary text, filled icon strokes, high-contrast UI elements — the dominant text and icon color across the entire product
Charcoal
#222222Body and heading text, filled SVG strokes — slightly softer than pure black for sustained reading in longer copy blocks
Fog Gray
#717171Muted helper text, secondary metadata, small caps labels — the quietest text voice for timestamps, supporter counts, and contextual hints
Typography
Type scale
Minor Third (1.2) · 15px basehero
96px · 400 · 0.99 · -4px trackingThe quick brown fox jumps
display
64px · 400 · 1 · -2.7px trackingThe quick brown fox jumps
heading-lg
40px · 400 · 1.2 · -1.24px trackingThe quick brown fox jumps
heading
30px · 400 · 1.25 · -0.63px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.17 · -0.5px trackingThe quick brown fox jumps
text-22
22px · 400 · 1.5The quick brown fox jumps
subheading
20px · 500 · 1.2 · -0.6px trackingThe quick brown fox jumps
text-18
18px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
ui-sans-serif
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
ui-sans-serif — detected in extracted data but not described by AI
Additional typeface
Circular Bold
- Weights
- 700
- Sizes
- 14px, 16px, 20px, 24px, 64px, 96px
- Line height
- 1.0-1.25
- Letter spacing
- -4.0px at 96px, -2.7px at 64px, -0.6px at 20px, normal at 14-16px
- Fallback
- Inter (700), Manrope (700), or Plus Jakarta Sans (700)
Display and hero headlines — Circular Bold at 96px with -0.042em letter-spacing carries the 'Fund your creative work' headline; the extreme size and tight tracking make the wordmark feel monumental. Also used for button labels and emphasized short-form copy.
Additional typeface
Circular Medium
- Weights
- 500
- Sizes
- 14px, 16px, 24px, 30px
- Line height
- 1.25-1.50
- Letter spacing
- -0.5px at 24px, -0.34px at 16px
- Fallback
- Inter (500), Manrope (500), or Plus Jakarta Sans (500)
Subheadings, card titles, and emphasis within body copy — the bridge weight between Bold displays and Regular body, used where hierarchy needs weight without volume
Additional typeface
Circular Regular
- Weights
- 400
- Sizes
- 10px, 12px, 14px, 16px, 18px, 22px, 24px, 40px
- Line height
- 1.20-1.67
- Letter spacing
- -0.34px at 16px, normal at 14px and below
- Fallback
- Inter, Manrope, or Plus Jakarta Sans (all at 400)
Body copy, descriptions, conversational text — the workhorse weight for everything from supporter messages to card body descriptions, with a 16px baseline for body text
Additional typeface
Circular Book
- Weights
- 400
- Sizes
- 16px, 20px, 24px
- Line height
- 1.17-1.50
- Fallback
- Inter (400), Manrope (400), or Plus Jakarta Sans (400)
Alternative heading weight for section titles and card headers where a lighter voice than Bold or Medium is needed — provides visual rest between heavy display elements
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
tags
9999pxcards
24pxmodals
32pxbuttons
9999pxhero-cards
40pxsmall-elements
8pxSpacing scale
2px4px6px8px10px12px14px16px18px20px24px28px30px32px39px48px50px64px65px77px96px117px120px149px150px199pxGuidelines
Do
- Use #faf8f0 as the universal page background — every screen should feel like cream paper beneath white cards
- Reserve #ffdd00 exclusively for the creator-facing 'Start my page' / 'Sign up' CTA — this yellow should appear nowhere else
- Use #d8573f only for supporter payment actions like 'Support $3' — never for navigation, links, or informational elements
- Apply 9999px radius to all buttons, tags, and pill inputs — the pill shape is the system's signature interaction form
- Set hero and display headlines to Circular Bold 64-96px with letter-spacing between -2.7px and -4.0px — the tight tracking makes large text feel monumental
- Use the three-layer shadow stack (2px close blur + 40px ambient + 5px medium) on all floating cards and modals — this is the system's only shadow recipe
- Write section labels as uppercase Circular Bold 12px with 0.125em tracking — the wide-spaced small caps are the system's typographic signature for section dividers
Don’t
- Don't use #ffdd00 or #d8573f for body text, links, borders, or decorative fills — these are action-only colors
- Don't apply sharp corners (0-4px radius) to cards or buttons — the system requires generous rounding (8px minimum, 24px+ preferred for cards)
- Don't use colored shadows or glows — all elevation comes from the neutral black-alpha three-layer stack
- Don't introduce new accent colors beyond Marigold, Terracotta, and Blush Border — the palette is intentionally two-color (plus warm cream)
- Don't set body text below 14px or above 18px — the reading range is narrow by design
- Don't use bold or black weights for long-form body copy — Circular Regular or Book at 14-16px is the standard for paragraphs
- Don't fill the cream canvas with pure white sections — alternate cream bands with white cards, not cream → white → cream
Components
Marigold Pill CTA
Primary creator signup actionFilled pill button, #ffdd00 background, #000000 text, 9999px radius, 12px 24px padding, Circular Bold 16px. Used for 'Sign up' and 'Start my page'. The brightest, most saturated element on the page — the sole call to action that demands attention.
Terracotta Support Button
Primary supporter payment actionFilled pill button, #d8573f background, #ffffff text, 9999px radius, 14px 28px padding, Circular Bold 16px. Reserved exclusively for 'Support $3' and similar payment moments. Warmer and more muted than the Marigold CTA — signals generosity rather than urgency.
Ghost Outline Button
Secondary actionTransparent background, 1px #e5e7eb border, #000000 text, 9999px radius, 8px 16px padding, Circular Regular 14px. Used for 'Log in' and less prominent actions.
Creator Profile Card
Social proof, creator showcaseWhite surface, 24px radius, 16px padding, soft three-layer shadow. Contains a circular avatar (40px), Circular Medium name/title in black, Circular Regular 14px description in #222222, and a heart icon with #717171 supporter count. Cards float at slight rotations (±2-4 degrees) around the hero for a scrapbook effect.
Support Modal
Coffee purchase interactionWhite surface, 32px radius, 24px padding, layered shadow. Contains a 100px illustration header, 'Buy [name] a coffee' title in Circular Bold 20px, coffee count selector (pill tabs), message input, and the Terracotta Support button.
Coffee Count Selector
Quantity picker for supportHorizontal row of pill buttons (9999px radius) with 12px padding. Default state: #e5e7eb border, transparent fill. Selected state: #d8573f background with white text. Options render as ×1, 1, 3, 5, 1 with a coffee emoji prefix.
Supporter Notification Card
Activity feed, social proofWhite surface, 16px radius, 16px padding, 1px #f5d5cf border, soft shadow. Contains avatar, Circular Medium 14px message in #222222, and timestamp in #717171. Bridges Terracotta's intensity with a gentle warm outline.
Star Rating Row
Social proof headerRow of five green star icons (#22c55 or similar) followed by Circular Regular 14px text in #222222. Centered above the hero headline. The only green element — deliberately foreign to the warm palette to signal trust/verification.
Small Caps Section Label
Section divider and category markerCircular Bold 12px, 0.125em letter-spacing (1.5px tracking), #222222 color, uppercase. Used for 'SUPPORT', 'SHOP' labels above section descriptions. The wide tracking and tiny size make them feel like printed section dividers.
Search Input
Creator discoveryPill-shaped input (#ffffff background, 9999px radius, 8px 16px padding), #e5e7eb border, search icon in #717171, placeholder text in #717171. Sits in the header navigation.
Header Navigation Bar
Global navigationTransparent background over the cream canvas. Left: FAQ, Wall of [heart], Resources dropdown in Circular Regular 14px #000000. Center: Buy Me a Coffee logo with coffee cup icon. Right: search input, Log in (ghost), Sign up (marigold pill).
Section Description Block
Introductory text for content sectionsCentered Circular Regular 16px #222222 text, max-width ~640px, below the small caps section label. Conversational, lowercase tone matching the brand voice.
Surfaces & elevation
Level 0
Cream Canvas
#faf8f0Page background, section bands — the warm ground that establishes the café-paper atmosphere
Level 1
Card White
#ffffffCreator cards, support modals, elevated content panels — pure white floats above cream for contrast-based depth
Level 2
Hairline Edge
#e5e7ebBorders and dividers that define card edges and separate content zones without using shadow weight
Creator Profile Card
rgba(0, 0, 0, 0.15) 0px 0px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 40px 0px, rgba(0, 0, 0, 0.05) 0px 2px 5px 0px
Support Modal
rgba(0, 0, 0, 0.15) 0px 0px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 40px 0px, rgba(0, 0, 0, 0.05) 0px 2px 5px 0px
Notification Popover
rgba(0, 0, 0, 0.15) 0px 0px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 40px 0px, rgba(0, 0, 0, 0.05) 0px 2px 5px 0px
Layout & imagery
Layout
Max-width 1200px centered container with the hero section breaking to full-bleed. The hero is a centered headline stack: green star row → 96px bold headline → 16px subtext → marigold CTA → micro-copy, with creator profile cards floating at slight rotations on the left and right margins. Below the hero, content flows in full-width cream bands separated by generous 80px vertical gaps. Each section follows a consistent pattern: small-caps label → centered description → visual demonstration. The Support section shows a centered modal mockup with notification popovers scattered around it at varied positions, creating an exploded-view composition. Navigation is a minimal top bar with no sticky behavior. The overall rhythm is spacious and unhurried — each element gets room to breathe with 24-40px internal padding and wide external margins.
Imagery
Illustration-driven with a playful, hand-drawn quality. The signature visual is the coffee cup mascot and coffee-bean icons rendered in warm yellows and terracotta. Product illustrations appear in card headers (e.g., the open book for Shop) with flat colors and soft rounded shapes. Creator avatars are circular crops at 40-100px, always displayed with a thin white ring. No photography in the marketing surfaces — the system is purely illustration + typography + UI, giving it a universal, language-agnostic feel. Icons are 2px-stroke line art in #000000 or #717171, occasionally filled for active states.
Design notes
Agent Guide
## Quick Color Reference - text: #000000 (primary), #222222 (body), #717171 (muted) - background: #faf8f0 (canvas), #ffffff (card) - border: #e5e7eb (hairline), #f5d5cf (warm accent) - accent: #f7d046 (decorative yellow) - primary action: no distinct CTA color ## Example Component Prompts 1. **Creator Profile Card**: White surface (#ffffff), 24px border-radius, 16px padding, three-layer shadow. Circular avatar (40px diameter) at top-left. Below: Circular Medium 14px name in #000000, Circular Regular 12px description in #222222, heart icon (#717171) with supporter count in #717171. 2. **Marigold Signup Button**: Fill #ffdd00, text #000000, Circular Bold 16px, 9999px border-radius, 12px vertical / 24px horizontal padding. No border. Center label 'Start my page'. 3. **Support Modal**: White surface (#ffffff), 32px border-radius, 24px padding, three-layer shadow. Top: 100px illustration. Title: 'Buy [name] a coffee' in Circular Bold 20px #000000. Coffee count row: five pill buttons (9999px radius, 12px padding) — default state has 1px #e5e7eb border, selected state has #d8573f fill with white text. Message input: full-width, 1px #e5e7eb border, 8px radius, 12px 16px padding. Bottom: Terracotta Support button (#d8573f fill, white text, 9999px radius, 14px 28px padding). 4. **Section Header Pattern**: Centered on cream canvas (#faf8f0). Small-caps label 'SHOP' in Circular Bold 12px #222222 with 1.5px letter-spacing. Below: Circular Regular 16px #222222 description text, max-width 640px, centered. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.
Elevation Philosophy
The system uses exactly one shadow recipe — a three-layer black-alpha stack that simulates a card resting on paper: a sharp 2px close shadow for edge definition, a 40px ambient blur for soft floor shadow, and a 5px medium blur for the mid-range body. All cards, modals, and popovers use this identical recipe. There are no colored shadows, no inner shadows, no glow effects. Depth is communicated exclusively through this single shadow pattern plus the cream-to-white surface contrast.
Similar brands
Patreon
Same creator-support space with warm coral-red accent, pill-shaped buttons, and generous card-based layouts for creator profiles
Gumroad
Similar pink-to-coral warm accent palette, oversized bold display headlines, and a playful creator-economy atmosphere with floating cards
Notion
Same warm off-white canvas with black text, circular/geometric sans-serif typography, and a minimal but generous card-based component system
Substack
Same cream-paper atmosphere, massive bold black headlines, and a creator-tools identity that prioritizes warmth and approachability over tech-forward density
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
