---
version: alpha
name: Wispr Flow
description: "Butter-cream paper, a serif that speaks, lavender chips stitched in black"
colors:
  on-surface-variant: "#8A8A80"
  on-surface: "#1A1A1A"
  surface: "#FFFFEB"
  outline: "#E4E4D0"
  error: "#7F1C34"
  neutral: "#222222"
  primary: "#F0D7FF"
  fathom: "#034F46"
  glow: "#FFA946"
  white: "#FFFFFF"
  signal: "#FFBCF2"
  flare: "#FF6C4C"
  border-primary: "#1A1A1A4D"
typography:
  display:
    fontFamily: EB Garamond
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: 0em
  display-small:
    fontFamily: EB Garamond
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  heading:
    fontFamily: Figtree
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  subheading:
    fontFamily: Figtree
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  title:
    fontFamily: Figtree
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  lead:
    fontFamily: Figtree
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-large:
    fontFamily: Figtree
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Figtree
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
  body-regular:
    fontFamily: Figtree
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
  caption:
    fontFamily: Figtree
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
rounded:
  buttons-chips: 12px
  secondary-link-chip: 14px
  small-surface: 8px
  feature-card: 32px
  dark-card: 40px
  section-radius: 2.5rem
  pill-capsule: 992px
spacing:
  spacer-medium: 1.5rem
  spacer-large: 3rem
  section-padding-medium: 6rem
  section-padding-large: 8rem
  section-padding-x-large: 10rem
  padding-xx-huge: 14rem
---
# Wispr Flow — Style Reference
> Butter-cream paper, a serif that speaks, lavender chips stitched in black

**Theme:** light

Wispr Flow builds a warm, editorial voice interface on one unusual canvas: `#FFFFEB` "lumen," a butter-yellow paper that reads softer than white and instantly signals *not-another-AI-startup*. The signature move is the two-tone serif display — EB Garamond set enormous (120px / 7.5rem) with the first clause dropped to a muted `#8A8A80` grey and the payoff clause snapped to near-black `#1A1A1A`, so the headline literally trails off and lands like spoken breath. Interactive surfaces are outlined, not filled: every button and nav pill wears a 2px `#1A1A1A` hairline at a soft 12px radius, and the one hard shadow in the system is a blur-free `3px 3px 0` black offset that makes chips feel like stickers pressed onto the page. The accent is a single lavender — `#F0D7FF` "dawn" — reserved for the primary CTA and links; a deep forest `#034F46` and a warm amber `#FFA946` show up only inside dark cards and editorial moments. Layout is generous and rounded — 40px card corners, section radii up to 5rem, curved transcription text arcing across the hero — a page that feels handwritten in a print shop, not shipped from a component library.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Lumen | `#FFFFEB` | `--base-color--lumen` | The canvas. Butter-cream paper behind everything; also the text color on dark cards. The identity color — never swap it for plain white. |
| Vast | `#1A1A1A` | `--base-color--vast` | Primary ink and every outline. Near-black for headlines, body, the 2px chip borders, and the hard offset shadow. |
| Dawn | `#F0D7FF` | `--base-color--dawn` | Lavender accent. The ONLY fill on the primary CTA and the link color — restraint is the point; do not spray it across backgrounds. |
| Muted Slate | `#8A8A80` | *(inferred slug)* `--color-text-muted` | The greyed first clause of the two-tone display and secondary label text on cream. Warm grey, not neutral. |
| Fathom | `#034F46` | `--base-color--fathom` | Deep forest green. Reserved for the occasional dark feature card (32px radius) — an editorial surface, never a button. |
| Glow | `#FFA946` | `--base-color--glow` | Warm amber highlight. Editorial accent / illustration only; keep it off CTAs. |
| Lumen Dark | `#E4E4D0` | `--base-color--lumen-dark` | The one soft border on cream — hairline dividers and low-contrast card edges. |
| Neutral 222 | `#222222` | `--base-color-neutral--neutral-darker` | Slightly-lifted body ink used on secondary buttons and dense copy. |
| White | `#FFFFFF` | `--base-color--white` | True white for alternate/inverted background blocks and text on `Vast`. |
| Signal | `#FFBCF2` | `--base-color--signal` | Hot-pink accent in the extended palette — decorative flourishes only. |
| Flare | `#FF6C4C` | `--base-color--flare` | Coral accent in the extended palette — illustration / emphasis, not UI chrome. |
| Pulse | `#7F1C34` | `--base-color--pulse` | Deep wine, the dark end of the error family. Systemic, rarely surfaced. |
| Border Primary | `#1A1A1A4D` | `--border-color--border-primary` | 30%-alpha ink for soft outlines that need to sit under full-strength borders. |

## Tokens — Typography
### EB Garamond — the display voice: giant serif headlines, two-tone clauses, italic pull-quotes · `--_text-collection---font--primary-font`
- **Substitute:** Cormorant Garamond, Sorts Mill Goudy, Georgia
- **Weights:** 400 (regular + italic)
- **Sizes:** 120px / 7.5rem (h1), 96px / 6rem (h1-small), 75px / 4.6875rem (h2-big), 64px / 4rem (h2), 48px / 3rem (h3), 32px / 2rem (h4)
- **Line height:** tight — roughly 0.95–1.05 on display sizes so the serif holds together at scale
- **Letter spacing:** none / default; the letterforms carry the character
- **Role:** Every headline and hero clause. Its low weight (400) at huge sizes is deliberate — the display feels spoken, not shouted.

### Figtree — the working voice: subheads, body, buttons, nav, labels · `--_text-collection---font--body-font`
- **Substitute:** Inter, Hanken Grotesk, system-ui
- **Weights:** 400 (body), 500 (labels), 600 (buttons / nav), 700 (emphasis)
- **Sizes:** 24px / 1.5rem (xlarge), 22px / 1.375rem, 20px / 1.25rem (large), 18px / 1.125rem (medium), 16px / 1rem (regular), 14px / .875rem (small), 13px / .8125rem (xsmall)
- **Line height:** ~1.4–1.6 for readable body
- **Letter spacing:** neutral; slight tightening acceptable on large labels
- **Role:** The entire UI layer — subheadlines, paragraphs, the 600-weight CTA text, nav items, and availability captions.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display (h1) | 120px / 7.5rem | ~0.95 | 0 | `--_text-collection---heading--h1` |
| Display small | 96px / 6rem | ~1.0 | 0 | `--_text-collection---heading--h1-small` |
| Heading (h2) | 64px / 4rem | ~1.05 | 0 | `--_text-collection---heading--h2` |
| Subheading (h3) | 48px / 3rem | ~1.1 | 0 | `--_text-collection---heading--h3` |
| Title (h4) | 32px / 2rem | ~1.2 | 0 | `--_text-collection---heading--h4` |
| Lead (h5) | 20px / 1.25rem | ~1.4 | 0 | `--_text-collection---heading--h5` |
| Body large | 20px / 1.25rem | ~1.5 | 0 | `--_text-collection---body--large` |
| Body | 18px / 1.125rem | ~1.6 | 0 | `--_text-collection---body--medium` |
| Body regular | 16px / 1rem | ~1.6 | 0 | `--_text-collection---body--regular` |
| Caption | 14px / .875rem | ~1.5 | 0 | `--_text-collection---body--small` |

## Tokens — Spacing & Shapes
**Base unit:** 4px (rem-based scale)   **Density:** comfortable — generous section padding, roomy cards

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Spacer medium | 1.5rem / 24px | `--_spacing---spacers--medium` |
| Spacer large | 3rem / 48px | `--_spacing---spacers--large` |
| Section padding medium | 6rem / 96px | `--_spacing---section-paddings--medium` |
| Section padding large | 8rem / 128px | `--_spacing---section-paddings--large` |
| Section padding x-large | 10rem / 160px | `--_spacing---section-paddings--x-large` |
| Padding xx-huge | 14rem / 224px | `--_spacing---padding--xx-huge` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons / chips | 12px |
| Secondary link chip | 14px–16px |
| Small surface | 8px |
| Feature card (green) | 32px |
| Dark card | 40px |
| Section radius (small → large) | 2.5rem → 5rem |
| Pill / capsule | 992px–1600px (effectively full) |
| Circle | 100% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Sticker offset | `rgb(0, 0, 0) 3px 3px 0px 0px` | *(inferred slug)* `--shadow-sticker` |

### Layout
- **Page max-width:** contained, centered ~1200px content column
- **Section gap:** 6rem–10rem vertical section padding
- **Card padding:** 32px–70px (dark cards run 48px–70px top)
- **Element gap:** 24px (`spacers--medium`) baseline, 48px between blocks

## Components
### Primary Button — "Download for free"
**Role:** The single conversion action, repeated in the nav and hero.
Fill `#F0D7FF` (dawn lavender), text `#1A1A1A`, 2px `#1A1A1A` border, 12px radius, padding `16px 24px`, Figtree 600 / 16px. The outline plus soft fill is the whole identity — never a borderless solid button.

### Secondary Button — "Try Flow"
**Role:** Lower-priority action beside the primary CTA.
Fill `#FFFFEB` (cream, same as canvas), text `#1A1A1A`, 2px `#1A1A1A` border, 12px radius, padding `16px 24px`, Figtree 600 / 16px. Reads as an outlined ghost against the page because the fill matches the background.

### Nav Bar
**Role:** Top navigation, a floating bordered container.
A rounded rectangle sitting on the cream canvas with a hairline outline, logo wordmark "Flow" at left, text nav items (Product, Individuals, Business, Resources, Company) center, and the lavender Download CTA pinned right. Dropdown carets on multi-item menus.

### Hero Display Headline
**Role:** The page's first and loudest statement.
EB Garamond 400 at 120px / 7.5rem. Two-tone by clause: opening clause in muted `#8A8A80`, resolving clause in `#1A1A1A` — the color break does the emphasis, not weight or italics.

### Subheadline
**Role:** One-line value proposition under the display.
Figtree 400/500 at ~20–24px, `#1A1A1A`, centered, tight two-line measure ("The voice-to-text AI that turns speech into clear, polished writing in every app.").

### Availability Caption
**Role:** Platform reassurance under the CTA.
Figtree 400 at 14px in muted `#8A8A80` ("Available on Mac, Windows, iPhone, and Android"). Quiet, secondary, never bordered.

### Dark Feature Card
**Role:** Inverted editorial surface for product storytelling.
Background `#1A1A1A`, text `#FFFFEB`, no border, 40px radius, padding `48px`–`70px 55px`. The cream-on-black inversion is how the system creates contrast without introducing new hues.

### Green Feature Card
**Role:** A second accent surface in the card stack.
Background `#034F46` (fathom), text `#FFFFEB`, 32px radius, `32px` padding. Deep forest is a card-only color; keep it out of buttons and nav.

### Voice Waveform Pill
**Role:** The hero's animated dictation motif.
A capsule (near-full radius) with a 2px `#1A1A1A` outline on cream, containing an audio-waveform glyph — the literal product made visual.

### Curved Transcription Text
**Role:** Signature ambient decoration in the hero.
Live-transcript sentences set in Figtree along curved SVG paths (light grey on cream, and white on a black ribbon sweeping the lower hero) — motion that shows dictation happening around the headline.

### Link
**Role:** Inline text links and text-style nav items.
`#F0D7FF` (dawn) or `#1A1A1A` depending on context, Figtree 400/600, no underline by default. Lavender is the link signal on light copy.

### System / Status Colors
**Role:** Success, warning, and error states (rarely surfaced in marketing).
Success `#CEF5CA` on `#114E0B`, warning `#FCF8D8` on `#5E5515`, error `#F8E4E4` on `#7F1C34`, focus ring `#2D62FF`. Pastel-fill + dark-text pairs that stay on-brand with the paper aesthetic.

## Do's and Don'ts
### Do
- Build on the `#FFFFEB` lumen canvas — it is the brand. White is only for deliberate inverted blocks.
- Outline interactive elements with the 2px `#1A1A1A` border at 12px radius; let the hard `3px 3px 0` black shadow do the "lift."
- Set headlines in EB Garamond 400 at real display scale (64px+) and use the two-tone clause trick for emphasis.
- Keep `#F0D7FF` lavender exclusive to the primary CTA and links.
- Use the dark `#1A1A1A` and green `#034F46` cards to create contrast zones instead of new accent colors.

### Don't
- Don't fill buttons with a borderless solid — the hairline outline is non-negotiable.
- Don't add blur to the shadow; the offset is a crisp `0px` blur sticker edge.
- Don't bold or italicize the display headline to add weight — the 400-weight serif at scale is the voice.
- Don't paint sections lavender, amber, or green as backgrounds; those live inside cards and accents.
- Don't substitute white for the cream canvas — it kills the entire warm-paper personality.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFEB` | The butter-cream page — default background everywhere. |
| 1 | Alternate | `#FFFFFF` | True-white blocks for deliberate contrast panels. |
| 2 | Dark card | `#1A1A1A` | Inverted feature cards, cream text, 40px radius. |
| 2 | Green card | `#034F46` | Second accent surface, cream text, 32px radius. |
| — | Border soft | `#E4E4D0` | Low-contrast dividers on cream. |
| — | Border strong | `#1A1A1A` | The 2px chip / nav outline. |

## Elevation
Depth is drawn, not blurred. The system has exactly one shadow — a hard `rgb(0,0,0) 3px 3px 0 0` offset with zero blur — that makes chips and cards read like pasted stickers. Everything else conveys hierarchy through the 2px `#1A1A1A` outline and through luminance inversion: cream cards on cream get an outline, while dark (`#1A1A1A`) and forest (`#034F46`) cards step forward by dropping the background to near-black and lifting text to cream. There is no ambient soft-shadow layer; the page stays flat and editorial.

## Imagery
Illustrative and typographic, not photographic. The hero's defining imagery is *text as image* — live-transcription sentences arced along curved SVG paths, a waveform glyph in an outlined pill, and a black ribbon of white dictation text sweeping across the lower fold. Assets lean hand-crafted and print-shop, matching the cream paper. Accent colors (amber `#FFA946`, coral `#FF6C4C`, pink `#FFBCF2`) most likely appear here as illustration highlights rather than in UI chrome.

## Layout
Contained and centered — a ~1200px content column floating on the full-bleed cream canvas, with a bordered floating nav bar pinned near the top. Vertical rhythm is generous: 6rem–10rem section padding, 24px/48px element gaps. Corners are consistently soft (12px chips, 32–40px cards, up to 5rem section radii). The hero centers the display headline with symmetric decoration curling in from the left and sweeping across the bottom, then transitions into a dark section (visible black block below the fold) — the mixed light/dark card rhythm that structures the rest of the page.

## Typography Signature
Two voices, cleanly split. EB Garamond (serif, 400) owns every headline; Figtree (sans, 400–700) owns every functional surface. The signature is the **two-tone display clause**: a single sentence broken by color — muted `#8A8A80` for the setup, `#1A1A1A` for the payoff — so "Don't type, just speak" reads with the cadence of spoken thought trailing into resolution. Display sizes stay at weight 400 despite running to 120px, which keeps the serif elegant rather than heavy; emphasis comes from scale and color, never from bolding. Body copy in Figtree sits calm and low-contrast beneath it, a deliberate quiet backdrop so the serif can sing.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFEB` / text: `#1A1A1A` / muted text: `#8A8A80` / surface (dark card): `#1A1A1A` / border: `#1A1A1A` (soft `#E4E4D0`) / accent: `#F0D7FF` / primary action: `#F0D7FF` fill with 2px `#1A1A1A` border

## Example Component Prompts
1. **Primary CTA button**: Lavender chip — background `#F0D7FF`, text `#1A1A1A` in Figtree 600 / 16px, 2px solid `#1A1A1A` border, 12px radius, `16px 24px` padding, optional hard shadow `3px 3px 0 #000`. Label "Download for free."
2. **Two-tone hero headline**: EB Garamond weight 400 at `clamp(56px, 8vw, 120px)`, line-height 0.98, on `#FFFFEB` canvas. First clause colored `#8A8A80`, second clause `#1A1A1A`, e.g. "Don't type, just speak."
3. **Dark feature card**: Background `#1A1A1A`, text `#FFFFEB`, 40px radius, 48px padding, no border. Figtree body at 16–18px; heading in EB Garamond at 32–48px cream.
4. **Floating nav bar**: Cream `#FFFFEB` container with a hairline border, logo wordmark left, Figtree 500/600 nav links center, lavender Download CTA right; soft rounded rectangle, contained max-width.
5. **Availability caption**: Figtree 400 / 14px in `#8A8A80`, centered under the CTA — "Available on Mac, Windows, iPhone, and Android." No border, no emphasis.

## Similar Brands
- **Superhuman** — shares the calm, premium, serif-inflected productivity-tool voice with restrained single-accent color.
- **Notion (editorial marketing)** — warm off-white canvas, generous type, illustration-over-photography approach.
- **Retro / Dawn Labs** — soft rounded chips with outlined borders and a friendly pastel-plus-black sticker aesthetic.
- **Linear (mid-era light pages)** — big display type, disciplined single accent, quiet functional sans body.
- **Framer template craft (Webflow-built marketing)** — the curved-text, oversized-serif, print-shop editorial hero style Wispr Flow is built in.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Core */
  --color-lumen: #FFFFEB;           /* canvas / cream paper */
  --color-vast: #1A1A1A;            /* primary ink + outlines */
  --color-dawn: #F0D7FF;            /* lavender accent / CTA / link */
  --color-text-muted: #8A8A80;      /* two-tone grey + captions (inferred slug) */
  --color-fathom: #034F46;          /* deep green card */
  --color-glow: #FFA946;            /* amber accent */
  --color-lumen-dark: #E4E4D0;      /* soft border */
  --color-white: #FFFFFF;
  --color-neutral-darker: #222222;

  /* Colors — Extended accents */
  --color-signal: #FFBCF2;          /* hot pink */
  --color-flare: #FF6C4C;           /* coral */
  --color-pulse: #7F1C34;           /* wine / error-dark */

  /* Colors — Neutrals ramp */
  --color-black: #000000;
  --color-neutral-darkest: #111111;
  --color-neutral-dark: #444444;
  --color-neutral: #666666;
  --color-neutral-light: #AAAAAA;
  --color-neutral-lighter: #CCCCCC;
  --color-neutral-lightest: #EEEEEE;

  /* Colors — System */
  --color-success: #CEF5CA;
  --color-success-dark: #114E0B;
  --color-warning: #FCF8D8;
  --color-warning-dark: #5E5515;
  --color-error: #F8E4E4;
  --color-error-dark: #7F1C34;
  --color-focus: #2D62FF;

  /* Colors — Alpha (ink on cream) */
  --border-color-border-primary: #1A1A1A4D;   /* 30% ink */
  --alpha-dark-70: #1A1A1AB3;
  --alpha-dark-50: #1A1A1A80;
  --alpha-dark-30: #1A1A1A4D;
  --alpha-dark-15: #1A1A1A26;
  --alpha-light-70: #FFFFEBB3;
  --alpha-light-50: #FFFFEB80;
  --alpha-light-30: #FFFFEB4D;
  --alpha-light-15: #FFFFEB26;

  /* Typography — Families */
  --font-primary: "EB Garamond", Cormorant Garamond, Georgia, serif;
  --font-body: Figtree, Inter, ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-h1: 7.5rem;        /* 120px */
  --text-h1-small: 6rem;    /* 96px */
  --text-h2-big: 4.6875rem; /* 75px */
  --text-h2: 4rem;          /* 64px */
  --text-h3: 3rem;          /* 48px */
  --text-h4: 2rem;          /* 32px */
  --text-h5: 1.25rem;       /* 20px */
  --text-h6: 1rem;          /* 16px */
  --text-body-xlarge: 1.5rem;
  --text-body-large: 1.25rem;
  --text-body-large-medium: 1.375rem;
  --text-body-medium: 1.125rem;
  --text-body-regular: 1rem;
  --text-body-small: 0.875rem;
  --text-body-xsmall: 0.8125rem;

  /* Spacing */
  --spacing-spacer-medium: 1.5rem;
  --spacing-spacer-large: 3rem;
  --spacing-section-medium: 6rem;
  --spacing-section-large: 8rem;
  --spacing-section-xlarge: 10rem;
  --spacing-padding-xx-huge: 14rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-button: 12px;
  --radius-link: 14px;
  --radius-card-green: 32px;
  --radius-card-dark: 40px;
  --radius-section-small: 2.5rem;
  --radius-section-large: 5rem;
  --radius-pill: 1000px;
  --radius-circle: 100%;

  /* Shadow */
  --shadow-sticker: 3px 3px 0px 0px #000000;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Core */
  --color-lumen: #FFFFEB;
  --color-vast: #1A1A1A;
  --color-dawn: #F0D7FF;
  --color-text-muted: #8A8A80;
  --color-fathom: #034F46;
  --color-glow: #FFA946;
  --color-lumen-dark: #E4E4D0;
  --color-white: #FFFFFF;
  --color-neutral-darker: #222222;

  /* Colors — Extended accents */
  --color-signal: #FFBCF2;
  --color-flare: #FF6C4C;
  --color-pulse: #7F1C34;

  /* Colors — Neutrals ramp */
  --color-black: #000000;
  --color-neutral-darkest: #111111;
  --color-neutral-dark: #444444;
  --color-neutral: #666666;
  --color-neutral-light: #AAAAAA;
  --color-neutral-lighter: #CCCCCC;
  --color-neutral-lightest: #EEEEEE;

  /* Colors — System */
  --color-success: #CEF5CA;
  --color-success-dark: #114E0B;
  --color-warning: #FCF8D8;
  --color-warning-dark: #5E5515;
  --color-error: #F8E4E4;
  --color-error-dark: #7F1C34;
  --color-focus: #2D62FF;

  /* Typography — Families */
  --font-primary: "EB Garamond", Cormorant Garamond, Georgia, serif;
  --font-body: Figtree, Inter, ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-h1: 7.5rem;
  --text-h1-small: 6rem;
  --text-h2-big: 4.6875rem;
  --text-h2: 4rem;
  --text-h3: 3rem;
  --text-h4: 2rem;
  --text-h5: 1.25rem;
  --text-h6: 1rem;
  --text-body-xlarge: 1.5rem;
  --text-body-large: 1.25rem;
  --text-body-large-medium: 1.375rem;
  --text-body-medium: 1.125rem;
  --text-body-regular: 1rem;
  --text-body-small: 0.875rem;
  --text-body-xsmall: 0.8125rem;

  /* Spacing */
  --spacing-spacer-medium: 1.5rem;
  --spacing-spacer-large: 3rem;
  --spacing-section-medium: 6rem;
  --spacing-section-large: 8rem;
  --spacing-section-xlarge: 10rem;
  --spacing-padding-xx-huge: 14rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-button: 12px;
  --radius-link: 14px;
  --radius-card-green: 32px;
  --radius-card-dark: 40px;
  --radius-section-small: 2.5rem;
  --radius-section-large: 5rem;
  --radius-pill: 1000px;
  --radius-circle: 100%;

  /* Shadow */
  --shadow-sticker: 3px 3px 0px 0px #000000;
}
```