coderef

Revolut

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.
DownloadRaw
Revolut

Build with the Revolut look.

Palette, type and components from this DESIGN.md, applied to a sample hero.

Palette

At a glance

Website
revolut.com ↗
Theme
light
Typefaces
Aeonik Pro, Inter
Sections
11
Length
2,302 words

Add it to your project

Then prompt your agent

Design System · Revolut

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
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.

More like Revolut

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses