# Buy Me a Coffee — Design System
> A creator-focused platform for accepting support, memberships, and selling digital goods.
- **Canonical:** https://uiuxskills.com/library/buy-me-a-coffee
- **Source:** https://buymeacoffee.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:40.839Z

---

---
version: alpha
name: Buy Me a Coffee
description: A creator-focused platform for accepting support, memberships, and selling digital goods.
tone: >-
  Friendly, supportive, and direct. The voice is encouraging and emphasizes creator ownership and
  simplicity.
color-scheme: light
colors:
  primary: "#FFDD00"
  surface: "#FFFFFF"
  surface-container: "#F9F9F9"
  on-surface: "#000000"
  on-surface-variant: "#666666"
  outline: "#E5E5E5"
  error: "#FF3B30"
  success: "#34C759"
  on-primary: "#000000"
  focus-ring: "#FFDD00"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 64px
  headline-lg:
    fontFamily: sans-serif
    fontSize: 24px
  headline-md:
    fontFamily: sans-serif
    fontSize: 20px
  body-md:
    fontFamily: sans-serif
    fontSize: 16px
  body-sm:
    fontFamily: sans-serif
    fontSize: 14px
  label-md:
    fontFamily: sans-serif
    fontSize: 14px
  label-sm:
    fontFamily: sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#E6C700"
  button-secondary:
    backgroundColor: transparent
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.full}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.on-surface}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-surface-variant:
    backgroundColor: "{colors.on-surface-variant}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.1)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Buy Me a Coffee features a friendly, approachable, and creator-centric visual identity. The design prioritizes ease of use and emotional connection, utilizing a clean, white-dominant interface that allows creator content to stand out. It feels supportive and direct, stripping away corporate complexity in favor of a simple, encouraging experience.

## Colors

The color strategy is built on high-contrast, accessible foundations with a distinct, iconic yellow accent used to drive engagement.

*   Primary (inferred) (#FFDD00): The iconic brand yellow used for primary CTAs and brand identity.
*   Surface (#FFFFFF): The main background color for the application.
*   Surface-container (inferred) (#F9F9F9): Light gray background used for cards and section segmentation.
*   On-surface (#000000): Primary text color for high contrast on white backgrounds.
*   On-surface-variant (inferred) (#666666): Secondary text color for labels and descriptive helper text.
*   Outline (inferred) (#E5E5E5): Border color for cards and input fields.
*   Error (inferred) (#FF3B30): Semantic color for destructive actions or error states.
*   Success (inferred) (#34C759): Semantic color for success states and positive feedback.
*   Focus-ring (inferred) (#FFDD00): The primary indicator for keyboard focus and interactive states.

## Typography

Typography is clean, sans-serif, and highly legible, designed to keep the focus on creator content.

*   Display-lg: Used for main hero headlines.
*   Headline-lg / Headline-md: Used for section headers and sub-headers.
*   Body-md / Body-sm: Standard body text and secondary information.
*   Label-md / Label-sm: UI labels, button text, and small captions.

## Layout

The site utilizes a centered, container-based layout with a strict max-width constraint to maintain readability across viewports. Spacing is governed by an 8px base unit, ensuring consistent vertical rhythm and gutters. The page structure follows a logical progression: Nav → Hero → Social Proof → Features → Memberships → Shop → Footer. The design is mobile-first, with navigation collapsing into a menu on smaller screens.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background, relying on subtle, multi-layered shadows.

*   Elevation.sm: Used for subtle card lift.
*   Elevation.md: Used for dropdowns, popovers, and interactive menus.
*   Elevation.lg: Used for modal and drawer overlays.

## Shapes

The brand utilizes a "pill" shape strategy for all interactive elements, reinforcing the friendly and approachable aesthetic.

All buttons and input fields should use `{rounded.full}` to maintain this soft, non-aggressive feel. Cards use a moderate corner radius (`{rounded.md}`) to distinguish them from the background while keeping the interface feeling cohesive and modern.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons are the primary driver of action. Use the `button-primary` variant (pill-shaped, yellow background) for main actions. Use `button-secondary` (transparent background, outline border) for lower-priority actions.

### Card
Cards are the primary container for content. Use `card` for static content and `card-elevated` when the card needs to pop from the background. Both should utilize `{rounded.md}`.

### Input Field
Input fields should always be pill-shaped using `{rounded.full}`. Ensure the `input-field-focus` state is applied clearly using the `{colors.focus-ring}` to ensure accessibility.

### Badge
Badges are used for status or metadata. Use `badge` for neutral labels, `badge-success` for positive status, and `badge-error` for alerts.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs to maintain brand recognition. | Do not use sharp corners (e.g., 0px) on buttons or input fields. |
| Apply `{rounded.full}` to all input fields and primary buttons. | Avoid using `{colors.error}` for non-destructive actions. |
| Use `{typography.display-lg}` for main hero headlines. | Do not mix too many font weights; stick to standard weights. |
| Maintain consistent `{spacing.md}` between card elements. | Avoid overcrowding cards; ensure adequate `{spacing.lg}` padding. |
| Use `{colors.on-surface-variant}` for secondary descriptive text. | Do not use low-contrast text colors on `{colors.surface}` backgrounds. |
| Ensure all interactive elements have a clear `{colors.focus-ring}` state. | Never use `{colors.primary}` for text on white backgrounds without sufficient weight. |
| Use `{colors.outline}` for subtle card borders. | Do not use heavy, dark borders on cards. |
| Use `{badge-success}` for positive status indicators. | Do not use generic colors for success states. |

## Content Style

CTA style: Imperative and action-oriented. Use verbs like "Start" or "Join" to drive immediate user action. Labels should be short and direct.

Heading tone: Benefit-driven and encouraging. Headlines should focus on the creator's success and the ease of the platform rather than technical features.

Copy density: Keep paragraphs short and scannable. Use bulleted lists frequently to break up information and improve readability for users quickly scanning the page.

## Imagery & Icons

The visual language uses a mix of high-quality, authentic creator photography and clean, rounded-corner UI illustrations. Photography should feel human and personal, while illustrations should be minimal and supportive of the UI. Avoid overly complex or abstract graphics; keep the focus on the creator's work.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Buy Me a Coffee, a creator-focused platform with a friendly, supportive, and minimal tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, pixel sizes, or raw strings.
2. Render only the component variants listed under `components:`. Do not invent new variants (e.g., a ghost button or outlined pill badge) unless the spec defines them.
3. Apply the Shapes rule strictly: `{rounded.full}` on all buttons and input fields; `{rounded.md}` on all cards. Zero-radius corners are explicitly forbidden.
4. Consult the Do's and Don'ts table before making any color, spacing, or radius decision. If a user request conflicts with a rule in that table, surface the conflict before proceeding.
5. Follow the Layout section for page structure and spacing rhythm. Use mobile-first with one breakpoint at 768px when the spec does not specify one.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, typography, and elevation value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{elevation.sm}` / `{elevation.md}` / `{elevation.lg}` per the Elevation & Depth section.
- Keep CTA copy imperative and short per the Content Style section (e.g., "Start", "Join").

**Must NOT:**
- Invent colors, fonts, radii, or elevation values absent from the spec.
- Apply generic system defaults when a brand token exists.
- Use `{colors.primary}` as a text color on `{colors.surface}` backgrounds.
- Use `{colors.error}` for non-destructive actions.
- Add emoji, filler copy, or marketing language.
- Rewrite, replace, or invent page copy, headings, button labels, or navigation items.
- Alter page structure or information architecture as a side effect of applying tokens.

## When in doubt
- If a value is not in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For background roles, default to `{colors.surface-container}`; for text on surfaces, default to `{colors.on-surface}`; for secondary labels, use `{colors.on-surface-variant}`.
- Tokens marked "(inferred)" in the spec are visual approximations. If an authoritative source (theme file, Storybook) is available, those values take precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.