---
title: "Buy Me a Coffee design system"
variant: extended
source: https://buymeacoffee.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/buymeacoffee-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Buy Me a Coffee · Design System

> Bright, approachable tools for supporting creators

**Theme:** light · **Industry:** saas · **Source:** https://buymeacoffee.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious, friendly homepage presents Buy Me a Coffee as an easy way for creators to receive support, memberships, and shop sales. Bold centered messaging, vivid yellow calls to action, and floating product examples keep the page approachable and tangible.

## North star

Keep the page bright and creator-friendly: pair confident centered typography with generous whitespace and tangible, softly elevated product examples.

## Overview

The visual strategy pairs a predominantly white canvas with near-black typography and generous open space, keeping the creator-focused message easy to scan. A warm off-white surface appears in the footer, while muted gray supports secondary copy and subtle pale borders define selected edges. The hero is centered and typographically bold, with an emphatic yellow CTA that stands out in the screenshot; treat that yellow as a visible interface accent rather than infer an unmeasured hex value. Circular typography gives headings a soft, modern voice, while the measured display and H1 treatments use tight negative tracking. The page unfolds as a single-column sequence of centered feature stories, each supported by compact product-interface imagery. Cards and creator examples float around the hero and feature mockups, adding depth without turning the page into a dense dashboard. Consistent whitespace separates sections, and the final benefits area shifts into a compact multi-column layout before a quiet footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the dominant background behind the hero and feature sections. |
| Soft Ink | `#222222` | `--color-soft-ink` | neutral | Primary measured text color for headings, body copy, and selected links. |
| Warm Paper | `#faf8f0` | `--color-warm-paper` | surface | Warm, lightly tinted footer surface that gently distinguishes the closing band. |
| Quiet Slate | `#717171` | `--color-quiet-slate` | neutral | Muted headings and supporting copy, especially for secondary information. |
| Blush Hairline | `#f5d5cf` | `--color-blush-hairline` | semantic | Measured border color for subtle outlines; use sparingly rather than as a section fill. |
| Tomato Detail | `#d8573f` | `--color-tomato-detail` | accent | Low-area measured color, likely a minor detail in support or product UI rather than a defining brand field. |
| Pale Stone | `#e6e0df` | `--color-pale-stone` | neutral | Minor measured text or interface detail; not a dominant page color. |
| True Black | `#000000` | `--color-true-black` | neutral | Black text and badges within measured interface elements and floating product examples. |
| Graphite Gray | `#4e4e4e` | `--color-graphite-gray` | neutral | Minor secondary text detail within measured interface content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#faf8f0` (Warm Paper) · `--color-text` → `#222222` (Soft Ink) · `--color-text-muted` → `#717171` (Quiet Slate) · `--color-border` → `#f5d5cf` (Blush Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#222222` | `#faf8f0` | 14.96:1 | AAA |
| `#717171` | `#ffffff` | 4.88:1 | AA |
| `#717171` | `#faf8f0` | 4.59:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Circular Regular | `--font-display` | webfont | 400, 900 | General interface and heading typography, including measured display and H2 roles. | Nunito Sans |
| Circular Book | `--font-body` | webfont | 400 | Body copy and captions across explanatory sections. | Nunito Sans |
| Circular Bold | `--font-circular-bold` | webfont | 400, 500, 700 | Display and H1 headings, with strong emphasis in the hero and feature titles. | Nunito Sans |
| Circular Medium | `--font-circular-medium` | webfont | 400 | Navigation and link text, including measured FAQ links. | Nunito Sans |

- **Circular Regular:** Measured weights include 400 and 900; retain a rounded, clean sans-serif voice.
- **Circular Book:** Use a regular, readable weight for supporting copy; avoid making paragraph text visually heavy.
- **Circular Bold:** Headings are bold and tightly tracked; measured display and H1 use negative letter spacing.
- **Circular Medium:** Medium emphasis suits short links; keep casing natural except for uppercase eyebrow labels.

### Type scale — Custom (ratio ≈ 1.687, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 0.99 | -0.025em | — | Circular Bold | Oversized hero headline, bold with tight tracking. |
| h1 | 64px | 400 | 1.25 | -0.031em | — | Circular Bold | Primary page and major feature headings. |
| h2 | 24px | 400 | 1.33 | 0 | — | Circular Regular | Section-level headings and supporting feature titles. |
| body | 20px | 400 | 1.2 | 0 | — | Circular Book | Explanatory paragraphs beneath feature headings. |
| caption | 15px | 400 | 1.07 | 0 | — | Circular Book | Small notes and supporting interface labels. |
| link | 16px | 400 | 1.5 | 0 | — | Circular Medium | Navigation and inline informational links. |
| eyebrow | 16px | 700 | 1 | 0.125em | uppercase | Circular Bold | Uppercase feature category labels above headings. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 9, 12, 14, 16, 20, 24, 28, 32, 48, 64, 96 px.
- Section rhythm 64px · element gap 8px · card padding 12px · max content width 936px.

The page follows a single-column, centered storytelling flow, with a measured maximum content width of 936px. The hero gives its headline, description, CTA, and reassurance line a strong central axis, while creator cards sit as loose edge framing. Long feature sections alternate text with centered interface mockups; later benefits arrange into two- and three-column groups. Sections have generous vertical separation, keeping density comfortable. A shallow warm footer closes the otherwise white page.

## Shape & elevation

- Radius: card `16px` · media `50%` · badge `2px` · link `16px` · xs `2px` · sm `8px` · md `16px` · lg `20px` · xl `24px` · 2xl `32px` · pill `9999px`
- Shadow `lg` (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`
- Shadow `xl` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 0px 2.237px 0px, rgba(0, 0, 0, 0.04) 0px 8.949px 44.746px 0px, rgba(0, 0, 0, 0.05) 0px 2.237px 5.593px 0px`
- Shadow `lg-2` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 0px 1.955px 0px, rgba(0, 0, 0, 0.04) 0px 7.821px 39.106px 0px, rgba(0, 0, 0, 0.05) 0px 1.955px 4.888px 0px`
- Shadow `xl-2` (text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 0px 3.859px 0px, rgba(0, 0, 0, 0.04) 0px 15.438px 77.189px 0px, rgba(0, 0, 0, 0.05) 0px 3.859px 9.649px 0px`
- Shadow `xl-3` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 0px 2.794px 0px, rgba(0, 0, 0, 0.04) 0px 11.174px 55.871px 0px, rgba(0, 0, 0, 0.05) 0px 2.794px 6.984px 0px`
- Shadow `xl-4` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 0px 2.353px 0px, rgba(0, 0, 0, 0.04) 0px 9.412px 47.062px 0px, rgba(0, 0, 0, 0.05) 0px 2.353px 5.883px 0px`
- Motion: standard transition `0.5s cubic-bezier(0.2, 0.75, 0.28, 0.9)` on interactive elements.

Most of the page remains flat and white. Product cards and testimonial-style creator examples use soft, broad shadows to separate them from the canvas without heavy outlines. Rounded card corners support the friendly tone; pale borders are subtle. Layer mockups sparingly, reserving stronger floating depth for the hero and featured interface examples.

## Imagery

Use product-interface mockups rather than relying on large atmospheric photography. Examples include support forms, membership cards, shop listings, and creator content previews, arranged as small floating compositions beneath centered copy. The hero’s supporter cards tilt and hover near the page edges, while feature mockups remain legible and grounded. Include creator portraits and colorful content thumbnails inside mockups; these are supporting product imagery, not the core page palette.

## Components

### Top navigation

A slim white header places FAQ and resource links on the left, the wordmark near center, and search, login, and sign-up controls on the right.

### Hero CTA

Centered headline and supporting copy lead to a prominent rounded yellow button, followed by a short reassurance line.

### Floating creator cards

Small white supporter/profile cards frame the hero edges, with creator imagery, short descriptions, and support counts.

### Feature showcase

Centered eyebrow, title, and paragraph introduce a product area, followed by a compact interface mockup.

### Benefit checklist

A centered comparison heading sits above concise benefit statements arranged in columns with simple outline icons.

### Footer

A warm off-white closing band contains copyright, grouped navigation links, and social icons.

### Measured component styles

- **Link** (“Cara is building a new platform for arti”): transparent background · text #000000 · radius 16px · padding 0px · 400 16px ui-sans-serif
- **Card** (“Cara is building a new platform for arti”): transparent background · text #000000 · radius 16px · padding 9px 14px · 400 16px ui-sans-serif · shadow rgba(0, 0, 0, 0.15) 0px 0px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 40px 0px, rgba(
- **Badge** (“4 star”): background #000000 · text #ffffff · radius 2px · padding 2px 6px · 400 10px Circular Regular

## Do

- Use white as the dominant canvas.
- Center hero messaging and feature introductions.
- Keep headings bold, rounded, and tightly tracked.
- Use yellow prominently for the primary CTA, matching the screenshot.
- Give product mockups soft elevation and rounded corners.
- Separate feature stories with generous whitespace.

## Don't

- Do not make the page feel like a dense analytics dashboard.
- Do not introduce large dark background bands.
- Do not let decorative mockups overpower the page headline.
- Do not use pale borders as prominent dividers.
- Do not scatter accent colors across the main canvas.
- Do not compress the long-form feature sections together.

## Agent prompt

Build a new page in the Buy Me a Coffee visual style: bright, warm, creator-focused, and easy to scan. Use Gallery White (#ffffff) as the main canvas, Soft Ink (#222222) for strong text, Quiet Slate (#717171) for supporting copy, and Warm Paper (#faf8f0) for a subtle closing surface. The screenshot uses a vivid yellow primary CTA; match its visual prominence without inventing a measured hex. Use rounded Circular-like sans typography, with bold tightly tracked headings and uppercase eyebrow labels. Center the hero and feature introductions, then place compact, readable product-interface mockups beneath them. Add soft elevation to floating cards, keep decorative imagery secondary, and preserve generous vertical breathing room. Finish with a compact multi-column benefits area and quiet footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting text, CTA, and reassurance line; floating creator cards flank the content. | Primary signup action, Social proof, Low-friction reassurance | Bold display headline, Yellow pill CTA, Floating creator cards |
| 2 | other | Long centered sequence of feature stories, each pairing an eyebrow, heading, explanation, and product mockup. | Progressive feature discovery, Product-led explanation | Centered typography, Interface mockups, Generous whitespace |
| 3 | comparison | Centered heading above a two-column group of concise creator-focused benefits. | Benefit reassurance, Ownership emphasis | Check icons, Two-column statements, Strong inline emphasis |
| 4 | feature-grid | Centered comparison headline followed by a compact three-column grid of benefit items. | Feature comparison, Quick benefit scanning | Small outline icons, Short labels, Muted explanatory copy |
| 5 | footer | A shallow full-width warm band with copyright, grouped links, and social icons. | Secondary navigation, Social discovery | Warm off-white background, Compact link groups, Minimal icon row |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/buymeacoffee-com