Skip to content

Design System: Revolut

1. 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 32px34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px0.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.16px0.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.501.56)

2. Color Palette & Roles

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

3. Typography Rules

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.

4. Component Stylings

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
  • Aeonik Pro 20px weight 500
  • Clean header, hamburger toggle at 12px radius
  • Pill CTAs right-aligned

5. Layout Principles

Spacing System

  • Base unit: 8px
  • Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
  • Large section spacing: 80px120px

Border Radius Scale

  • Standard (12px): Navigation, small buttons
  • Card (20px): Feature cards
  • Pill (9999px): All buttons

6. Depth & Elevation

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.

7. 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 revenue (cuan) surfaces they're for the product

8. Responsive Behavior

Breakpoints

Name Width Key Changes
Mobile Small <400px Compact, single column
Mobile 400720px Standard mobile
Tablet 7201024px 2-column layouts
Desktop 10241280px Standard desktop
Large 12801920px Full layout

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