---
version: alpha
name: lululemon
description: "Warm-neutral athletic minimalism: near-black ink on off-white, a technical red, and one jolt of lemonade."
colors:
  on-surface-variant: "#C8C8C8"
  on-surface: "#140F0F"
  surface: "#FAFAFA"
  outline: "#D6D6D6"
  error: "#D20014"
  tertiary: "#F4F3F2"
  primary: "#005FCC"
  surface-2: "#FFFFFF"
  surface-subdued: "#F9F9F8"
  tertiary-hover: "#EFEEEC"
  ink-hover: "#433F3F"
  text-subdued: "#757575"
  text-disabled: "#919191"
  inverse: "#FFFFFF"
  lululemon-red: "#C8102E"
  red-hover: "#A00D25"
  success: "#0F752F"
  info: "#2966B0"
  warning: "#B15115"
  lemonade: "#F4FF8E"
  zest: "#F3FED7"
  daydream: "#C0DDFF"
  rosewood: "#DC6D85"
  sequoia: "#73273D"
  mossy: "#524A43"
  espresso: "#2B1F1E"
  wilderness: "#142A0E"
typography:
  caption:
    fontFamily: Saans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Saans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: Saans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-large:
    fontFamily: Saans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  label-large:
    fontFamily: Saans
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0em
  heading-small:
    fontFamily: Saans
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading-medium:
    fontFamily: Saans
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  display:
    fontFamily: Saans
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
rounded:
  sharp: 0px
  micro: 2px
  small-controls: 5px
  cards-inputs: 8px
  large-panels: 32px
  extra-large-panels: 40px
  pill-buttons: 1000px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px
---
# lululemon — Style Reference
> Warm-neutral athletic minimalism: near-black ink on off-white, a technical red, and one jolt of lemonade.

**Theme:** light

lululemon's "Zest" design system is disciplined, warm, and quietly technical. The canvas is not pure white but a soft off-white ramp — `#FAFAFA` default, stepping through `#F9F9F8`, `#F4F3F2`, `#EFEEEC` — and the ink is not pure black but `#140F0F`, a warm near-black that runs every heading and label. The whole thing is engineered like sportswear: precise tokens, a warm-grey border ramp (`#757575` → `#D6D6D6`), pill-shaped controls at a full `1000px` radius, and the brand's technical red `#C8102E` (with its `#A00D25` hover) reserved for priority actions, sale flags, and the wordmark's implied energy. Type is `Saans` — a broad-axis variable sans (300–900) that lululemon runs at a light **400 weight even for enormous display headings**, so the big "Summer sets, in." hero reads open and calm rather than heavy. Against that neutral spine sits a joyful **secondary palette** — lemonade `#F4FF8E`, zest, daydream, rosewood, wilderness — used for the "Shop by colour" product story and seasonal collections. The feel is premium performance retail: warm, roomy, photographic, and never loud except where the red or a single lemonade button chooses to be.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Off-White | `#FAFAFA` | `--color-bg` | The default page background — softer than pure white. |
| Surface | `#FFFFFF` | `--color-surface` | Cards, product tiles, the alternative/lifted surface. |
| Surface Subdued | `#F9F9F8` | `--color-surface-subdued` | Quiet control fills and subtle section bands. |
| Tertiary | `#F4F3F2` | `--color-tertiary` | Hero/tertiary button fill and disabled surfaces. |
| Tertiary Hover | `#EFEEEC` | `--color-tertiary-hover` | Hover state of the warm tertiary fill. |
| Ink | `#140F0F` | `--color-text` | Warm near-black — all headings, body, the primary fill, strong borders. |
| Ink Hover | `#433F3F` | `--color-text-hover` | Hover state of the near-black primary/filled button. |
| Text Subdued | `#757575` | `--color-text-subdued` | Secondary copy, captions, default borders. |
| Text Disabled | `#919191` | `--color-text-disabled` | Disabled text and icons. |
| Text Highlighted | `#C8C8C8` | `--color-text-highlighted` | Faint/placeholder text and highlighted borders. |
| Inverse | `#FFFFFF` | `--color-text-inverse` | Type and icons on the dark inverse surface. |
| lululemon Red | `#C8102E` | `--color-accent` | The technical brand red — priority actions, sale, accent borders/icons. |
| Red Hover | `#A00D25` | `--color-accent-hover` | Pressed/hover state of the red. |
| Border Subdued | `#D6D6D6` | `--color-border-subdued` | The default hairline between rows and cards. |
| Focus Blue | `#005FCC` | `--color-focus` | Keyboard focus ring — accessibility only, never decorative. |
| Success | `#0F752F` | `--color-success` | Confirmation, in-stock, completed. |
| Error | `#D20014` | `--color-error` | Errors and destructive states. |
| Info | `#2966B0` | `--color-info` | Informational messages. |
| Warning | `#B15115` | `--color-warning` | Cautions and low-stock warnings. |
| Lemonade | `#F4FF8E` | `--color-lemonade` | The signature secondary — the tonal "pop" button and highlight fills. |
| Zest | `#F3FED7` | `--color-zest` | Soft chartreuse-tint band from the secondary palette. |
| Daydream | `#C0DDFF` | `--color-daydream` | Soft blue seasonal accent. |
| Rosewood | `#DC6D85` | `--color-rosewood` | Warm pink seasonal accent. |
| Sequoia | `#73273D` | `--color-sequoia` | Deep berry seasonal accent. |
| Mossy | `#524A43` | `--color-mossy` | Warm taupe-brown seasonal neutral. |
| Espresso | `#2B1F1E` | `--color-espresso` | Deep warm brown for rich dark bands. |
| Wilderness | `#142A0E` | `--color-wilderness` | Deep forest green from the secondary palette. |

## Tokens — Typography
### Saans — the entire voice; a broad-axis variable sans run LIGHT even at display sizes · `--font-sans`
- **Substitute:** Saans, "Helvetica Neue", Helvetica, Roboto, -apple-system, system-ui, sans-serif
- **Weights:** 400 (regular — body AND display headings), 500 (medium — labels, buttons), 600 (caption/label emphasis); the face loads a full 300–900 axis
- **Sizes:** 12, 14, 16, 18, 20, 28, 36, 50px on the page; the declared scale reaches 100px (`6.25rem`) for hero display
- **Line height:** ~1.1 on headings, 1.4 on body
- **Letter spacing:** ~0; the face is even and needs none
- **Role:** Does everything. The signature move is setting huge headings at **400 weight** — display type stays open and editorial, never bold-heavy.
### KH Giga — pull-quotes and editorial moments · `--font-quote`
- **Substitute:** "KH Giga", Georgia, Cambria, "Times New Roman", serif
- **Weights:** 400
- **Sizes:** 28–40px (`heading-quote`)
- **Role:** The one serif — reserved for quote/editorial callouts, a warm human counterpoint to the technical Saans.

### Type Scale
| Role | Size | Line Height | Weight | Token |
|------|------|-------------|--------|-------|
| Caption | 12px | 1.4 | 600 | `--text-caption` |
| Small | 14px | 1.4 | 400 | `--text-sm` |
| Body | 16px | 1.4 | 400 | `--text-base` |
| Body Large | 18px | 1.4 | 400 | `--text-lg` |
| Label Large | 20px | 1.4 | 500 | `--text-xl` |
| Heading Small | 28px | 1.3 | 400 | `--text-2xl` |
| Heading Medium | 36px | 1.2 | 400 | `--text-3xl` |
| Display | 50px | 1.1 | 400 | `--text-4xl` |

## Tokens — Spacing & Shapes
**Base unit:** 8px (with a 4px half-step)   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--space-50` |
| xs | 8px | `--space-100` |
| sm | 12px | `--space-150` |
| md | 16px | `--space-200` |
| lg | 24px | `--space-300` |
| xl | 32px | `--space-400` |
| 2xl | 40px | `--space-500` |
| 3xl | 48px | `--space-600` |
| 4xl | 64px | `--space-800` |
| 5xl | 96px | `--space-1200` |
| 6xl | 128px | `--space-1600` |

### Border Radius
| Element | Value | Token |
|---------|-------|-------|
| Sharp (images, tiles) | 0px | `--radius-0` |
| Micro | 2px | `--radius-25` |
| Small controls | 5px | `--radius-50` |
| Cards, inputs | 8px | `--radius-100` |
| Large panels | 32px | `--radius-400` |
| Extra-large panels | 40px | `--radius-500` |
| Pill buttons | 1000px | `--radius-1000` |
| Avatars / dots | 50% | `--radius-full` |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Inset Ring | `inset 0 0 0 1px rgba(20,15,15,0.5)` | `--shadow-ring` |

The system's one shadow — an inset hairline ring (in the warm-black at 50%) used to outline focused/selected controls. Resting surfaces are otherwise flat.

### Layout
- **Grid:** 12-column, max content width ~85rem (`1360px`).
- **Gutters:** 8px small / 20px large.
- **Section rhythm:** full-bleed photographic bands alternating with `#FAFAFA`/`#FFFFFF` product grids; generous 64–128px vertical breaks.
- **Card padding:** 16px; product tiles pad 0/12/32px around the image.

## Components
### Primary Button ("Shop Women's / Shop Men's")
**Role:** The main CTA under a hero or band.
Solid `#140F0F` warm-black fill, `#FFFFFF` label in `Saans` 500 at ~14px, **fully-pilled `1000px` radius**, ~12px/20px padding. Hover deepens the fill to `#433F3F`. The lululemon button is always a pill — never square.

### Priority Button (sale / urgent)
**Role:** High-urgency action.
The technical red `#C8102E` as fill or text, hovering to `#A00D25`. Same pill geometry. Reserved for priority moments — never a default action color.

### Tonal / Accent Button (lemonade)
**Role:** A playful, high-visibility secondary CTA.
`#F4FF8E` lemonade fill with `#140F0F` text, pill radius — the one jolt of the secondary palette allowed as a control. Used sparingly for delight.

### Hero / Tertiary Button
**Role:** Low-emphasis action over photography.
Warm `#F4F3F2` fill with `#140F0F` label, pill radius, hovering to `#EFEEEC`. Sits quietly on image bands (the "Shop Women's Bottoms" chips over the hero).

### Product Tile
**Role:** The atomic commerce unit in a rail or grid.
Sharp 0px product photo on `#FFFFFF`, a `#140F0F` name at 16px/400 below, price in the same ink (or `#C8102E` if reduced), and often a small circular color-swatch row. No border or shadow — the photo on off-white is the card.

### Color Swatch ("Shop by colour")
**Role:** Merchandising by hue — a lululemon signature.
A row of circular (`50%`) product thumbnails, each a saturated colorway (drawing on the secondary palette — daydream, rosewood, zest), labeled beneath in `#140F0F` 14px. The homepage's most colorful moment.

### Editorial Image Band
**Role:** Full-bleed lifestyle storytelling.
Edge-to-edge athletic photography (the rust-toned "Summer sets, in." hero, "SeaWheeze Collection"), a large `Saans` 400 heading in `#FFFFFF` overlaid, and one or two pill buttons. Warm, active, real-environment imagery.

### Nav Bar
**Role:** Global navigation.
A slim `#FFFFFF`/`#FAFAFA` bar — the "yogo" (Ω) logomark left in `#140F0F`, a row of `Saans` links (New Arrivals · Women · Men · Accessories · Shoes · We Made Too Much in red), and account/bag icons right. Clean, uncrowded.

### Message / Status Banner
**Role:** Order and stock messaging.
Tonal surface + matching text from the semantic set — success `#E7F1EA`/`#0F752F`, error `#FAE5E7`/`#D20014`, info `#EAF0F7`/`#2966B0`, warning `#F8EFE8`/`#B15115`. Small, quiet, informational.

### Text Input
**Role:** Search and form entry.
`#FFFFFF` fill, 8px radius, `#757575`/`#D6D6D6` hairline, 16px `#140F0F` text. Focus draws the `#005FCC` ring (or the inset `rgba(20,15,15,0.5)` ring).

## Do's and Don'ts
### Do
- Build on the warm off-white ramp (`#FAFAFA` → `#F9F9F8` → `#F4F3F2` → `#EFEEEC`) and write in warm near-black `#140F0F`, not pure black-on-white.
- Make every button a pill (`1000px` radius); the primary is `#140F0F` fill with white text, hover `#433F3F`.
- Reserve the red `#C8102E` for priority actions, sale, and "We Made Too Much" — it is technical energy, not a default.
- Set `Saans` LIGHT — even 50–100px display headings sit at 400 weight for that open, editorial calm.
- Bring the secondary palette (lemonade, zest, daydream, rosewood, wilderness) in through product color stories and seasonal bands, not chrome.
- Keep product photography full-bleed and sharp (0px); let the images carry the warmth and energy.
- Use the semantic status pairs (surface + text) for messaging; keep focus `#005FCC` for accessibility only.

### Don't
- Don't use pure `#000000` or a cold pure white — the brand's neutrals are warm (`#140F0F`, `#FAFAFA`). Cold neutrals read foreign.
- Don't square the buttons; the full pill is core to the identity.
- Don't overuse the red or paint large fills with it — it's a priority signal, not a section color.
- Don't set display type bold; Saans stays at 400 even huge. Heavy weights break the calm.
- Don't scatter the secondary palette as UI accents — it lives in merchandising and seasonal art, one tonal button aside.
- Don't add drop shadows to resting surfaces; the only shadow is the inset focus ring.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Off-White | `#FAFAFA` | The default page background. |
| 1 | Surface | `#FFFFFF` | Cards, product tiles, lifted panels. |
| 1.5 | Subdued | `#F9F9F8` | Quiet control fills and subtle bands. |
| 2 | Tertiary | `#F4F3F2` | Hero/tertiary fills, disabled surfaces. |
| 2.5 | Tertiary Hover | `#EFEEEC` | Hover of the warm tertiary. |
| — | Inverse | `#140F0F` | Dark footer and inverse sections. |

## Elevation
Elevation is almost entirely tonal. Surfaces step through the warm off-white ramp (`#FAFAFA` → `#FFFFFF` → `#F4F3F2`) and separate with hairline borders in the `#D6D6D6`–`#757575` band rather than shadow. The single shadow token is an **inset** ring — `inset 0 0 0 1px rgba(20,15,15,0.5)` — used to outline a focused or selected control, so even "depth" reads as a crisp edge, not a float. The dark inverse surface (`#140F0F`) provides contrast for the footer and occasional bands. Genuine overlays (drawers, modals) rely on a warm scrim (`rgba(20,15,15,0.5)`) over the page rather than shadowed cards. The result feels flat, clean, and premium — engineered layers of the same warm material.

## Imagery
Photography is athletic and aspirational but grounded — real people mid-movement (running, yoga, tennis, training) in natural light, often against warm-toned environments (the rust hero, sunlit courts, city rooftops). Product photography is crisp on off-white for the grids and rails. The "Shop by colour" row is the signature merchandising device: circular swatches in the full secondary palette. Seasonal collections (SeaWheeze, Summer Series) get abstract multicolor art blending the secondary hues. Iconography is a consistent thin-line set in `#140F0F` (the "yogo" omega, bag, search, account). No stock clichés — everything reads like a considered performance-apparel campaign.

## Layout
The homepage is a long alternating rhythm: a full-bleed hero ("Summer sets, in." on warm rust), then a "What's new" 4-up photo grid, the colorful "Shop by colour" swatch row, a photographic "Up next: your best set" band, product rails ("What's new? So glad you asked."), a seasonal collection band (SeaWheeze), activity and category grids, an editorial "Catch the highlights" trio, and a dense dark footer. Content sits in a 12-column grid at ~85rem max width with generous 64–128px section breaks. Headings are large `Saans` 400 set flush-left; bands pair a heading with a pill CTA. The cadence is roomy and photographic — image band, product grid, image band — with the warm neutrals and one recurring red keeping it coherent.

## Typography Signature
lululemon's typographic tell is restraint at scale. `Saans` is a broad variable family (300–900), yet the brand deliberately sets even its biggest display headings at **400** — so "Summer sets, in." at 50px+ feels open, editorial, and calm rather than shouted. Hierarchy comes from size and generous spacing, not weight; labels and buttons step up only to 500, and captions to 600. The face itself is a clean, slightly warm grotesque with even proportions that hold up huge and tiny alike. The lone serif, `KH Giga`, appears only for pull-quotes — a human, editorial grace note against the technical sans. Paired with the warm near-black ink and off-white ground, the type reads as premium performance-wear: precise, unfussy, and quietly confident.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FAFAFA` off-white (surface `#FFFFFF`, tertiary `#F4F3F2`) / text: `#140F0F` warm near-black (subdued `#757575`) / accent: `#C8102E` red (hover `#A00D25`) / primary action: `#140F0F` pill, white text (hover `#433F3F`) / tonal pop: `#F4FF8E` lemonade / border: `#D6D6D6` / focus: `#005FCC` / secondary palette: zest `#F3FED7`, daydream `#C0DDFF`, rosewood `#DC6D85`, sequoia `#73273D`, mossy `#524A43`, wilderness `#142A0E`, espresso `#2B1F1E`

## Example Component Prompts
1. **Primary pill button**: A fully-pilled (`1000px` radius) `#140F0F` button, `#FFFFFF` label in `Saans` 500 at 14px, 12px/20px padding. Hover fill `#433F3F`. No shadow.
2. **Hero band**: A full-bleed warm athletic photo, a large `Saans` 400 heading at 50px in `#FFFFFF`, and two pill buttons — a `#F4F3F2` tertiary and a `#140F0F` primary.
3. **Shop-by-colour row**: A horizontal row of circular (`50%`) product thumbnails in saturated colorways (daydream `#C0DDFF`, rosewood `#DC6D85`, zest `#F3FED7`), each labeled below in `#140F0F` 14px.
4. **Product tile**: A sharp 0px product photo on `#FFFFFF`, a `#140F0F` 16px/400 name, price (red `#C8102E` if reduced), and a small circular swatch row. No border or shadow.
5. **Lemonade tonal CTA**: A `#F4FF8E` pill button with `#140F0F` `Saans` 500 label — the one playful pop of the secondary palette, used sparingly.

## Similar Brands
- **Nike** — athletic photography-first commerce, bold type, and a single high-energy accent on a neutral ground.
- **Alo Yoga** — premium athleisure with warm minimal neutrals and full-bleed lifestyle imagery.
- **Vuori** — soft warm palette, roomy layout, and calm editorial performance-wear branding.
- **On Running** — technical, restrained, near-monochrome commerce with precise type and one accent.
- **Aritzia** — the same photography-led, warm-neutral, quietly-typed premium retail language.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Surfaces (warm off-white ramp) */
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-subdued: #F9F9F8;
  --color-tertiary: #F4F3F2;
  --color-tertiary-hover: #EFEEEC;
  --color-inverse: #140F0F;

  /* Colors — Text */
  --color-text: #140F0F;
  --color-text-hover: #433F3F;
  --color-text-subdued: #757575;
  --color-text-disabled: #919191;
  --color-text-highlighted: #C8C8C8;
  --color-text-inverse: #FFFFFF;

  /* Colors — Accent & Status */
  --color-accent: #C8102E;
  --color-accent-hover: #A00D25;
  --color-focus: #005FCC;
  --color-success: #0F752F;
  --color-error: #D20014;
  --color-info: #2966B0;
  --color-warning: #B15115;

  /* Colors — Borders */
  --color-border-subdued: #D6D6D6;
  --color-border-default: #757575;
  --color-border-strong: #140F0F;

  /* Colors — Secondary palette */
  --color-lemonade: #F4FF8E;
  --color-zest: #F3FED7;
  --color-daydream: #C0DDFF;
  --color-rosewood: #DC6D85;
  --color-sequoia: #73273D;
  --color-mossy: #524A43;
  --color-espresso: #2B1F1E;
  --color-wilderness: #142A0E;

  /* Typography — Families */
  --font-sans: 'Saans', 'Helvetica Neue', Helvetica, Roboto, -apple-system, system-ui, sans-serif;
  --font-quote: 'KH Giga', Georgia, Cambria, 'Times New Roman', serif;

  /* Typography — Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 50px;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.4;

  /* Spacing */
  --space-50: 4px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-800: 64px;
  --space-1200: 96px;
  --space-1600: 128px;

  /* Border Radius */
  --radius-0: 0px;
  --radius-25: 2px;
  --radius-50: 5px;
  --radius-100: 8px;
  --radius-400: 32px;
  --radius-500: 40px;
  --radius-1000: 1000px;
  --radius-full: 50%;

  /* Shadow */
  --shadow-ring: inset 0 0 0 1px rgba(20,15,15,0.5);
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Surfaces */
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-subdued: #F9F9F8;
  --color-tertiary: #F4F3F2;
  --color-tertiary-hover: #EFEEEC;
  --color-inverse: #140F0F;

  /* Colors — Text */
  --color-text: #140F0F;
  --color-text-hover: #433F3F;
  --color-text-subdued: #757575;
  --color-text-disabled: #919191;
  --color-text-highlighted: #C8C8C8;
  --color-text-inverse: #FFFFFF;

  /* Colors — Accent & Status */
  --color-accent: #C8102E;
  --color-accent-hover: #A00D25;
  --color-focus: #005FCC;
  --color-success: #0F752F;
  --color-error: #D20014;
  --color-info: #2966B0;
  --color-warning: #B15115;

  /* Colors — Borders */
  --color-border-subdued: #D6D6D6;
  --color-border-default: #757575;
  --color-border-strong: #140F0F;

  /* Colors — Secondary palette */
  --color-lemonade: #F4FF8E;
  --color-zest: #F3FED7;
  --color-daydream: #C0DDFF;
  --color-rosewood: #DC6D85;
  --color-sequoia: #73273D;
  --color-mossy: #524A43;
  --color-espresso: #2B1F1E;
  --color-wilderness: #142A0E;

  /* Typography — Families */
  --font-sans: 'Saans', 'Helvetica Neue', Helvetica, Roboto, -apple-system, system-ui, sans-serif;
  --font-quote: 'KH Giga', Georgia, Cambria, 'Times New Roman', serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 50px;

  /* Spacing */
  --spacing-50: 4px;
  --spacing-100: 8px;
  --spacing-150: 12px;
  --spacing-200: 16px;
  --spacing-300: 24px;
  --spacing-400: 32px;
  --spacing-500: 40px;
  --spacing-600: 48px;
  --spacing-800: 64px;
  --spacing-1200: 96px;
  --spacing-1600: 128px;

  /* Border Radius */
  --radius-0: 0px;
  --radius-25: 2px;
  --radius-50: 5px;
  --radius-100: 8px;
  --radius-400: 32px;
  --radius-500: 40px;
  --radius-1000: 1000px;
  --radius-full: 50%;

  /* Shadow */
  --shadow-ring: inset 0 0 0 1px rgba(20,15,15,0.5);
}
```