---
version: alpha
name: Revolut
description: "A clear-sky fintech: super-heavy display over open blue, one electric indigo doing all the work."
colors:
  on-surface-variant: "#717173"
  on-surface: "#191c1f"
  surface: "#fff"
  outline: "#c9c9cd"
  error: "#e23b4a"
  neutral: "#75808a"
  primary: "#4f55f1"
  action-blue-tint: "#edeefd"
  up-success: "#00b88b"
  warning: "#ec7e00"
  grey-10: "#e2e2e7"
  grey-8: "#ebebf0"
  grey-5: "#f1f2f4"
  grey-2: "#f7f7f7"
  utility-spectrum: "#e950a4"
typography:
  marketing-display-1:
    fontFamily: Aeonik Pro
    fontSize: 3.5rem
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.005em
  marketing-display-2:
    fontFamily: Aeonik Pro
    fontSize: 2.5rem
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.005em
  marketing-display-3:
    fontFamily: Aeonik Pro
    fontSize: 2rem
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.005em
  display-1:
    fontFamily: Aeonik Pro
    fontSize: 3.5rem
    fontWeight: 500
    lineHeight: 1.18
    letterSpacing: -0.56em
  display-2:
    fontFamily: Aeonik Pro
    fontSize: 2.75rem
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.56em
  heading-1:
    fontFamily: Inter
    fontSize: 2rem
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.35em
  heading-2:
    fontFamily: Inter
    fontSize: 1.5rem
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.31em
  heading-3:
    fontFamily: Inter
    fontSize: 1.25rem
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.27em
  emphasis-1:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.375
    letterSpacing: -0.18em
  body-1:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.375
    letterSpacing: -0.18em
  body-2:
    fontFamily: Inter
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.1em
  body-3:
    fontFamily: Inter
    fontSize: 0.75rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  emphasis-4:
    fontFamily: Inter
    fontSize: 0.6875rem
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0.16em
rounded:
  r2-hairline: 0.125rem
  r4: 0.25rem
  r6: 0.375rem
  r8: 0.5rem
  r12: 0.75rem
  r16: 1rem
  r24: 1.5rem
  r32: 2rem
  status-popup: 2.75rem
  pill-round: 9999px
spacing:
  s2: 0.125rem
  s4: 0.25rem
  s6: 0.375rem
  s8: 0.5rem
  s12: 0.75rem
  s16: 1rem
  s20: 1.25rem
  s24: 1.5rem
  s32: 2rem
  s40: 2.5rem
  s48: 3rem
  s56: 3.5rem
  s64: 4rem
  s72: 4.5rem
---
# Revolut — Style Reference
> A clear-sky fintech: super-heavy display over open blue, one electric indigo doing all the work.

**Theme:** light

Revolut runs a disciplined light system built on a near-white canvas (`#fff`), near-black ink (`#191c1f`), and a single electric indigo accent (`#4f55f1`) that carries every interactive intent. What looks like a rainbow is actually a deep utility spectrum — nineteen named category hues (pink, teal, terracotta, lime, cyan…) that exist to color-code money movement, cards, and account tiles inside the app, not to decorate marketing. The typographic stance is a two-font split: **Aeonik Pro** at weight 900 for enormous marketing display (the "Banking & Beyond" wall), and **Inter** for everything product-grade below. The shape language is quietly distinctive — a full radius scale from `0.125rem` to `2rem`, pill (`9999px`) buttons, and the signature `25%` superellipse app-icon radius. Layout is generous and photographic: full-bleed hero imagery, floating glass widgets, and a rem-based spacing grid that steps in fixed increments.

## Tokens — Colors

The source carries a large machine-generated token set (`--rui-color-*` plus RGB `channel` twins). Featured here are the core identity and load-bearing roles; the full set is reproduced faithfully in Quick Start.

| Name | Value | Token | Role |
|------|-------|-------|------|
| Foreground / Black | `#191c1f` | `--rui-color-foreground` | Primary ink; also the dark "Download the app" pill. Near-black, never pure `#000`. |
| Canvas White | `#fff` | `--rui-color-background` | Page and widget canvas; the "Sign up" pill fill. |
| Accent Indigo | `#4f55f1` | `--rui-color-accent` | THE brand color and the only interactive accent — links, focus, progress, primary state. Everything actionable is this or nothing. |
| Action Blue Tint | `#edeefd` | `--rui-color-action-blue` | The 8%-indigo wash behind selected/action surfaces and photo-header chips. Accent's only quiet echo. |
| Up / Success | `#00b88b` | `--rui-color-up` | Gains, positive balances, success — teal-green, reserved for money going the right way. |
| Down / Danger | `#e23b4a` | `--rui-color-down` | Losses, destructive, error state. Warmer than the utility red. |
| Warning | `#ec7e00` | `--rui-color-warning` | Amber caution; shared with the `orange` category hue. |
| Neutral | `#75808a` | `--rui-color-neutral` | Muted labels, secondary metadata, disabled affordance. |
| Grey-50 | `#717173` | `--rui-color-grey-50` | Body-secondary text on white. |
| Grey-20 | `#c9c9cd` | `--rui-color-grey-20` | Hairline borders, dividers, inactive icons. |
| Grey-10 | `#e2e2e7` | `--rui-color-grey-10` | Input outlines, subtle separators. |
| Grey-8 | `#ebebf0` | `--rui-color-grey-8` | Search / segmented-control track fill. |
| Grey-5 | `#f1f2f4` | `--rui-color-grey-5` | Skeleton / low surface tint. |
| Grey-2 | `#f7f7f7` | `--rui-color-grouped-background` | Grouped list background, the palest recessed surface. |
| Utility Spectrum | `#e950a4` `#09be67` `#f54c3e` `#fbc70a` `#0cd0dd` `#008fe1` `#805cf5` `#c054d3` `#ee7a40` `#cbdd00` `#5fc223` `#00be90` `#6262d3` `#ed5b7b` `#9c7969` `#6a8cad` | `--rui-color-pink … deep-grey` | In-app category coding for cards, pockets, and analytics — bright, saturated, and used one-at-a-time to tag a thing, never as page decoration. |

## Tokens — Typography

### Aeonik Pro — marketing display only; the enormous, ultra-bold hero voice (weights 500 / 700 / 900) · `--rui-font-marketing`
- **Substitute:** Inter, Helvetica Neue, system-ui, sans-serif
- **Weights:** 500, 700, **900** (marketing display is 900; a "Capitalised" 900 cut also ships)
- **Sizes:** `3.5rem` display1 · `2.5rem` display2 · `2rem` display3 (marketing tier)
- **Line height:** `1` — display sets solid, letters nearly touching line-to-line
- **Letter spacing:** near-zero positive micro-tracking, e.g. `calc(0.005em / 56)` on display1
- **Role:** The "Banking & Beyond" wall — reserved for the largest marketing headlines. Weight 900 is the whole personality; do not use it for UI.

### Inter — the product and body workhorse; all UI text, controls, and running copy · `--rui-font-brand`
- **Substitute:** -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif
- **Weights:** 400 (body), 500 (emphasis / subheader), 600, 700 (headings, display)
- **Sizes:** `3.5rem`→`2.75rem` display · `2rem`/`1.5rem`/`1.25rem` heading1-3 · `1rem`/`0.875rem`/`0.75rem` body1-3 · `0.6875rem` emphasis4
- **Line height:** `1.19` headings → `1.375–1.5` body
- **Letter spacing:** subtly negative on larger text (`calc(-0.35em / 32)` heading1) → `0` at body3; positive only on the tiny `emphasis4` caps (`calc(0.16em / 11)`)
- **Role:** Everything that isn't a marketing hero. Headings at 700, body at 400, emphasis/labels at 500.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Marketing Display 1 | `3.5rem` | `1` | `calc(0.005em / 56)` | `--rui-font-size-marketing-display1` |
| Marketing Display 2 | `2.5rem` | `1` | `calc(0.005em / 40)` | `--rui-font-size-marketing-display2` |
| Marketing Display 3 | `2rem` | `1` | `calc(0.005em / 32)` | `--rui-font-size-marketing-display3` |
| Display 1 | `3.5rem` | `1.18` | `calc(-0.56em / 56)` | `--rui-font-size-display1` |
| Display 2 | `2.75rem` | — | `calc(-0.56em / 44)` | `--rui-font-size-display2` |
| Heading 1 | `2rem` | `1.19` | `calc(-0.35em / 32)` | `--rui-font-size-heading1` |
| Heading 2 | `1.5rem` | `1.25` | `calc(-0.31em / 24)` | `--rui-font-size-heading2` |
| Heading 3 | `1.25rem` | `1.4` | `calc(-0.27em / 20)` | `--rui-font-size-heading3` |
| Emphasis 1 | `1rem` | `1.375` | `calc(-0.18em / 16)` | `--rui-font-size-emphasis1` |
| Body 1 | `1rem` | `1.375` | `calc(-0.18em / 16)` | `--rui-font-size-body1` |
| Body 2 | `0.875rem` | `1.43` | `calc(-0.1em / 14)` | `--rui-font-size-body2` |
| Body 3 | `0.75rem` | `1.5` | `0` | `--rui-font-size-body3` |
| Emphasis 4 (caps) | `0.6875rem` | `1.27` | `calc(0.16em / 11)` | `--rui-font-size-emphasis4` |

## Tokens — Spacing & Shapes

**Base unit:** `0.125rem` (2px) — every step is a multiple   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| s2 | `0.125rem` | `--rui-space-s2` |
| s4 | `0.25rem` | `--rui-space-s4` |
| s6 | `0.375rem` | `--rui-space-s6` |
| s8 | `0.5rem` | `--rui-space-s8` |
| s12 | `0.75rem` | `--rui-space-s12` |
| s16 | `1rem` | `--rui-space-s16` |
| s20 | `1.25rem` | `--rui-space-s20` |
| s24 | `1.5rem` | `--rui-space-s24` |
| s32 | `2rem` | `--rui-space-s32` |
| s40 | `2.5rem` | `--rui-space-s40` |
| s48 | `3rem` | `--rui-space-s48` |
| s56 | `3.5rem` | `--rui-space-s56` |
| s64 | `4rem` | `--rui-space-s64` |
| s72 | `4.5rem` | `--rui-space-s72` |

### Border Radius
| Element | Value |
|---------|-------|
| r2 hairline | `0.125rem` |
| r4 | `0.25rem` |
| r6 | `0.375rem` |
| r8 | `0.5rem` |
| r12 | `0.75rem` |
| r16 (widget default) | `1rem` |
| r24 (popup default) | `1.5rem` |
| r32 | `2rem` |
| App icon | `25%` (superellipse-style squircle) |
| Status popup | `2.75rem` |
| Pill / round | `9999px` |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Level 1 | `0 0.125rem 0.1875rem rgb(25 28 31 / 0.05)` | `--rui-shadow-level1` |
| Level 2 | `0 0.1875rem 0.5rem rgb(25 28 31 / 0.1)` | `--rui-shadow-level2` |
| Level 3 | `0 0.1875rem 1.875rem rgb(25 28 31 / 0.08)` | `--rui-shadow-level3` |
| Level 4 | `0 1rem 4rem rgb(25 28 31 / 0.12)` | `--rui-shadow-level4` |

### Layout
- **Page max-width:** `94.375rem` (`--rui-size-layout`)
- **Section gap:** `4rem`–`4.5rem` (s64 / s72)
- **Card padding:** `1.5rem`–`2rem` (s24 / s32)
- **Element gap:** `0.75rem`–`1rem` (s12 / s16)

## Components

### Primary Button — "Sign up"
**Role:** The top conversion action in the nav.
White fill (`#fff`) with near-black label (`#191c1f`), fully pilled (`9999px`), no shadow. On a colored hero it reads as the brightest possible chip. Heights step `1.875rem` (xs) / `2.5rem` (sm) / `3.25rem` (md).

### Secondary Button — "Download the app"
**Role:** The dark counterpart CTA in body/hero.
Near-black fill (`#191c1f`) with white label (`#fff`), same `9999px` pill, no border, no shadow. The two pill buttons — one white, one black — are Revolut's entire button vocabulary on marketing.

### Accent / Interactive
**Role:** Every link, focus ring, and primary interactive state.
Indigo `#4f55f1`. Focus outline is `0.125rem solid rgb(79 85 241 / 0.5)` at `0.125rem` offset. This is the ONLY accent — resist adding a second.

### Widget Card
**Role:** The floating in-app surface (e.g. the glass "Personal £6,012 / Accounts" tile over the hero photo).
White (`#fff`) at `1rem` radius (`--rui-radius-widget`), lifted with Level 3/4 shadow, generous `1.5rem`+ padding. Balance figures set in heavy Inter.

### Grouped List / Section Surface
**Role:** Recessed container for stacked rows.
`#f7f7f7` background, `1rem`–`1.5rem` radius, contents on white cards inside it. The classic app "settings/accounts" pattern.

### Input Field
**Role:** Text entry.
Grey-10 outline (`#e2e2e7`) on white; error state swaps fill to `#feedec` and focus-error to `#fde5e3`. Body-2 Inter (`0.875rem`).

### Segmented Control
**Role:** Inline mode switch.
Track fill `#ebebf0`, active segment `#fff` — a soft white pill sliding over grey. Same track color drives search backgrounds.

### Category Tag / Pocket
**Role:** Color-coding a card, pocket, or analytics slice.
One utility hue from the spectrum (`#e950a4`, `#00be90`, `#805cf5`…) as a solid or tint, one per object. This is where the "rainbow" actually lives — inside the product, never as page chrome.

### Balance Delta
**Role:** Signed money movement.
Up = `#00b88b`, down = `#e23b4a`. Strictly reserved for financial direction, distinct from success/error UI even though the values coincide.

### Promo Bar
**Role:** Site-wide announcement strip (e.g. "New customers get 5% AER…").
Full-bleed indigo band at the very top, white text, underlined inline link. The one place the accent goes edge-to-edge.

### Location Notice / Region Switcher
**Role:** Dismissible sub-nav banner.
White bar, grey dismiss "×", a bordered country pill with flag + caret, and a solid black circular arrow button (`#191c1f`) to confirm.

### Nav Links
**Role:** Top-level sections (Personal, Business, Kids & Teens, Company).
Plain Inter labels, no underline, white on the colored hero / near-black on white pages; `Log in` sits as a text link beside the pill.

## Do's and Don'ts

### Do
- Let `#4f55f1` be the single interactive accent — links, focus, progress, primary state all share it.
- Reserve Aeonik Pro 900 for the biggest marketing headline and nothing else; drop to Inter the moment it's UI.
- Keep buttons fully pilled (`9999px`) in exactly two flavors: white-on-color and black-on-white.
- Use the utility spectrum one hue at a time to tag an object; keep pages calm greyscale + indigo.
- Set near-black as `#191c1f`, never pure `#000` — the whole system is warm-off-black.
- Convey depth with the four soft `rgb(25 28 31 / …)` shadow levels, not borders.

### Don't
- Don't introduce a second accent or a gradient CTA — the accent is monogamous.
- Don't scatter the category colors across marketing; they're in-app semantics, not decoration.
- Don't set body copy in Aeonik Pro or headings in the 900 weight below hero size.
- Don't square off the buttons — the pill is non-negotiable.
- Don't paint success/error with the up/down teal-red or vice versa; the money-direction pair is its own axis.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#fff` | Page and widget background. |
| 1 | Grouped | `#f7f7f7` | Recessed list/section container. |
| 2 | Track | `#ebebf0` | Search + segmented-control fill. |
| 3 | Skeleton | `#f1f2f4` | Loading / low tint. |
| — | Action wash | `#edeefd` | Selected / action-surface indigo tint. |
| — | Hairline | `#e2e2e7` / `#c9c9cd` | Borders and dividers. |

## Elevation
Depth is luminance-plus-shadow, never heavy borders. On white pages, cards float on four calibrated shadow levels — all `rgb(25 28 31 / …)`, opacities `0.05 → 0.12`, blur `0.1875rem → 4rem` — so a widget reads as glass hovering over hero photography. Recession is done by tint step instead (`#fff` → `#f7f7f7` → `#ebebf0`). A dedicated `--rui-shadow-side` layers two shadows for slide-over panels. Motion tokens back it up: durations `100ms → 900ms` on a shared `cubic-bezier(0.15, 0.5, 0.5, 1)` easing, with a springy toast curve for status popups.

## Imagery
Bold, saturated lifestyle photography, edge-to-edge. The hero is a single confident portrait against an open blue sky — full-bleed, cropped tight, warm skin tones playing against the cool background. Product UI is composited as floating glass widgets over the photo (the "£6,012 / Accounts" tile), selling the app inside the scene. No illustration clutter; the color comes from the photograph and the sky, letting the type sit clean and white on top.

## Layout
Full-bleed hero with a contained `94.375rem` max-width content column. The top edge stacks a thin indigo promo band, then a dismissible white region-switcher bar, then transparent nav over the hero image. Nav is left logo + four center-left section links, right-aligned `Log in` text link and `Sign up` pill. Marketing headlines break to the viewport edge at display scale while body copy and CTAs hold a narrow left column. Below the fold, expect grouped white cards on `#f7f7f7`, rem-stepped section gaps (`4–4.5rem`), and `1rem`/`1.5rem` widget radii throughout.

## Typography Signature
The system runs two typographic registers that never overlap. **Marketing** is Aeonik Pro at weight 900 with line-height `1` and effectively zero tracking — letters set solid and huge so a two-word headline ("Banking & Beyond") becomes an architectural wall filling the hero. **Product** is Inter, where the signature move is size-scaled negative tracking: headings pull tight (`calc(-0.35em / 32)`), body eases toward neutral, and only the smallest all-caps label (`emphasis4`, `0.6875rem`) gets positive letter-spacing to stay legible. The result is marketing that shouts in one massive breath and UI that stays quiet, dense, and precisely kerned — the same brand at two completely different volumes.

## Agent Prompt Guide

## Quick Color Reference
- background: `#fff` / text: `#191c1f` / surface: `#f7f7f7` / border: `#e2e2e7` / accent: `#4f55f1` / primary action: `#fff` pill (or black `#191c1f` pill) — the accent indigo drives links & focus, not the button fills

## Example Component Prompts
1. **Hero**: Full-bleed blue-sky photographic hero, transparent nav (white logo left, section text links, right-aligned white "Sign up" pill `9999px` + "Log in" text link). Headline in Aeonik Pro weight 900, `3.5rem`, line-height 1, white. Sub-copy in Inter `1rem` white; black pill CTA "Download the app" (`#191c1f` fill, `#fff` label, `9999px`). Floating white glass widget over the photo showing a balance figure at `1rem` radius with a soft `0 1rem 4rem rgb(25 28 31 / 0.12)` shadow.
2. **Primary Button**: Fully pilled (`9999px`) white button, `#fff` fill, `#191c1f` label, Inter 500, height `3.25rem`, no shadow, no border. Dark variant flips to `#191c1f` fill / `#fff` label.
3. **Widget Card**: White (`#fff`) card, `1rem` radius, `1.5rem` padding, Level-4 shadow, heavy Inter balance number in `#191c1f`, a small pill sub-label; focus/links in `#4f55f1`.
4. **Grouped List**: `#f7f7f7` container at `1.5rem` radius holding stacked white rows; hairline dividers `#e2e2e7`; secondary text `#717173`; one category dot per row from the utility spectrum (e.g. `#00be90`).
5. **Promo Bar**: Edge-to-edge indigo `#4f55f1` band, white centered text, underlined inline link — the only full-width use of the accent.

## Similar Brands
- **Monzo** — kindred neobank light system: bright single accent, pill buttons, in-app category color-coding over calm greyscale.
- **Wise** — the same money-app clarity, heavy display type over generous whitespace and photographic heroes.
- **Cash App** — bold saturated brand color used sparingly, near-black-on-white UI, confident big type.
- **Stripe** — the disciplined-token, one-indigo-accent, precisely-tracked typographic engineering, translated to consumer fintech.
- **Linear** — the restraint: a single electric accent, warm-off-black ink, and a rigorously tokenized spacing/radius scale.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors — core */
  --color-foreground: #191c1f;
  --color-background: #fff;
  --color-accent: #4f55f1;
  --color-blue: #4f55f1;
  --color-action-blue: #edeefd;
  --color-on-accent: #fff;

  /* Colors — greys */
  --color-black: #191c1f;
  --color-grey-50: #717173;
  --color-grey-20: #c9c9cd;
  --color-grey-10: #e2e2e7;
  --color-grey-8: #ebebf0;
  --color-grey-5: #f1f2f4;
  --color-grey-2: #f7f7f7;
  --color-white: #fff;
  --color-neutral: #75808a;
  --color-grouped-background: #f7f7f7;
  --color-widget-background: #fff;
  --color-search-background: #ebebf0;
  --color-segmented-background: #ebebf0;
  --color-segmented-active: #fff;
  --color-shimmer: rgba(25, 28, 31, 0.06);
  --color-modal-overlay: rgba(0, 0, 0, 0.4);

  /* Colors — semantic */
  --color-up: #00b88b;
  --color-down: #e23b4a;
  --color-success: #00b88b;
  --color-warning: #ec7e00;
  --color-danger: #e23b4a;
  --color-input-error: #feedec;
  --color-input-error-focus: #fde5e3;
  --color-red-action-background: #fef6f5;
  --color-progress-neutral: #4f55f1;
  --color-action-photo-header-text: #4f55f1;
  --color-action-photo-header-background: #edeefd;

  /* Colors — utility spectrum (in-app category coding) */
  --color-pink: #e950a4;
  --color-green: #09be67;
  --color-orange: #ec7e00;
  --color-red: #f54c3e;
  --color-deep-pink: #ed5b7b;
  --color-terracotta: #ee7a40;
  --color-yellow: #fbc70a;
  --color-lime: #cbdd00;
  --color-light-green: #5fc223;
  --color-teal: #00be90;
  --color-cyan: #0cd0dd;
  --color-light-blue: #008fe1;
  --color-indigo: #6262d3;
  --color-deep-purple: #805cf5;
  --color-purple: #c054d3;
  --color-brown: #9c7969;
  --color-deep-grey: #6a8cad;

  /* Typography — Families */
  --font-marketing: 'Aeonik Pro', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-brand: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Helvetica, Arial, Arimo, sans-serif;

  /* Typography — Scale */
  --text-marketing-display1: 3.5rem;
  --text-marketing-display2: 2.5rem;
  --text-marketing-display3: 2rem;
  --text-display1: 3.5rem;
  --text-display2: 2.75rem;
  --text-heading1: 2rem;
  --text-heading2: 1.5rem;
  --text-heading3: 1.25rem;
  --text-emphasis1: 1rem;
  --text-emphasis2: 0.875rem;
  --text-emphasis3: 0.75rem;
  --text-emphasis4: 0.6875rem;
  --text-body1: 1rem;
  --text-body2: 0.875rem;
  --text-body3: 0.75rem;

  /* Typography — Line height */
  --leading-marketing-display: 1;
  --leading-display1: 1.1818181818181819;
  --leading-heading1: 1.1875;
  --leading-heading2: 1.25;
  --leading-heading3: 1.4;
  --leading-body1: 1.375;
  --leading-body2: 1.4285714285714286;
  --leading-body3: 1.5;

  /* Typography — Weights */
  --weight-marketing-display: 900;
  --weight-display: 700;
  --weight-heading: 700;
  --weight-emphasis: 500;
  --weight-subheader: 500;
  --weight-body: 400;

  /* Spacing */
  --spacing-s2: 0.125rem;
  --spacing-s4: 0.25rem;
  --spacing-s6: 0.375rem;
  --spacing-s8: 0.5rem;
  --spacing-s12: 0.75rem;
  --spacing-s16: 1rem;
  --spacing-s20: 1.25rem;
  --spacing-s24: 1.5rem;
  --spacing-s32: 2rem;
  --spacing-s40: 2.5rem;
  --spacing-s48: 3rem;
  --spacing-s56: 3.5rem;
  --spacing-s64: 4rem;
  --spacing-s72: 4.5rem;

  /* Border Radius */
  --radius-r2: 0.125rem;
  --radius-r4: 0.25rem;
  --radius-r6: 0.375rem;
  --radius-r8: 0.5rem;
  --radius-r12: 0.75rem;
  --radius-r16: 1rem;
  --radius-r24: 1.5rem;
  --radius-r32: 2rem;
  --radius-widget: 1rem;
  --radius-popup: 1.5rem;
  --radius-app: 25%;
  --radius-status-popup: 2.75rem;
  --radius-round: 9999px;

  /* Shadows */
  --shadow-level1: 0 0.125rem 0.1875rem rgb(25 28 31 / 0.05);
  --shadow-level2: 0 0.1875rem 0.5rem rgb(25 28 31 / 0.1);
  --shadow-level3: 0 0.1875rem 1.875rem rgb(25 28 31 / 0.08);
  --shadow-level4: 0 1rem 4rem rgb(25 28 31 / 0.12);

  /* Layout */
  --size-layout: 94.375rem;

  /* Motion */
  --duration-xs: 100ms;
  --duration-sm: 200ms;
  --duration-md: 300ms;
  --duration-lg: 450ms;
  --duration-xl: 900ms;
  --easing-default: cubic-bezier(0.15, 0.5, 0.5, 1);
}
```

### Tailwind v4
```css
@theme {
  /* Colors — core */
  --color-foreground: #191c1f;
  --color-background: #fff;
  --color-accent: #4f55f1;
  --color-blue: #4f55f1;
  --color-action-blue: #edeefd;
  --color-on-accent: #fff;

  /* Colors — greys */
  --color-black: #191c1f;
  --color-grey-50: #717173;
  --color-grey-20: #c9c9cd;
  --color-grey-10: #e2e2e7;
  --color-grey-8: #ebebf0;
  --color-grey-5: #f1f2f4;
  --color-grey-2: #f7f7f7;
  --color-white: #fff;
  --color-neutral: #75808a;

  /* Colors — semantic */
  --color-up: #00b88b;
  --color-down: #e23b4a;
  --color-success: #00b88b;
  --color-warning: #ec7e00;
  --color-danger: #e23b4a;
  --color-input-error: #feedec;
  --color-input-error-focus: #fde5e3;
  --color-red-action-background: #fef6f5;

  /* Colors — utility spectrum */
  --color-pink: #e950a4;
  --color-green: #09be67;
  --color-orange: #ec7e00;
  --color-red: #f54c3e;
  --color-deep-pink: #ed5b7b;
  --color-terracotta: #ee7a40;
  --color-yellow: #fbc70a;
  --color-lime: #cbdd00;
  --color-light-green: #5fc223;
  --color-teal: #00be90;
  --color-cyan: #0cd0dd;
  --color-light-blue: #008fe1;
  --color-indigo: #6262d3;
  --color-deep-purple: #805cf5;
  --color-purple: #c054d3;
  --color-brown: #9c7969;
  --color-deep-grey: #6a8cad;

  /* Typography — Families */
  --font-marketing: 'Aeonik Pro', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-brand: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Typography — Scale */
  --text-marketing-display1: 3.5rem;
  --text-marketing-display2: 2.5rem;
  --text-marketing-display3: 2rem;
  --text-display1: 3.5rem;
  --text-display2: 2.75rem;
  --text-heading1: 2rem;
  --text-heading2: 1.5rem;
  --text-heading3: 1.25rem;
  --text-emphasis1: 1rem;
  --text-emphasis4: 0.6875rem;
  --text-body1: 1rem;
  --text-body2: 0.875rem;
  --text-body3: 0.75rem;

  /* Spacing */
  --spacing-s2: 0.125rem;
  --spacing-s4: 0.25rem;
  --spacing-s8: 0.5rem;
  --spacing-s12: 0.75rem;
  --spacing-s16: 1rem;
  --spacing-s24: 1.5rem;
  --spacing-s32: 2rem;
  --spacing-s48: 3rem;
  --spacing-s64: 4rem;
  --spacing-s72: 4.5rem;

  /* Border Radius */
  --radius-r8: 0.5rem;
  --radius-r12: 0.75rem;
  --radius-r16: 1rem;
  --radius-r24: 1.5rem;
  --radius-r32: 2rem;
  --radius-widget: 1rem;
  --radius-popup: 1.5rem;
  --radius-app: 25%;
  --radius-round: 9999px;

  /* Shadows */
  --shadow-level1: 0 0.125rem 0.1875rem rgb(25 28 31 / 0.05);
  --shadow-level2: 0 0.1875rem 0.5rem rgb(25 28 31 / 0.1);
  --shadow-level3: 0 0.1875rem 1.875rem rgb(25 28 31 / 0.08);
  --shadow-level4: 0 1rem 4rem rgb(25 28 31 / 0.12);

  /* Motion */
  --ease-default: cubic-bezier(0.15, 0.5, 0.5, 1);
}
```