Finance / iOS / Android / Web

Revolut

Revolut stages its product on black with headlines set solid, then lays the detail out in calm white and gray cards with near-black pills for every action.

Download
  • #1F1F1F
  • #191C1F
  • #717173
  • #F7F7F7
  • #BD0049
  • #0666EB

Color

Every color token in the file, grouped by role.

Brand

  • primary#1F1F1F
  • on primary#FFFFFF
  • accent#BD0049

Surfaces

  • canvas#FFFFFF

Text

  • ink#1F1F1F
  • ink muted#717173
  • on stage#FFFFFF

Status

  • error wash#FDE5E3

More

  • gray 20#C9C9CD
  • gray 10#E2E2E7
  • gray 5#F4F5F6
  • gray 2#F7F7F7
  • grouped#F3F4F5
  • stage#000000
  • stage raised#191C1F
  • action blue#0666EB
  • green#09BE67
  • red#F54C3E

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Aeonik ProAeonik Pro is private and not available in open fonts. Shown in Host Grotesk, the closest open match.
  • InterOpen font, shown as published.
  • display87.6px / 500 / 87.6px

    Revolut

  • headline51.8px / 500 / 51.8px

    Revolut

  • amount40px / 500 / 48px

    Revolut

  • title24px / 500 / 28px

    Pack my box with five dozen liquor jugs

  • button16px / 500 / 22px

    Continue to checkout

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • caption12px / 400 / 18px

    Continue to checkout

Shape

Corner radius tokens.

  • r88px
  • r1212px
  • r1616px
  • r2424px
  • r3232px
  • round9999px

Spacing

The spacing scale, drawn to size.

  • s44px
  • s88px
  • s1212px
  • s1616px
  • s2424px
  • s3232px
  • s4040px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button on stage
    button-on-stage
  • nav pill
    nav-pill
  • currency select
    currency-select
  • widget
    widget
  • stage
    stage
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 130 lines
version: alpha
name: Revolut-design-analysis
description: "A financial super app with a black marketing stage and white product surfaces, Aeonik Pro headlines at weight 500 set solid, Inter for text, near-black (#1f1f1f) pill buttons, light gray cards at 12 to 24px and a shipped token set that names widgets, cells and popups."
status: Draft
appVersion: "measured in a browser and read from the design tokens the live site ships, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#1f1f1f"
  on-primary: "#ffffff"
  ink: "#1f1f1f"
  ink-muted: "#717173"
  gray-20: "#c9c9cd"
  gray-10: "#e2e2e7"
  gray-5: "#f4f5f6"
  gray-2: "#f7f7f7"
  canvas: "#ffffff"
  grouped: "#f3f4f5"
  stage: "#000000"
  stage-raised: "#191c1f"
  on-stage: "#ffffff"
  accent: "#bd0049"
  action-blue: "#0666eb"
  green: "#09be67"
  red: "#f54c3e"
  error-wash: "#fde5e3"

typography:
  # Font note: "Aeonik Pro" is a private font and is not available in open fonts. Closest open alternative: "Host Grotesk".
  display:
    fontFamily: "'Aeonik Pro', Inter, -apple-system, sans-serif"
    fontSize: 87.6px
    fontWeight: 500
    lineHeight: 87.6px
    letterSpacing: -2.08px
  headline:
    fontFamily: "'Aeonik Pro', Inter, -apple-system, sans-serif"
    fontSize: 51.8px
    fontWeight: 500
    lineHeight: 51.8px
    letterSpacing: -0.6px
  amount:
    fontFamily: "'Aeonik Pro', Inter, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 48px
    letterSpacing: -0.4px
  title:
    fontFamily: "'Aeonik Pro', Inter, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 28px
    letterSpacing: -0.24px
  button:
    fontFamily: "'Aeonik Pro', Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 22px
  body:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.16px
  caption:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0.18px

rounded:
  r8: 8px
  r12: 12px
  r16: 16px
  r24: 24px
  r32: 32px
  round: 9999px

spacing:
  s4: 4px
  s8: 8px
  s12: 12px
  s16: 16px
  s24: 24px
  s32: 32px
  s40: 40px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    height: 42px
    padding: 10px 24px
  button-on-stage:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    height: 42px
    padding: 10px 24px
  nav-pill:
    backgroundColor: "{colors.stage}"
    textColor: "{colors.on-stage}"
    typography: "{typography.button}"
    rounded: "{rounded.round}"
    height: 38px
    padding: 8px 20px
  currency-select:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.r8}"
    height: 34px
    padding: 4px 8px
  widget:
    backgroundColor: "{colors.gray-2}"
    textColor: "{colors.ink}"
    typography: "{typography.title}"
    rounded: "{rounded.r16}"
    padding: 24px
  stage:
    backgroundColor: "{colors.stage}"
    textColor: "{colors.on-stage}"
    typography: "{typography.display}"
    padding: 40px

Overview

Revolut is a financial app for spending, sending, exchanging and investing money across many countries. Its public site opens on a black stage with huge white headlines, then moves to white product sections with light gray cards. Headlines are Aeonik Pro at 500, set solid with a line height of 1, and text is Inter. A token set that ships with the live site names its radii and surfaces after app parts: widgets, cells, nested cells and popups. [Measured]

What defines the look:

  1. Black stage, white product. Heroes sit on #000000 and #191c1f with white type. Product sections are white with #f7f7f7 cards. [Measured]
  2. Solid headlines. Aeonik Pro at weight 500 with a line height equal to the size (87.57 on 87.57 at 1440) and slight negative tracking. [Measured]
  3. Near-black pills. Buttons are full pills in #1f1f1f with white text, 40 to 42 high, and white pills with dark text on the black stage. [Measured]
  4. Gray by opacity. Text and chips use one near-black at different strengths: 80 percent for small print and 8 percent for chip fills. [Measured]
  5. Named radii. Widgets and cells 16, nested parts 12, popups 24, and pills round. [Measured]

Source for this file: the United Kingdom home page, the plans page and the currency converter, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the tokens the live site declares on its root element (color channels, type sizes and weights, radii, space, durations and easing). Revolut's design system documentation is not public. The app itself sits behind an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere or token name
Primary button#1f1f1f with white textSend, Download the app [Measured]
Text#1f1f1f, small print at 80 percentforeground, color channel black [Measured]
Muted text#717173grey 50 [Measured]
Grays#c9c9cd, #e2e2e7, #ebebf0, #f4f5f6, #f7f7f7grey 20, 10, 8, 5, 2 [Measured]
Canvas#ffffff, grouped #f3f4f5background, grouped background [Measured]
Stage#000000, #191c1fHero and plan sections [Measured]
Accent#bd0049accent [Measured]
Action blue#0666ebaction blue [Measured]
Statusgreen #09be67, red #f54c3e, error wash #fde5e3green, red, input error [Measured]
Overlayblack at 40 percentmodal overlay [Measured]

The token set also names about twenty hue channels for categories and charts (blue, cyan, teal, lime, orange, terracotta, pink, purple, indigo and more). [Measured]

Typography

Role1440 wide390 wideFace and weight
Display87.57 on 87.57, -2.08px48 on 48Aeonik Pro 500 [Measured]
Page title58.1 on 58.1, -1.2px40 on 40Aeonik Pro 500 [Measured]
Section headline51.79 on 51.79, -0.6px36 on 36Aeonik Pro 500 [Measured]
Rate40 on 48, -0.4pxnot measuredAeonik Pro 500 [Measured]
Card title24 on 28, -0.24px22 on 26Aeonik Pro 500 [Measured]
Button and nav16 on 22sameAeonik Pro 500 [Measured]
Body16 on 24, -0.16pxsameInter 400 [Measured]
Small print12 on 18, 0.18pxsameInter 400 [Measured]

The token set names a product scale beside the marketing one: display 56 and 44 at 700, headings 24 and 20 at 700, emphasis 16 to 11 at 500 and 600, body 16, 14 and 12 at 400. Those product styles were not seen on the public pages. [Measured]

Shape and spacing

Radius tokens are 2, 4, 6, 8, 12, 16, 24 and 32 plus round, with named uses: widget and cell 16, nested widget and nested cell 12, popup 24 and status popup 44. [Measured] Space tokens run 2, 4, 6, 8, 12, 16, 20, 24, 32 and 40. [Measured]

Iconography and motion

Durations are named 100, 200, 300, 450 and 900ms, with 1500ms for skeleton loading. The default easing is cubic-bezier(0.15, 0.5, 0.5, 1) and toasts overshoot with cubic-bezier(0.175, 0.885, 0.21, 1.65). [Measured] Icons were not measured. [Inferred]

Themes

The web follows its fixed black and white sections. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Revolut iOS app looks and behaves was not captured. The token set on the web names app parts (cells, nested widgets, segmented controls, status popups), but its documentation is not public, so it cannot be shown that the apps use it. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for home, investing, payments, crypto and lifestyle is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Round action buttons for adding money, moving it and exchanging it. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Popups with 24px corners, per the shipped radius names. Whether the app uses them was not seen. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the near-black pills, the gray cards and the 16 and 12 radii with the web. [Inferred]

Platform: Android

How the Revolut Android app looks and behaves was not captured. The token set on the web names app parts (cells, nested widgets, segmented controls, status popups), but its documentation is not public, so it cannot be shown that the apps use it. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for home, investing, payments, crypto and lifestyle is expected. [Inferred]

Main action

Expected on Android: Floating action button.

Round action buttons for adding money, moving it and exchanging it. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Popups with 24px corners, per the shipped radius names. Whether the app uses them was not seen. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the near-black pills, the gray cards and the 16 and 12 radii with the web. [Inferred]

Platform: Web

The home page, plans page and currency converter, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar with Personal and Business as 38 high pill links (16 on 22 at 500) over the black stage, product menus, and a region chooser chip at 8 percent near-black with a 12px corner. [Measured]

Main action

Expected on Web: Page-level button.

A #1f1f1f pill with white Aeonik Pro 16px medium text, 40 to 42 high with 10 by 24 padding. On the black stage, a white pill with dark text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

The region notice is a dismissible bar with a 12px corner. Modals sit over black at 40 percent, per the tokens. [Measured]

Controls

Expected on Web: Native or custom.

The converter shows amounts as large Aeonik Pro 24px inputs without a visible box, with currency choosers as 34 high buttons with an 8px corner. The plans page uses 24px checkboxes with a 6px corner. [Measured]

Text sizing

Expected on Web: Browser zoom.

Type and space tokens are in rem, so they follow the browser root size. Marketing sizes are fractional at 1440 and round at 390. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 38 to 42 high, currency choosers 34. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive marketing site that keeps the solid headline style at every width and stacks cards on mobile. [Measured]

Cross-platform consistency

Consistent across platforms: near-black pills, gray cards, Aeonik Pro headlines and Inter text. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Open with a black stage and huge white headlines, then switch to white for detail.
  • Set headlines solid, with a line height equal to the size.
  • Use near-black pills for actions and white pills on dark.
  • Pick corners by part: 16 for widgets and cells, 12 nested, 24 for popups.

Don't

  • Don't use the accent or hue channels for buttons. Actions are near-black.
  • Don't open up headline leading.
  • Don't use square buttons.

Known Gaps

  • The app sits behind an account, and no signed-in screens were measured.
  • The iOS and Android apps were not captured. The shipped tokens name app parts, but their documentation is not public, so every mobile topic stays inferred.
  • The product type scale and many hue channels are named in the tokens but were not seen in use.
  • Icons were not measured.
  • Aeonik Pro is private. Host Grotesk was chosen by comparing the same headline side by side: within 1 percent of the width with similar round bowls. IBM Plex Sans and Archivo were close seconds.
  • Account deletion and store policy rules were not verified.