---
version: alpha
name: YouTube
description: "A white canvas, one red play button, and Roboto doing every job."
colors:
  on-surface-variant: "#606060"
  on-surface: "#0f0f0f"
  surface: "#fff"
  outline: "rgba(0,0,0,0.1)"
  error: "#c30027"
  primary: "#f03"
  classic-red: "#f00"
  red-indicator: "#e1002d"
  light-red: "#ff4e45"
  true-ink: "#030303"
  disabled-text: "#909090"
  action-blue: "#065fd4"
  action-blue-hover: "#0556bf"
  suggested-wash: "#def1ff"
  raised-grey: "#f1f1f1"
  border-grey: "#ccc"
  themed-green: "#107516"
typography:
  display-l:
    fontFamily: YouTube Sans
    fontSize: 6.4rem
    fontWeight: 300
    lineHeight: 7.8rem
    letterSpacing: 0em
  display-m:
    fontFamily: YouTube Sans
    fontSize: 4.8rem
    fontWeight: 300
    lineHeight: 5.8rem
    letterSpacing: 0em
  display-s:
    fontFamily: YouTube Sans
    fontSize: 3.6rem
    fontWeight: 300
    lineHeight: 4.4rem
    letterSpacing: 0em
  headline-l:
    fontFamily: Roboto
    fontSize: 3.6rem
    fontWeight: 400
    lineHeight: 4.4rem
    letterSpacing: 0em
  headline-m:
    fontFamily: Roboto
    fontSize: 2.8rem
    fontWeight: 400
    lineHeight: 3.4rem
    letterSpacing: 0em
  headline-s:
    fontFamily: Roboto
    fontSize: 2.4rem
    fontWeight: 400
    lineHeight: 3rem
    letterSpacing: 0em
  body-l:
    fontFamily: Roboto
    fontSize: 1.6rem
    fontWeight: 400
    lineHeight: 2rem
    letterSpacing: 0em
  body-m:
    fontFamily: Roboto
    fontSize: 1.4rem
    fontWeight: 400
    lineHeight: 1.8rem
    letterSpacing: 0em
  body-s:
    fontFamily: Roboto
    fontSize: 1.2rem
    fontWeight: 400
    lineHeight: 1.6rem
    letterSpacing: 0em
  action-label-m:
    fontFamily: Roboto
    fontSize: 1.4rem
    fontWeight: 400
    lineHeight: 1.8rem
    letterSpacing: 0em
  caption:
    fontFamily: Roboto
    fontSize: 1.3rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.007px
  mini-attribution:
    fontFamily: Roboto
    fontSize: 1.2rem
    fontWeight: 400
    lineHeight: 1.5rem
    letterSpacing: 0em
rounded:
  cards-thumbnails: 12px
  small-controls: 10px
  pill-buttons: 20px
  larger-pills: 40px
  search-bar-fully-rounded: 100px
spacing:
  base: 4px
  2x: 8px
  3x: 12px
  4x: 16px
  5x: 20px
  6x: 24px
  8x: 32px
  10x: 40px
  14x: 56px
  16x: 64px
  24x: 96px
---
# YouTube — Style Reference
> A white canvas, one red play button, and Roboto doing every job.

**Theme:** light

YouTube's system is aggressively neutral so a single colour can carry the entire brand: a near-white page (`#fff`), ink-black text (`#0f0f0f` / `#030303`), and a full grey ramp for everything structural — then one saturated red (`#f03`, the play-button lozenge) reserved almost exclusively for the logo, Premium marks, and live indicators. The one non-red accent is an action blue (`#065fd4`) for links and the "Sign in" pill; red is *identity*, blue is *interaction* — they never trade jobs. Typography is a two-tier Roboto stack: a proprietary **YouTube Sans** for marketing display and **Roboto** for the entire product surface, with weight 500 (Medium) doing the UI heavy-lifting across nav, tabs, and buttons and a rare 900 (Black) for empty-state prompts. Shape language is pills and circles — 20–100px radii for buttons and search, 50% for icon buttons and avatars, 12px for thumbnails — on a strict 4px grid with a 56px masthead. The result reads as software, not a poster: quiet chrome, generous whitespace, and colour spent like currency.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| YouTube Red | `#f03` | `--color-brand-red` | The play-button lozenge and wordmark. Brand marks, Premium/TV/Music/Kids icons, subscribe accents — never a link, never body copy. Spend it once per screen. |
| Classic Red | `#f00` | `--color-brand-red-classic` | Deprecated pure-red brand value; legacy logo fills. Prefer `#f03`. |
| Red Indicator | `#e1002d` | `--color-red-indicator` | Live badges, the notification dot, "recording" state — signal red, distinct from brand red. |
| Brand Red Contrast | `#c30027` | `--color-brand-red-contrast` | The accessible red for text/errors on white (AA-safe); error-indicator role. |
| Light Red | `#ff4e45` | `--color-red-light` | Soft red for dark surfaces and gradient feeds; the inverse-theme brand tint. |
| Ink | `#0f0f0f` | `--color-text-primary` | Primary text and icons; also the filled black-pill surface (inverted background). |
| True Ink | `#030303` | `--color-text-primary-strong` | System text-primary token — the truest black used for titles. |
| Secondary Text | `#606060` | `--color-text-secondary` | Metadata: view counts, timestamps, channel lines, footer links. |
| Disabled Text | `#909090` | `--color-text-disabled` | Placeholder and disabled labels ("Search", inactive controls). |
| Action Blue | `#065fd4` | `--color-cta` | The only non-red accent: links, "Sign in" text, call-to-action. Interaction colour. |
| Action Blue Hover | `#0556bf` | `--color-cta-hover` | Hover/pressed state for every blue action. |
| Suggested Wash | `#def1ff` | `--color-suggested-action` | Tonal blue fill behind low-emphasis blue actions and info chips. |
| Canvas | `#fff` | `--color-bg` | The page. Base, raised, and menu backgrounds are all pure white — depth comes from hairlines, not tint. |
| Raised Grey | `#f1f1f1` | `--color-surface` | Chips, filled tonal buttons, the search-submit button (`#f8f8f8` / `#f9f9f9` are lighter siblings). |
| Hairline | `rgba(0,0,0,0.1)` | `--color-outline` | The default 1px divider/outline — barely-there structure on white. |
| Border Grey | `#ccc` | `--color-border` | Legacy solid borders on inputs and buttons (`#c6c6c6`, `#d3d3d3` are hover/variant steps). |
| Themed Green | `#107516` | `--color-success` | Sponsor/verified/success accents — rare, functional only. |

## Tokens — Typography
### YouTube Sans — proprietary display family for marketing and large headings only; light-to-black range · `--font-display`
- **Substitute:** Roboto, Arial, "Helvetica Neue", sans-serif
- **Weights:** 300 (light, default display), 700 (heavy)
- **Sizes:** display 2.8rem → 6.4rem (xs → l); narrow variants scale down ~10%
- **Line height:** 3.4rem → 7.8rem (tight, ~1.2×)
- **Letter spacing:** normal — the geometry carries it
- **Role:** Reserved for promotional display type; the product UI never uses it.

### Roboto — the entire product surface: nav, tabs, buttons, titles, body, captions · `--font-family`
- **Substitute:** Arial, "Helvetica Neue", system-ui, sans-serif
- **Weights:** 300 (light), 400 (regular body), 500 (medium — the UI default for nav/tabs/buttons), 700 (bold headings), 900 (black — empty-state prompts)
- **Sizes:** 1.2rem–3.6rem in product; measured px in use: 10, 12, 14, 16, 24
- **Line height:** 1.5rem–5rem depending on role; body ~1.4× (2rem on 1.4rem)
- **Letter spacing:** normal for body; `0.007px` + UPPERCASE on tabs and captions
- **Role:** Every interface string. Weight 500 is the signature — it makes the chrome feel crisp without shouting.

### Roboto Mono — monospace for code snippets and technical values · `--font-mono`
- **Substitute:** "SF Mono", "Roboto Mono", ui-monospace, monospace
- **Weights:** 400
- **Sizes:** 1.4rem (2.4rem line height)
- **Line height:** 2.4rem
- **Letter spacing:** normal
- **Role:** Code-snippet renderer only; never UI chrome.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display L | 6.4rem | 7.8rem | normal | `--display-l` |
| Display M | 4.8rem | 5.8rem | normal | `--display-m` |
| Display S | 3.6rem | 4.4rem | normal | `--display-s` |
| Headline L | 3.6rem | 4.4rem | normal | `--headline-l` |
| Headline M | 2.8rem | 3.4rem | normal | `--headline-m` |
| Headline S | 2.4rem | 3rem | normal | `--headline-s` |
| Body L | 1.6rem | 2rem | normal | `--body-l` |
| Body M | 1.4rem | 1.8rem | normal | `--body-m` |
| Body S | 1.2rem | 1.6rem | normal | `--body-s` |
| Action/Label M | 1.4rem | 1.8rem | normal (500) | `--action-m` |
| Caption | 1.3rem | normal | `0.007px` UPPERCASE (500) | `--caption` |
| Mini attribution | 1.2rem | 1.5rem | normal | `--mini-attribution` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| base (1x) | 4px | `--space-1` |
| 2x | 8px | `--space-2` |
| 3x | 12px | `--space-3` |
| 4x | 16px | `--space-4` |
| 5x | 20px | `--space-5` |
| 6x | 24px | `--space-6` |
| 8x | 32px | `--space-8` |
| 10x | 40px | `--space-10` |
| 14x | 56px | `--space-14` |
| 16x | 64px | `--space-16` |
| 24x | 96px | `--space-24` |

### Border Radius
| Element | Value |
|---------|-------|
| Cards / thumbnails | 12px |
| Small controls | 10px / 18px |
| Pill buttons (Sign in, Subscribe, chips) | 20px |
| Larger pills | 40px |
| Search bar / fully rounded | 100px |
| Icon buttons & avatars | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Input inset (legacy search) | `rgb(238, 238, 238) 0px 1px 2px 0px inset` | `--shadow-input` |
| Menu / dropdown elevation | `rgba(0, 0, 0, 0.2) 0px 8px 23px 0px` | `--shadow-menu` |
| Medium | `rgba(0, 0, 0, 0.25)` | `--shadow-medium` |

### Layout
- **Page max-width:** 1284px (6-column grid; columns 214 → 1284px)
- **Section gap:** 32px row margin
- **Card padding:** 16px grid-item margin (4px compact)
- **Element gap:** 16px gutter; masthead/toolbar height 56px; avatar 32px

## Components
### Masthead (Top Bar)
**Role:** The fixed 56px header holding logo, search, and account controls.
White (`#fff`) full-bleed bar, 56px tall, with the red-lozenge wordmark left, a centred search group, and account controls right. No shadow at rest — it sits on the canvas by position alone. z-index 2020.

### Search Bar
**Role:** The centered omni-search input, YouTube's most recognizable chrome.
A pill input (radius up to 100px) with a `rgba(0,0,0,0.2)` hairline border, 16px Roboto text, `#909090` placeholder ("Search"), paired with a grey (`#f8f8f8`) submit button carrying a `#d3d3d3` border and a `#333` magnifier icon. A circular (50%) mic button in raised grey sits alongside.

### Filled Pill Button
**Role:** High-emphasis action (Subscribe, primary CTA).
Black (`#0f0f0f`) fill, white text, radius 20px, padding `0 16px`, 14px Roboto **Medium (500)**. The inverse of the page — maximum contrast, no red.

### Outline Pill (Sign in)
**Role:** The signed-out identity affordance.
Transparent fill, hairline border, radius 20px, padding `0 15px`, text in Action Blue `#065fd4` at 14px/500, with a leading account glyph. Blue signals "interactive," never red.

### Tonal Chip
**Role:** Filter/category pills in horizontal rails.
Raised grey (`#f1f1f1`) fill, no border, radius 20px, 14px/500 ink text; selected state flips to a dark `#0f0f0f` fill with white text.

### Icon Button
**Role:** Compact controls — menu, mic, notifications, more.
Circular (50%), transparent at rest, 14px/500, `#0f0f0f` glyph, with a `rgba(0,0,0,0.1)` tonal hover fill. 40px hit target on the 4px grid.

### Sidebar Nav Item
**Role:** Primary navigation (Home, Shorts, Subscriptions, You, History).
A 10px-radius row with a 24px leading icon and a 14px Roboto label; active item takes a raised-grey (`#f1f1f1`) fill. Section labels ("Explore", "More from YouTube") are bold 700 at ~11.7px.

### Video Card
**Role:** The grid unit — thumbnail plus metadata.
A 12px-radius thumbnail (min 310 / max 500px wide) over a 32px avatar, title in `#0f0f0f`, and channel/metadata lines in Secondary Text `#606060`. No card border or shadow — whitespace and radius separate cards.

### Empty-State Prompt
**Role:** First-run guidance panel ("Try searching to get started").
Centered white card with a soft `rgba(0,0,0,0.2)` drop shadow, a heading in Roboto ~24px **Black (900)** ink, and supporting copy in `#606060`. The rare place 900 weight appears.

### Text Link
**Role:** Inline and footer navigation.
Action Blue `#065fd4` at 14px/500 for active links; footer links drop to Secondary Text `#606060` at 500 with no underline until hover.

### Brand Product Row
**Role:** "More from YouTube" cross-links (Premium, TV, Music, Kids).
Each row pairs a red-lozenge product glyph (`#f03`) with a 14px ink label — the one zone where brand red repeats, as a family signature.

### Footer
**Role:** Low-emphasis legal and info links.
Dense two-column set of Secondary Text (`#606060`) links at small size, no dividers — pure whitespace grouping.

## Do's and Don'ts
### Do
- Keep the page pure white (`#fff`) and let hairlines (`rgba(0,0,0,0.1)`), not fills, define structure.
- Use Roboto **Medium (500)** for all interactive chrome — nav, tabs, buttons, chips.
- Reserve red (`#f03`) for the logo, Premium/product marks, and live indicators; spend it once per view.
- Route every interactive/link colour through Action Blue `#065fd4`, hover `#0556bf`.
- Make buttons pills (20px) and icons/avatars circles (50%); thumbnails 12px.
- Hold text to the ink → `#606060` → `#909090` ladder; secondary is grey, not tinted.

### Don't
- Don't colour links or CTAs red — red is identity, blue is interaction. They never swap.
- Don't add borders or shadows to cards; rest depth on radius and whitespace.
- Don't tint surfaces — "raised" is still white or `#f1f1f1`, never a colour wash.
- Don't use YouTube Sans in the product UI; it is marketing-display only.
- Don't reach for 900 weight outside empty-state/marketing moments — 500 is the voice.
- Don't square off buttons or search; the pill is non-negotiable.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#fff` | The page, and every base/raised/menu background. |
| 1 | Raised Grey | `#f8f8f8` | Search submit button, subtle fills. |
| 2 | Tonal Grey | `#f1f1f1` | Chips, tonal buttons, active nav rows. |
| 3 | Inverted | `#0f0f0f` | Filled black pills and dark selected chips. |

## Elevation
Depth is conveyed by hairlines and luminance, not shadow. On the flat white canvas, structure comes from `rgba(0,0,0,0.1)` outlines and light grey fills (`#f1f1f1`, `#f8f8f8`); rounded corners do the separating. Shadow appears only for *floating* layers — dropdown menus and the empty-state card use `rgba(0,0,0,0.2) 0 8px 23px` — and even then softly. The masthead and cards sit flush. Elevation is a hierarchy of whiteness: raised = lighter grey, not darker shadow.

## Imagery
Photography and illustration are entirely user-generated: thumbnails and avatars are the imagery, and the chrome deliberately recedes so they dominate. The design system itself contributes almost no decorative imagery — only functional line icons (Material-style, 24px, single-weight, `#0f0f0f`) and the red play-button lozenge. Thumbnails carry a 12px radius; avatars are 32px circles. The restraint is the point: an empty grid should read as calm scaffolding waiting for content.

## Layout
A contained 1284px, 6-column grid (columns step 214 → 1284px) with a fixed 56px masthead and a collapsible left sidebar. Content is a responsive rich grid — items 310–500px wide, 16px gutters, 32px row gaps. Everything aligns to a 4px base unit. Navigation is persistent-left (Home/Shorts/Subscriptions/You/History, then Explore and More-from-YouTube groups) with a hamburger to collapse to icon rail. The rhythm is dense-but-airy: tight controls, generous grid whitespace, no full-bleed hero on the product surface.

## Typography Signature
Two modes, one family bias. **Marketing mode** uses YouTube Sans at light weight (300) and large display sizes — expressive, brand-owned, never seen in-app. **Product mode** is all Roboto, and its signature is weight discipline: 400 for reading, **500 for every interactive label** (nav, tabs, buttons, chips), 700 for section headers, and a deliberate jump to **900 Black** only for empty-state prompts like "Try searching to get started." That 500-default is what makes YouTube's chrome feel engineered rather than casual — crisp enough to scan a dense grid, quiet enough to disappear behind the thumbnails. Tabs and captions add `0.007px` tracking and UPPERCASE to earn structure without size.

## Agent Prompt Guide
## Quick Color Reference
- background: `#fff` / text: `#0f0f0f` (secondary `#606060`) / surface: `#f1f1f1` / border: `rgba(0,0,0,0.1)` (solid `#ccc`) / accent (brand): `#f03` / primary action: `#065fd4` (hover `#0556bf`)

## Example Component Prompts
1. **Masthead**: Build a fixed 56px white top bar. Left: red-lozenge YouTube wordmark. Center: a 100px-radius pill search input, 16px Roboto, `#909090` placeholder "Search", `rgba(0,0,0,0.2)` hairline border, joined to a `#f8f8f8` submit button with `#d3d3d3` border and `#333` magnifier icon; a 50% grey mic button beside it. Right: circular icon buttons + a blue outline "Sign in" pill. No shadow.
2. **Sign-in Pill**: A transparent pill, radius 20px, padding `0 15px`, hairline border, leading account glyph, label "Sign in" in Roboto Medium 14px, colour `#065fd4`; hover `#0556bf`.
3. **Video Card**: A 12px-radius thumbnail (width ~310px) above a 32px circular avatar, title in Roboto 14px `#0f0f0f`, then two metadata lines (channel, views · time) in `#606060`. No border, no shadow, 16px gutters in a responsive grid.
4. **Filter Chip Rail**: Horizontal row of pills, radius 20px, `#f1f1f1` fill, 14px Roboto Medium `#0f0f0f`; the selected chip flips to `#0f0f0f` fill with white text.
5. **Empty State**: A centered white card with `rgba(0,0,0,0.2) 0 8px 23px` shadow, heading "Try searching to get started" in Roboto Black 900 ~24px `#0f0f0f`, subtext in `#606060`.

## Similar Brands
- **Google (Material Design)** — the same neutral-white canvas, 4px grid, Roboto, and single-accent discipline; YouTube is Material with red as the identity spend.
- **Spotify** — a media grid where user artwork is the colour and the chrome stays monochrome with one brand hue held in reserve.
- **Twitch** — creator-video platform sharing the dense left-nav, pill controls, and one saturated brand colour on grey.
- **Vimeo** — the restrained, typographic, whitespace-forward cousin that also lets video thumbnails carry the palette.
- **Reddit** — utilitarian, high-density feed UI on white with a single warm brand accent and grey secondary text.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Brand */
  --color-brand-red: #f03;
  --color-brand-red-classic: #f00;
  --color-red-indicator: #e1002d;
  --color-brand-red-contrast: #c30027;
  --color-red-light: #ff4e45;
  /* Colors — Text */
  --color-text-primary: #0f0f0f;
  --color-text-primary-strong: #030303;
  --color-text-secondary: #606060;
  --color-text-disabled: #909090;
  /* Colors — Action */
  --color-cta: #065fd4;
  --color-cta-hover: #0556bf;
  --color-suggested-action: #def1ff;
  /* Colors — Surfaces & Structure */
  --color-bg: #fff;
  --color-surface: #f1f1f1;
  --color-surface-light: #f8f8f8;
  --color-inverted-bg: #0f0f0f;
  --color-outline: rgba(0, 0, 0, 0.1);
  --color-border: #ccc;
  --color-border-strong: #c6c6c6;
  --color-success: #107516;

  /* Typography — Families */
  --font-display: 'YouTube Sans', 'Roboto', Arial, 'Helvetica Neue', sans-serif;
  --font-family: 'Roboto', Arial, 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', 'SF Mono', ui-monospace, monospace;
  /* Typography — Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;
  /* Typography — Scale */
  --display-l: 6.4rem;   --leading-display-l: 7.8rem;
  --display-m: 4.8rem;   --leading-display-m: 5.8rem;
  --display-s: 3.6rem;   --leading-display-s: 4.4rem;
  --headline-l: 3.6rem;  --leading-headline-l: 4.4rem;
  --headline-m: 2.8rem;  --leading-headline-m: 3.4rem;
  --headline-s: 2.4rem;  --leading-headline-s: 3rem;
  --body-l: 1.6rem;      --leading-body-l: 2rem;
  --body-m: 1.4rem;      --leading-body-m: 1.8rem;
  --body-s: 1.2rem;      --leading-body-s: 1.6rem;
  --action-m: 1.4rem;    --leading-action-m: 1.8rem;
  --caption: 1.3rem;

  /* Spacing */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-14: 56px; --space-16: 64px; --space-24: 96px;

  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 20px;
  --radius-pill-lg: 40px;
  --radius-full: 100px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-input: rgb(238, 238, 238) 0px 1px 2px 0px inset;
  --shadow-menu: rgba(0, 0, 0, 0.2) 0px 8px 23px 0px;
  --shadow-medium: rgba(0, 0, 0, 0.25);
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Brand */
  --color-brand-red: #f03;
  --color-brand-red-classic: #f00;
  --color-red-indicator: #e1002d;
  --color-brand-red-contrast: #c30027;
  --color-red-light: #ff4e45;
  /* Colors — Text */
  --color-text-primary: #0f0f0f;
  --color-text-primary-strong: #030303;
  --color-text-secondary: #606060;
  --color-text-disabled: #909090;
  /* Colors — Action */
  --color-cta: #065fd4;
  --color-cta-hover: #0556bf;
  --color-suggested-action: #def1ff;
  /* Colors — Surfaces & Structure */
  --color-bg: #fff;
  --color-surface: #f1f1f1;
  --color-surface-light: #f8f8f8;
  --color-inverted-bg: #0f0f0f;
  --color-outline: rgba(0, 0, 0, 0.1);
  --color-border: #ccc;
  --color-border-strong: #c6c6c6;
  --color-success: #107516;

  /* Typography — Families */
  --font-display: 'YouTube Sans', 'Roboto', Arial, 'Helvetica Neue', sans-serif;
  --font-sans: 'Roboto', Arial, 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', 'SF Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-display-l: 6.4rem;
  --text-display-m: 4.8rem;
  --text-display-s: 3.6rem;
  --text-headline-l: 3.6rem;
  --text-headline-m: 2.8rem;
  --text-headline-s: 2.4rem;
  --text-body-l: 1.6rem;
  --text-body-m: 1.4rem;
  --text-body-s: 1.2rem;
  --text-action-m: 1.4rem;
  --text-caption: 1.3rem;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-24: 96px;

  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 20px;
  --radius-pill-lg: 40px;
  --radius-full: 100px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-menu: 0px 8px 23px 0px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 0 0 rgba(0, 0, 0, 0.25);
}
```