---
version: alpha
name: Letter
description: "A near-black vault lit by wine, opening onto bone-light editorial calm."
colors:
  on-surface: "#191B1F"
  surface: "#F6F9F9"
  primary: "#EC3D08"
  black: "#000000"
  white: "#FFFFFF"
  mercury: "#E6EBEC"
  steel: "#9FABAD"
  slate: "#5F6368"
  pine: "#186F64"
  seafoam: "#58DAC2"
  lake: "#536EFF"
  cobalt: "#154EA5"
  grape: "#644BC4"
  cardinal: "#FC5963"
  saffron: "#F8AC53"
  sunshine: "#F9EA65"
  cream: "#FAEEE4"
  lilac: "#E6DEF0"
typography:
  display:
    fontFamily: Albra Sans
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  heading:
    fontFamily: Albra Sans
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  lead:
    fontFamily: Albra Sans
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  subheading:
    fontFamily: Albra Sans
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-ui:
    fontFamily: Albra Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  caption:
    fontFamily: Albra Sans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
rounded:
  buttons: 2px
  cards-surfaces: 2px
  base-radius-token: 2px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 44px
---
# Letter — Style Reference
> A near-black vault lit by wine, opening onto bone-light editorial calm.

**Theme:** mixed

Letter is a private bank staged as cinema. The hero is near-black `#191B1F` washed by a wine-and-teal light-leak over a crystalline object, with a single white high-contrast display line — "Beyond banking" — floating dead-center; then the page cuts hard to a bone-light editorial register (`#F6F9F9`) where dark grotesk copy speaks plainly. The identity color is a muted **Pine** green `#186F64`, but the true signature is the palette *breadth*: a designer's hand-named paint set — pine, seafoam, cardinal, bubblegum, saffron, sunshine, grape, lavender, lilac — held in reserve behind a disciplined neutral spine. Corners are nearly sharp (2px), so nothing feels bubbly; restraint is enforced by geometry. Typography pairs an editorial display face (Albra Sans, 80/46px) against a wide grotesk (Neufile Grotesk Extended) for nav, body, and UI. The result reads like a wealth magazine that happens to be a bank.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight | `#191B1F` | `--midnight` | Primary dark canvas (hero ground) and primary ink on light; the system's anchor. |
| Black | `#000000` | `--black` | Pure black — text and hard edges only; never a section fill. |
| White | `#FFFFFF` | `--white` | Hero display text and the primary "Join" button fill; the loudest light. |
| Fog | `#F6F9F9` | `--gray-100` | Light editorial canvas and dark-button label; the calm second act. |
| Mercury | `#E6EBEC` | `--gray-200` | Hairline surfaces and quiet fills on light. |
| Steel | `#9FABAD` | `--gray-500` | Muted nav links and captions; the resting UI gray. |
| Slate | `#5F6368` | `--grey-dark` | Secondary body text on light. |
| Pine | `#186F64` | `--pine` | THE brand accent — green headings and the green CTA; identity, used sparingly. |
| Seafoam | `#58DAC2` | `--seafoam` | Bright mint highlight; data/illustration accent, not for text. |
| Lake | `#536EFF` | `--lake` | Electric blue accent for links and interactive emphasis. |
| Cobalt | `#154EA5` | `--cobalt` | Deep blue — serious, for links and headings when Pine rests. |
| Grape | `#644BC4` | `--grape` | Purple accent; pairs with lilac for the pastel gradient cards. |
| Cardinal | `#FC5963` | `--cardinal` | Coral-red — alerts and warm editorial accent. |
| Crimson | `#EC3D08` | `--crimson` | Hot orange-red; the palette's highest heat, used almost never. |
| Saffron | `#F8AC53` | `--saffron` | Warm amber accent for illustration and highlight. |
| Sunshine | `#F9EA65` | `--sunshine` | Full yellow; a punctuation color, not a surface. |
| Cream | `#FAEEE4` | `--cream` | Warm paper; the green CTA's label color (`#FCEDE1`) lives in this family. |
| Lilac | `#E6DEF0` | `--lilac` | Pale purple pastel; soft gradient card ground. |
| Midnight Gradient | `linear-gradient(180deg, #383A41 0%, #191B1F 100%)` | `--gradient-midnight` | The dark hero fade — top light-leak to true midnight. |
| Mist Gradient | `linear-gradient(180deg, #EEF6FF 0%, #DAEAFD 100%)` | `--gradient-mist` | Cool pastel wash for the soft product cards below the fold. |

*The full named set — the tea / grass / mint / lightLime greens, the bubbleGum / rose / crimson reds, the baby / powder / mist blues, the mellow / gold / peanut / dust / sand warms, and the eggplant / lavender / periwinkle purples — is a designer's paint box held in reserve; all tokens are reproduced intact in Quick Start.*

## Tokens — Typography
### Albra Sans — the editorial display face · `--font-display`
- **Substitute:** Ogg, Canela, GT Sectra
- **Weights:** 300, 400, 500, 600 (display), 700, 800
- **Sizes:** 80px hero display, 46px section heading
- **Line height:** tight (~1.0–1.1) at display sizes
- **Letter spacing:** near-neutral; the high-contrast letterforms carry the character, not the tracking
- **Role:** Reserved for the one big statement per view — the 80px hero line and 46px section titles. High-contrast, magazine-editorial; weight 600 is the display weight.

### Neufile Grotesk Extended — the wide grotesk for everything else · `--font-body`
- **Substitute:** Neue Haas Grotesk Display, Söhne Breit, Founders Grotesk X-Condensed's inverse (a wide grotesk)
- **Weights:** 300, 400 (body), 500 (UI/buttons), 600, 700, 800
- **Sizes:** 28px lead paragraph, 22px, 16px body/UI, 13px caption
- **Line height:** relaxed for body (~1.4–1.5); tighter for the 28px lead
- **Letter spacing:** neutral; the extended width already gives it presence
- **Role:** Nav, sub-headlines, body copy, buttons, captions — the wide extended cut gives quiet UI text an expensive, spaced-out confidence.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 80px | ~1.05 | neutral | `--text-display` |
| Heading | 46px | ~1.1 | neutral | `--text-heading` |
| Lead | 28px | ~1.3 | neutral | `--text-lead` |
| Subheading | 22px | ~1.4 | neutral | `--text-subheading` |
| Body / UI | 16px | ~1.5 | neutral | `--text-body` |
| Caption | 13px | ~1.4 | neutral | `--text-caption` |

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

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 32px | `--spacing-xl` |
| 2xl | 44px | `--spacing-2xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons | 2px |
| Cards / surfaces | 2px (effectively sharp) |
| Base radius token | 2px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Light | `0px 60px 70px rgba(25,27,31,0.031), 0px 40.11px 45.27px rgba(25,27,31,0.03), 0px 23.57px 29.37px rgba(25,27,31,0.04), 0px 8.05px 19.15px rgba(25,27,31,0.05), 0px 1px 1px rgba(25,27,31,0.05)` | `--shadow-light` |
| Dark | `0px 120px 83px rgba(25,27,31,0.031), 0px 40.11px 45.27px rgba(25,27,31,0.03), 0px 23.57px 29.37px rgba(25,27,31,0.12), 0px 8.05px 19.15px rgba(25,27,31,0.15), 0px 1px 2px rgba(25,27,31,0.15)` | `--shadow-dark` |
| Avatar | `0px 17px 25px rgba(25,27,31,0.05), 0px 1px 19px rgba(25,27,31,0.05), 0px 6px 11px rgba(25,27,31,0.06), 0px 4px 10px rgba(25,27,31,0.1), 0px 1px 4px rgba(25,27,31,0.06)` | `--shadow-avatar` |

### Layout
- **Page max-width:** contained, generous side margins (nav and hero copy centered in a wide field)
- **Section gap:** large — full-viewport hero, then a hard tonal cut to the next act
- **Card padding:** ~32px
- **Element gap:** 16–24px

## Components
### Primary Button — "Join"
**Role:** The single loud invitation in the dark nav.
White fill `#FFFFFF`, ink `#191B1F`, 2px radius, padding `12px 27.2px`, 16px / weight 500 Neufile Grotesk Extended. On a near-black bar it reads as the one thing to click — no border, no glow, pure luminance contrast.

### Secondary / Ghost Button — "Sign In"
**Role:** The quieter companion action beside Join.
No fill, text `#FFFFFF` on dark (`#191B1F` on light), 2px radius, tight padding `12px 8px`, 16px / weight 500. Presence comes only from the label; it never competes with the primary.

### Dark Button
**Role:** Primary action on a light editorial section.
Fill `#191B1F`, label `#F6F9F9`, 2px radius, padding `12px 27.2px`, 16px / weight 500 — the inverse of Join, keeping the same sharp geometry.

### Pine CTA
**Role:** The brand-colored action when Letter wants warmth over contrast.
Fill Pine `#186F64`, label warm cream `#FCEDE1`, 2px radius, padding `12px 27.2px`, 16px / weight 500. The only place the green identity becomes a surface rather than an accent.

### Nav Link
**Role:** The horizontal wordmark row (Deposit, Invest, Borrow, Lend, Office, Marketplace, Guides, About).
Neufile Grotesk Extended, 16px / weight 400, resting in muted Steel `#9FABAD` on dark and brightening toward white on hover; wide letterforms give the row an unhurried, spaced confidence.

### Hero Display
**Role:** The one big statement per view.
Albra Sans, 80px / weight 600, white `#FFFFFF`, centered, `padding-bottom: 32px`. High-contrast letterforms carry the editorial voice; only one display line appears per screen.

### Section Heading
**Role:** Titles for editorial sections.
Albra Sans, 46px / weight 600 — dark `#191B1F` or `#000000` on light, Pine `#186F64` when the section wants the brand color. `padding-bottom` up to 44px for airy separation.

### Lead Paragraph
**Role:** The plainspoken claim under a heading ("Traditional private banks are slow, expensive…").
Neufile Grotesk Extended, 28px / weight 400, dark ink on Fog `#F6F9F9`; large, relaxed, conversational — the counterweight to the cinematic hero.

### Light Card
**Role:** Contained content block on the bone canvas.
Fill Fog `#F6F9F9`, ink `#191B1F`, ~32px padding, sharp 2px corners; elevation comes from the soft `--shadow-light` stack, not from borders.

### Pastel Gradient Card
**Role:** The soft product/marketing surface below the fold.
A cool `--gradient-mist` (or its rose/mint/cream siblings) wash — pale, luminous, almost weightless — floated with `--shadow-light`; the one place the reserved pastels come forward.

### Logo Mark
**Role:** The angular monogram at nav-left.
A white geometric glyph — offset stacked chevrons reading as an "L" / lightning form — on the near-black bar; small, sharp, unadorned.

## Do's and Don'ts
### Do
- Anchor dark scenes on Midnight `#191B1F`, not pure black; reserve `#000000` for text and edges.
- Keep Pine `#186F64` scarce — a heading, a single CTA — so the identity green stays valuable.
- Let one display line per view carry the voice; everything else is 16px Neufile Grotesk Extended.
- Use the 2px radius everywhere; the near-sharp corner is the discipline that makes the pastels feel adult.
- Convey depth with the layered `--shadow-light` / `--shadow-dark` stacks, never with heavy borders.
- Cut between registers hard — cinematic near-black to bone `#F6F9F9` — rather than blending them.

### Don't
- Don't round corners past 2px; softness undoes the editorial restraint.
- Don't spread the reserved paint box (cardinal, saffron, sunshine, grape) across a layout — one accent per moment.
- Don't set body copy in Albra Sans; the display face is for statements only.
- Don't give the ghost "Sign In" any fill or border — it lives on the label alone.
- Don't add glows or neon to the dark hero; the wine light-leak comes from imagery, not UI color.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Midnight Canvas | `#191B1F` | The dark hero and footer ground. |
| 0 | Fog Canvas | `#F6F9F9` | The light editorial ground for the second act. |
| 1 | Mercury | `#E6EBEC` | Quiet raised fills / hairline zones on light. |
| 1 | Pastel Card | `--gradient-mist` | Soft floated product surface. |
| 2 | White | `#FFFFFF` | Topmost light surface — buttons, elevated cards. |

## Elevation
Depth is luminance plus shadow, never a border. On dark, the hero is a single vertical fade (`#383A41 → #191B1F`) with the sense of depth coming from a photographic light-leak, not from stacked layers. On light, cards lift off Fog with the multi-stop `--shadow-light` stack — five diffuse layers tuned in `rgba(25,27,31,…)` so the shadow is the same midnight ink, just dissolved. The `--shadow-dark` variant (a 120px-blur base) is for the same cards when they need to read as genuinely floating. Corners stay at 2px throughout, so elevation reads as light, not as roundness.

## Imagery
Cinematic 3D and light. The hero centers a crystalline / faceted object caught in a wine-to-teal light-leak against near-black — high-drama, low-key, more film still than product shot. It photographs abstraction (refraction, flare, gradient bloom) rather than people or screenshots. Below the fold, imagery softens to weightless pastel gradient fields (mist, rose, mint, cream). The through-line: light as the subject — hot and cinematic up top, cool and calm below. No stock photography, no icon soup.

## Layout
Full-bleed hero, contained editorial below. The nav is a single horizontal row: angular logo left, eight quiet word-links center, and a Join pill + Sign In ghost hard-right — all on the dark bar. The hero centers a stack (display line, one lead sentence, then the abstract image beneath) in a wide field with deep vertical breathing room. The page advances by hard tonal cuts: a full-viewport near-black act, then a bone-light act, each self-contained. Rhythm is generous — large section gaps, big type, few elements per screen.

## Typography Signature
Letter runs two voices that never overlap. **Albra Sans** is the *event* face — high-contrast, editorial, deployed once per view at 80px or 46px to make a single declarative statement ("Beyond banking"). **Neufile Grotesk Extended** is the *steady* face — a wide grotesk whose extended proportions give even 16px nav links and 13px captions an unhurried, spaced-out confidence, so the quiet text still feels premium. The move that makes it work: the display line is tight (line-height ~1.05) and the body is relaxed (~1.5), so the two registers read as different tempos on the same page — a magazine cover headline over calm column text.

## Agent Prompt Guide
## Quick Color Reference
- background: `#191B1F` (dark) / `#F6F9F9` (light)
- text: `#FFFFFF` on dark, `#191B1F` on light
- surface: `#FFFFFF` / `#E6EBEC`
- border: none (use `--shadow-light`); hairlines from `#E6EBEC`
- accent: `#186F64` (Pine)
- primary action: `#FFFFFF` fill on dark (Join) / `#191B1F` fill on light — or Pine `#186F64` for the brand CTA

## Example Component Prompts
1. **Cinematic hero**: Full-viewport near-black section `#191B1F` with a vertical fade to `#383A41` at top and a wine-and-teal light-leak over an abstract crystalline 3D object. Center a single white `#FFFFFF` Albra Sans display line at 80px / weight 600, one 16px Neufile Grotesk Extended lead sentence in `#E6EBEC` beneath it, and nothing else.
2. **Dark nav bar**: Near-black `#191B1F` bar — angular white logo mark left; eight Neufile Grotesk Extended links at 16px / weight 400 in Steel `#9FABAD` center; right side a white pill "Join" (fill `#FFFFFF`, ink `#191B1F`, 2px radius, padding 12px 27.2px) beside a fill-less "Sign In" ghost in white.
3. **Editorial claim block**: Bone-light `#F6F9F9` section, a 46px Albra Sans heading in `#191B1F` (or Pine `#186F64`), and a 28px Neufile Grotesk Extended lead paragraph in Slate `#5F6368`, generous 44px gap below the heading.
4. **Pastel product card**: Floated card with a cool `linear-gradient(180deg, #EEF6FF 0%, #DAEAFD 100%)` fill, 2px radius, ~32px padding, lifted with the layered `--shadow-light` stack; 22px Neufile Grotesk Extended title in `#191B1F`.
5. **Pine CTA**: Solid button, fill Pine `#186F64`, warm cream label `#FCEDE1`, 2px radius, padding 12px 27.2px, 16px / weight 500 — the only surface where the brand green appears.

## Similar Brands
- **Mercury** — the same disciplined-neutral-plus-one-signature-color banking editorial, cut nearly sharp.
- **Stripe (Sessions / brand press)** — cinematic gradient light-leaks over dark, high-contrast display type as the hero event.
- **Ramp** — restrained fintech that lets a wide grotesk and big plain claims do the work, minimal chrome.
- **Aesop** — an expensive, literary calm built from paper tones and a reserved hand-named palette.
- **Monzo (private / Plus tier)** — a broad, playfully named color set held behind a serious neutral spine.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Neutrals */
  --black: #000000;
  --white: #FFFFFF;
  --grey: #C6C8C8;
  --grey-light: #F2F5FB;
  --grey-dark: #5F6368;
  --midnight: #191B1F;
  --gray-100: #F6F9F9;
  --gray-200: #E6EBEC;
  --gray-300: #D5DBDC;
  --gray-400: #BFC7C9;
  --gray-500: #9FABAD;
  --gray: #E9EAEC;
  --primary-dark: #1E232D;
  /* Colors — Greens */
  --pine: #186F64;
  --tea: #74B4AB;
  --grass: #0BB58B;
  --seafoam: #58DAC2;
  --mint: #E1F1F0;
  --lightLime: #EEFCEF;
  /* Colors — Reds / Warms */
  --crimson: #EC3D08;
  --cardinal: #FC5963;
  --bubbleGum: #FD95A2;
  --rose: #FFCCCB;
  --cream: #FAEEE4;
  --cinnamon: #C47D59;
  --gold: #D6A872;
  --peanut: #E5C59D;
  --dust: #F0E9DD;
  --sand: #F8F5EF;
  /* Colors — Blues */
  --cobalt: #154EA5;
  --lake: #536EFF;
  --baby: #73A3EB;
  --mist: #DAEAFD;
  --powder: #E5F2FA;
  --focus: #7395E6;
  --primary-blue: #3748A0;
  /* Colors — Yellows */
  --saffron: #F8AC53;
  --mellow: #EDD376;
  --sunshine: #F9EA65;
  --note: #FDF5DA;
  /* Colors — Purples */
  --eggplant: #303974;
  --grape: #644BC4;
  --lavender: #B196FF;
  --periwinkle: #E2B7E0;
  --lilac: #E6DEF0;
  /* Gradients */
  --gradient-midnight: linear-gradient(180deg, #383A41 0%, #191B1F 100%);
  --gradient-mint: linear-gradient(180deg, #F5FAFA 0%, #E1F1F0 100%);
  --gradient-rose: linear-gradient(180deg, #FFE5E4 0%, #FFCCCB 100%);
  --gradient-cream: linear-gradient(180deg, #FFF8F2 0%, #FAEEE4 100%);
  --gradient-mist: linear-gradient(180deg, #EEF6FF 0%, #DAEAFD 100%);
  /* Typography — Families */
  --font-display: 'Albra Sans', 'Ogg', 'Canela', ui-serif, serif;
  --font-body: 'Neufile Grotesk Extended', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  /* Typography — Scale */
  --text-display: 80px;
  --text-heading: 46px;
  --text-lead: 28px;
  --text-subheading: 22px;
  --text-body: 16px;
  --text-caption: 13px;
  --leading-display: 1.05;
  --leading-body: 1.5;
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 44px;
  /* Border Radius */
  --radius-base: 2px;
  /* Shadows */
  --shadow-light: 0px 60px 70px rgba(25, 27, 31, 0.030926), 0px 40.11px 45.2711px rgba(25, 27, 31, 0.03), 0px 23.57px 29.3708px rgba(25, 27, 31, 0.04), 0px 8.05px 19.15px rgba(25, 27, 31, 0.05), 0px 1px 1px rgba(25, 27, 31, 0.05);
  --shadow-dark: 0px 120px 83px rgba(25, 27, 31, 0.0309), 0px 40.11px 45.2711px rgba(25, 27, 31, 0.03), 0px 23.57px 29.3708px rgba(25, 27, 31, 0.12), 0px 8.05px 19.15px rgba(25, 27, 31, 0.15), 0px 1px 2px rgba(25, 27, 31, 0.15);
  --shadow-avatar: 0px 17px 25px rgba(25, 27, 31, 0.05), 0px 1px 19px rgba(25, 27, 31, 0.05), 0px 6px 11px rgba(25, 27, 31, 0.06), 0px 4px 10px rgba(25, 27, 31, 0.1), 0px 1px 4px rgba(25, 27, 31, 0.06);
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Neutrals */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-grey: #C6C8C8;
  --color-grey-light: #F2F5FB;
  --color-grey-dark: #5F6368;
  --color-midnight: #191B1F;
  --color-gray-100: #F6F9F9;
  --color-gray-200: #E6EBEC;
  --color-gray-300: #D5DBDC;
  --color-gray-400: #BFC7C9;
  --color-gray-500: #9FABAD;
  --color-gray: #E9EAEC;
  --color-primary-dark: #1E232D;
  /* Colors — Greens */
  --color-pine: #186F64;
  --color-tea: #74B4AB;
  --color-grass: #0BB58B;
  --color-seafoam: #58DAC2;
  --color-mint: #E1F1F0;
  --color-light-lime: #EEFCEF;
  /* Colors — Reds / Warms */
  --color-crimson: #EC3D08;
  --color-cardinal: #FC5963;
  --color-bubble-gum: #FD95A2;
  --color-rose: #FFCCCB;
  --color-cream: #FAEEE4;
  --color-cinnamon: #C47D59;
  --color-gold: #D6A872;
  --color-peanut: #E5C59D;
  --color-dust: #F0E9DD;
  --color-sand: #F8F5EF;
  /* Colors — Blues */
  --color-cobalt: #154EA5;
  --color-lake: #536EFF;
  --color-baby: #73A3EB;
  --color-mist: #DAEAFD;
  --color-powder: #E5F2FA;
  --color-focus: #7395E6;
  --color-primary-blue: #3748A0;
  /* Colors — Yellows */
  --color-saffron: #F8AC53;
  --color-mellow: #EDD376;
  --color-sunshine: #F9EA65;
  --color-note: #FDF5DA;
  /* Colors — Purples */
  --color-eggplant: #303974;
  --color-grape: #644BC4;
  --color-lavender: #B196FF;
  --color-periwinkle: #E2B7E0;
  --color-lilac: #E6DEF0;
  /* Typography — Families */
  --font-display: 'Albra Sans', 'Ogg', 'Canela', ui-serif, serif;
  --font-body: 'Neufile Grotesk Extended', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  /* Typography — Scale */
  --text-display: 80px;
  --text-heading: 46px;
  --text-lead: 28px;
  --text-subheading: 22px;
  --text-body: 16px;
  --text-caption: 13px;
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 44px;
  /* Border Radius */
  --radius-base: 2px;
}
```