---
name: Revolut
colors:
  dark: '#191c1f'
  white: '#ffffff'
  light-surface: '#f4f4f4'
  black: '#000000'
  blue: '#494fdf'
  action-blue: '#4f55f1'
  blue-text: '#376cd5'
  danger: '#e23b4a'
  deep-pink: '#e61e49'
  warning: '#ec7e00'
  yellow: '#b09000'
  teal: '#00a87e'
  light-green: '#428619'
  green-text: '#006400'
  light-blue: '#007bc2'
  brown: '#936d62'
  red-text: '#8b0000'
  mid-slate: '#505a63'
  cool-gray: '#8d969e'
  gray-tone: '#c9c9cd'
typography:
  display-mega:
    fontSize: 136px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: '-2.72px'
    use: Stadium-scale hero (Aeonik Pro)
  display-hero:
    fontSize: 80px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: '-0.8px'
    use: Primary hero (Aeonik Pro)
  section:
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: '-0.48px'
    use: Feature sections (Aeonik Pro)
  card-title:
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: '-0.32px'
    use: Card headings (Aeonik Pro)
  nav:
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    use: Navigation, buttons (Aeonik Pro)
  body-lg:
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: '-0.09px'
    use: Introductions (Inter)
  body:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.24px
    use: Standard reading (Inter)
  body-semibold:
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.16px
    use: Emphasized body (Inter)
rounded:
  sm: 12px
  md: 20px
  lg: 20px
  full: 9999px
spacing:
  xs: 4
  sm: 8
  md: 14
  base: 16
  lg: 24
  xl: 32
  xxl: 48
  section: 80
components:
  button-primary:
    type: button
    backgroundColor: '#191c1f'
    textColor: '#ffffff'
    rounded: 9999px
    padding: 14px 32px
    use: Primary dark pill, hover opacity 0.85
  button-secondary:
    type: button
    backgroundColor: '#f4f4f4'
    textColor: '#000000'
    rounded: 9999px
    padding: 14px 34px
    use: Secondary light pill
  button-outlined:
    type: button
    backgroundColor: transparent
    textColor: '#191c1f'
    rounded: 9999px
    padding: 14px 32px
    use: 'Outlined pill, 2px solid #191c1f border'
  button-ghost:
    type: button
    backgroundColor: rgba(244,244,244,0.1)
    textColor: '#f4f4f4'
    rounded: 9999px
    padding: 14px 32px
    use: 'Ghost on dark, 2px solid #f4f4f4 border'
  card:
    type: card
    rounded: 20px
    use: Feature card, flat, no shadow, dark/light alternation
  nav-top:
    type: tab
    textColor: '#191c1f'
    typography: 20/500
    use: Clean header, pill CTAs right-aligned
fonts:
  roles:
    sans: Inter
    mono: Inter
---

# Design System Inspiration of Revolut

## Overview

### Visual Theme & Atmosphere

Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.

The color system is built on a comprehensive `--rui-*` (Revolut UI) token architecture with semantic naming for every state: danger (`#e23b4a`), warning (`#ec7e00`), teal (`#00a87e`), blue (`#494fdf`), deep-pink (`#e61e49`), and more. But the marketing surface itself is remarkably restrained — near-black (`#191c1f`) and pure white (`#ffffff`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.

What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (`#191c1f`), secondary light (`#f4f4f4`), outlined (`transparent + 2px solid`), and ghost on dark (`rgba(244,244,244,0.1) + 2px solid`). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.

**Key Characteristics:**
- Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines
- Near-black (`#191c1f`) + white binary with comprehensive `--rui-*` semantic tokens
- Universal pill buttons (9999px radius) with generous padding (14px 32px)
- Inter for body text with positive letter-spacing (0.16px–0.24px)
- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning
- Zero shadows detected — depth through color contrast only
- Tight display line-heights (1.00) with relaxed body (1.50–1.56)

### Primary tasks

- Hold and spend several currencies while travelling every month
- Invoice clients from a business account that earns in two currencies
- Buy stocks or crypto in the same app that holds the money
- Top up by bank transfer after a payment fails for lack of funds

### Brand Narrative

**Revolut Ltd was incorporated December 2013** by **Nikolay "Nik" Storonsky (CEO)** with **Vlad Yatsenko (CTO)** joining shortly after; the consumer product **launched 2015** at **Level39 fintech accelerator, Canary Wharf, London** (Revolut — Wikipedia, Nik Storonsky — Wikipedia). Storonsky was **the company's first investor (£300,000 of his own savings)**. **Yatsenko**: graduated with honors, worked at **Comarch (Krakow programmer)** → **UBS (London senior software developer 2010)** → brief stints at **Deutsche Bank + Credit Suisse** through 2014. Storonsky and Yatsenko are **both immigrants** (The Vertical — immigrant founders Revolut). Originally a multi-currency travel card → expanded to full neobank with stocks, crypto, lending, insurance. **Valuation timeline**: $45B secondary share sale 2024 → **$75B November 2025** (City AM — Revolut $75B). **IPO timeline**: per Bloomberg April 20 2026 interview, Storonsky stated **~2 years from IPO with U.S. listing preferred**. The brand voice — bold, multi-segment, flat-design — tracks the product's evolution from single-card to financial super-app.

### Principles

1. **Multi-segment first-class.** Personal / Business / Kids & Teens. *UI implication:* segment nav at top level.
2. **Pill chrome 16px+.** *UI implication:* primary actions and nav use 16px pill.
3. **Zero shadows.** *UI implication:* depth via background contrast, never shadow.
4. **Near-black `#0e1318` + white marketing.** *UI implication:* marketing chrome stays achromatic.
5. **Semantic colors only in product.** *UI implication:* charts + status use semantic; marketing stays neutral.

### Personas

*Personas are fictional archetypes informed by Revolut user segments (multi-currency travelers, freelancers, EU SMB, Gen Z), not individual people.*

**Catherine Liu, 32, London.** UK-based consultant traveling EU monthly. Multi-currency wallet + travel insurance.

**Marcus Müller, 38, Berlin.** Freelancer with EUR/USD income streams. Revolut Business for invoicing.

**Sofia Park, 18, Seoul.** Teens account holder traveling for university applications.

## Colors

### Primary
- **Revolut Dark** (`#191c1f`): Primary dark surface, button background, near-black text
- **Pure White** (`#ffffff`): `--rui-color-action-label`, primary light surface
- **Light Surface** (`#f4f4f4`): Secondary button background, subtle surface

### Brand / Interactive
- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, primary brand blue
- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, header accent
- **Blue Text** (`#376cd5`): `--website-color-blue-text`, link blue

### Semantic
- **Danger Red** (`#e23b4a`): `--rui-color-danger`, error/destructive
- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, critical accent
- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, warning states
- **Yellow** (`#b09000`): `--rui-color-yellow`, attention
- **Teal** (`#00a87e`): `--rui-color-teal`, success/positive
- **Light Green** (`#428619`): `--rui-color-light-green`, secondary success
- **Green Text** (`#006400`): `--website-color-green-text`, green text
- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, informational
- **Brown** (`#936d62`): `--rui-color-brown`, warm neutral accent
- **Red Text** (`#8b0000`): `--website-color-red-text`, dark red text

### Neutral Scale
- **Mid Slate** (`#505a63`): Secondary text
- **Cool Gray** (`#8d969e`): Muted text, tertiary
- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, borders/dividers

## Typography

### Font Families
- **Display**: `Aeonik Pro` — geometric grotesque, no detected fallbacks
- **Body / UI**: `Inter` — standard system sans
- **Fallback**: `Arial` for specific button contexts

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |
| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |
| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |
| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |
| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |
| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |
| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |
| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |
| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |
| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |
| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |

### Principles
- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings — no bold. This creates authority through size and tracking, not weight.
- **Billboard tracking**: -2.72px at 136px is extremely compressed — text designed to be read at a glance, like airport signage.
- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.

## Layout

### Spacing System
- Base unit: 8px
- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
- Large section spacing: 80px–120px

### Border Radius Scale
- Standard (12px): Navigation, small buttons
- Card (20px): Feature cards
- Pill (9999px): All buttons

### Responsive Behavior

#### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <400px | Compact, single column |
| Mobile | 400–720px | Standard mobile |
| Tablet | 720–1024px | 2-column layouts |
| Desktop | 1024–1280px | Standard desktop |
| Large | 1280–1920px | Full layout |

## Elevation & Depth

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |
| Focus | `0 0 0 0.125rem` ring | Accessibility focus |

**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.

### Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

- `shadow.none`: `none`

## Motion & Easing

**No motion duration or easing token is promoted.** The capture bundle for this
reference records no transition or animation property, and no official source consulted
publishes a motion scale. The behaviour described below was observed; treat any exact
duration or curve as a local extension until a component-level official source verifies it.

Standard cubic-bezier; no bounce — fintech register. `prefers-reduced-motion: reduce` disables price pulse.

---

## Components

### Buttons

**Primary Dark Pill**
- Background: `#191c1f`
- Text: `#ffffff`
- Padding: 14px 32px
- Radius: 9999px (full pill)
- Hover: opacity 0.85
- Focus: `0 0 0 0.125rem` ring

**Secondary Light Pill**
- Background: `#f4f4f4`
- Text: `#000000`
- Padding: 14px 34px
- Radius: 9999px
- Hover: opacity 0.85

**Outlined Pill**
- Background: transparent
- Text: `#191c1f`
- Border: `2px solid #191c1f`
- Padding: 14px 32px
- Radius: 9999px

**Ghost on Dark**
- Background: `rgba(244, 244, 244, 0.1)`
- Text: `#f4f4f4`
- Border: `2px solid #f4f4f4`
- Padding: 14px 32px
- Radius: 9999px

### Cards & Containers
- Radius: 12px (small), 20px (cards)
- No shadows — flat surfaces with color contrast
- Dark and light section alternation

### Navigation
- Aeonik Pro 20px weight 500
- Clean header, hamburger toggle at 12px radius
- Pill CTAs right-aligned

### States

| State | Treatment |
|---|---|
| **Empty (no transactions)** | "Top up to start" CTA |
| **Empty (no investments)** | "Browse stocks/crypto" link |
| **Loading (price feed)** | Last cached + stale indicator |
| **Loading (KYC)** | Persistent badge with progress |
| **Error (KYC)** | Specific reason + remediation |
| **Error (payment)** | Receipt-style failure + retry |
| **Success (transaction)** | Receipt with full details + emoji-free confirmation |
| **Success (deposit)** | Confirmation + when funds available |
| **Skeleton (account list)** | Pill placeholders |
| **Disabled (no funds)** | Top up inline link |
| **Loading (long action)** | Multi-step progress |

## Do's and Don'ts

### Do
- Use Aeonik Pro weight 500 for all display headings
- Apply 9999px radius to all buttons — pill shape is universal
- Use generous button padding (14px 32px)
- Keep the palette to near-black + white for marketing surfaces
- Apply positive letter-spacing on Inter body text

### Don't
- Don't use shadows — Revolut is flat by design
- Don't use bold (700) for Aeonik Pro headings — 500 is the weight
- Don't use small buttons — the generous padding is intentional
- Don't apply semantic colors to marketing surfaces — they're for the product

## Voice & Tone

Revolut's voice is **fintech-bold and segment-aware.** "Banking & Beyond" — confident, multi-segment positioning (Personal / Business / Kids & Teens). Pill chrome (9999px) signals "modern fintech" while flat-no-shadow design signals "no-nonsense banking."

| Context | Tone |
|---|---|
| CTA | Verb. "Get started", "Try Revolut", "Sign up" |
| Marketing | Segment-targeted. Personal vs Business vs Teens copy distinct |
| Onboarding | KYC-aware. Plain-language compliance |
| Error | Specific. "Insufficient funds. Top up via bank transfer." |

**Voice samples**
- Tagline: *"Banking & Beyond"* <!-- verified: revolut.com homepage 2026-05 -->
- Segment nav: *"Personal / Business / Kids & Teens"* <!-- verified: revolut.com homepage -->

**Forbidden phrases.** "Revolutionary fintech". Aggressive crypto-bro framing.

## Agent Prompt Guide

### Quick Color Reference
- Dark: Revolut Dark (`#191c1f`)
- Light: White (`#ffffff`)
- Surface: Light (`#f4f4f4`)
- Blue: Revolut Blue (`#494fdf`)
- Danger: Red (`#e23b4a`)
- Success: Teal (`#00a87e`)

### Example Component Prompts
- "Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f)."
- "Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85."

### Iteration Guide
1. Aeonik Pro 500 for headings — never bold
2. All buttons are pills (9999px) with generous padding
3. Zero shadows — flat is the Revolut identity
4. Near-black + white for marketing, semantic colors for product

## Governance

### Known Gaps

- **Contrast, `button-outlined`.** Text `#191c1f` on `#00000000` measures 1.23:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
- **Contrast, `button-ghost`.** Text `#f4f4f4` on `#f4f4f41a` measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.