Revolut DESIGN.md

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

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

Elevation & Depth

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.

---

Verified: 2026-05-08 (omd:migrate run 51 — Apple-tier) Tier 1 sources: https://revolut.com/en-US home + /en-US/business (live DOM via playwright — all-pill 9999px chrome with canvas-aware Charcoal/Light pair: Charcoal #191c1f Primary (consumer light canvas) + Light Surface #f4f4f4 Inverse (Business dark canvas + feature cards) + Translucent rgba(244,244,244,0.10) on-dark hover, all 9999px / 42px / 10×24 / 16px·500). Tier 2 sources: styles.refero.design / getdesign.md — no record. Tier 2 (Philosophy/founders/valuation/IPO): Wikipedia (Revolut + Nik Storonsky), Huxley (Yatsenko Ukrainian billionaire bio), The Vertical (immigrant founders narrative), City AM ($75B Nov 2025), MoneyWeek, Bloomberg Billionaires, FinTech Magazine. Style ref: stripe. Conflicts unresolved: none. Earlier addition: Charcoal #191c1f Primary + Light Surface #f4f4f4 Inverse + canvas-aware pair + translucent variant missed by prior pass (which captured 38px segment-nav only — canonical is 42px Primary).

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

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."

Voice samples

• Tagline: "Banking & Beyond"
• Segment nav: "Personal / Business / Kids & Teens"

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.