# Buymeacoffee

> Buymeacoffee — Style Reference

## Prompt Content

```
# Buymeacoffee — Style Reference
> Cream-paper café scrapbook with floating polaroid testimonials

**Theme:** light

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.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cream Paper | `#faf8f0` | `--color-cream-paper` | Page 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 | `#ffffff` | `--color-card-white` | Card surfaces, modal backgrounds, raised panels — pure white floats above the cream canvas to create depth through luminance contrast rather than color |
| Hairline Gray | `#e5e7eb` | `--color-hairline-gray` | Borders, dividers, icon outlines, badge outlines — used at 1146+ occurrences as the universal hairline separator across cards, buttons, and inputs |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, filled icon strokes, high-contrast UI elements — the dominant text and icon color across the entire product |
| Charcoal | `#222222` | `--color-charcoal` | Body and heading text, filled SVG strokes — slightly softer than pure black for sustained reading in longer copy blocks |
| Fog Gray | `#717171` | `--color-fog-gray` | Muted helper text, secondary metadata, small caps labels — the quietest text voice for timestamps, supporter counts, and contextual hints |
| Marigold | `#ffdd00` | `--color-marigold` | Yellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |
| Buttercup | `#f7d046` | `--color-buttercup` | Yellow wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |
| Terracotta | `#d8573f` | `--color-terracotta` | Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |
| Blush Border | `#f5d5cf` | `--color-blush-border` | Soft warm border accent for notification cards and supporter activity popovers — bridges Terracotta's intensity into a gentle outline |

## Tokens — Typography

### ui-sans-serif — ui-sans-serif — detected in extracted data but not described by AI · `--font-ui-sans-serif`
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.5
- **Role:** ui-sans-serif — detected in extracted data but not described by AI

### Circular Bold — 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. · `--font-circular-bold`
- **Substitute:** Inter (700), Manrope (700), or Plus Jakarta Sans (700)
- **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
- **Role:** 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.

### Circular Medium — Subheadings, card titles, and emphasis within body copy — the bridge weight between Bold displays and Regular body, used where hierarchy needs weight without volume · `--font-circular-medium`
- **Substitute:** Inter (500), Manrope (500), or Plus Jakarta Sans (500)
- **Weights:** 500
- **Sizes:** 14px, 16px, 24px, 30px
- **Line height:** 1.25-1.50
- **Letter spacing:** -0.5px at 24px, -0.34px at 16px
- **Role:** Subheadings, card titles, and emphasis within body copy — the bridge weight between Bold displays and Regular body, used where hierarchy needs weight without volume

### Circular Regular — Body copy, descriptions, conversational text — the workhorse weight for everything from supporter messages to card body descriptions, with a 16px baseline for body text · `--font-circular-regular`
- **Substitute:** Inter, Manrope, or Plus Jakarta Sans (all at 400)
- **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
- **Role:** Body copy, descriptions, conversational text — the workhorse weight for everything from supporter messages to card body descriptions, with a 16px baseline for body text

### Circular Book — 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 · `--font-circular-book`
- **Substitute:** Inter (400), Manrope (400), or Plus Jakarta Sans (400)
- **Weights:** 400
- **Sizes:** 16px, 20px, 24px
- **Line height:** 1.17-1.50
- **Role:** 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

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.2 | — | `--text-caption` |
| body | 14px | 1.5 | — | `--text-body` |
| body-lg | 16px | 1.5 | -0.34px | `--text-body-lg` |
| subheading | 20px | 1.2 | -0.6px | `--text-subheading` |
| heading-sm | 24px | 1.17 | -0.5px | `--text-heading-sm` |
| heading | 30px | 1.25 | -0.63px | `--text-heading` |
| heading-lg | 40px | 1.2 | -1.24px | `--text-heading-lg` |
| display | 64px | 1 | -2.7px | `--text-display` |
| hero | 96px | 0.99 | -4px | `--text-hero` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 96 | 96px | `--spacing-96` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Value |
|---------|-------|
| tags | 9999px |
| cards | 24px |
| modals | 32px |
| buttons | 9999px |
| hero-cards | 40px |
| small-elements | 8px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.15) 0px 0px 2px 0px, rgba(0, 0, 0, 0.04) ...` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 16px

## Components

### Marigold Pill CTA
**Role:** Primary creator signup action

Filled 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
**Role:** Primary supporter payment action

Filled 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
**Role:** Secondary action

Transparent 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
**Role:** Social proof, creator showcase

White 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
**Role:** Coffee purchase interaction

White 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
**Role:** Quantity picker for support

Horizontal 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
**Role:** Activity feed, social proof

White 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
**Role:** Social proof header

Row 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
**Role:** Section divider and category marker

Circular 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
**Role:** Creator discovery

Pill-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
**Role:** Global navigation

Transparent 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
**Role:** Introductory text for content sections

Centered Circular Regular 16px #222222 text, max-width ~640px, below the small caps section label. Conversational, lowercase tone matching the brand voice.

## Do's and Don'ts

### 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

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Cream Canvas | `#faf8f0` | Page background, section bands — the warm ground that establishes the café-paper atmosphere |
| 1 | Card White | `#ffffff` | Creator cards, support modals, elevated content panels — pure white floats above cream for contrast-based depth |
| 2 | Hairline Edge | `#e5e7eb` | Borders and dividers that define card edges and separate content zones without using shadow weight |

## Elevation

- **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`

## 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.

## 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.

## Agent Prompt 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

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-cream-paper: #faf8f0;
  --color-card-white: #ffffff;
  --color-hairline-gray: #e5e7eb;
  --color-ink-black: #000000;
  --color-charcoal: #222222;
  --color-fog-gray: #717171;
  --color-marigold: #ffdd00;
  --color-buttercup: #f7d046;
  --color-terracotta: #d8573f;
  --color-blush-border: #f5d5cf;

  /* Typography — Font Families */
  --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-circular-bold: 'Circular Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-circular-medium: 'Circular Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-circular-regular: 'Circular Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-circular-book: 'Circular Book', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.34px;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.6px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.17;
  --tracking-heading-sm: -0.5px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: -0.63px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -1.24px;
  --text-display: 64px;
  --leading-display: 1;
  --tracking-display: -2.7px;
  --text-hero: 96px;
  --leading-hero: 0.99;
  --tracking-hero: -4px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 36px;
  --radius-3xl-4: 40px;
  --radius-full: 48px;
  --radius-full-2: 9999px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 24px;
  --radius-modals: 32px;
  --radius-buttons: 9999px;
  --radius-hero-cards: 40px;
  --radius-small-elements: 8px;

  /* Shadows */
  --shadow-subtle: 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;

  /* Surfaces */
  --surface-cream-canvas: #faf8f0;
  --surface-card-white: #ffffff;
  --surface-hairline-edge: #e5e7eb;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-cream-paper: #faf8f0;
  --color-card-white: #ffffff;
  --color-hairline-gray: #e5e7eb;
  --color-ink-black: #000000;
  --color-charcoal: #222222;
  --color-fog-gray: #717171;
  --color-marigold: #ffdd00;
  --color-buttercup: #f7d046;
  --color-terracotta: #d8573f;
  --color-blush-border: #f5d5cf;

  /* Typography */
  --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-circular-bold: 'Circular Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-circular-medium: 'Circular Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-circular-regular: 'Circular Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-circular-book: 'Circular Book', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --text-body: 14px;
  --leading-body: 1.5;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.34px;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.6px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.17;
  --tracking-heading-sm: -0.5px;
  --text-heading: 30px;
  --leading-heading: 1.25;
  --tracking-heading: -0.63px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: -1.24px;
  --text-display: 64px;
  --leading-display: 1;
  --tracking-display: -2.7px;
  --text-hero: 96px;
  --leading-hero: 0.99;
  --tracking-hero: -4px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 36px;
  --radius-3xl-4: 40px;
  --radius-full: 48px;
  --radius-full-2: 9999px;

  /* Shadows */
  --shadow-subtle: 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;
}
```
```