Revolut

Revolut sets oversized Aeonik Pro headlines with tight tracking on a light bone white canvas. Graphite (#1f1f1f) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 9999px, with 22.5px and 20px on smaller elements.

revolut.com ↗

Colors

Graphite

#1f1f1f

Primary actions and links

Void

#000000

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Soft Graphite

#1f1f1f

Headlines and body copy

Silver Mist

#c9c9cd

Supporting colour

Deep Graphite

#191c1f

Surface or divider

Ash

#717173

Supporting colour

Type scale

DisplayBanking & BeyondAeonik Pro · 88px · 500

HeadingYour salary, reimaginedAeonik Pro · 52px · 500

SubheadingFreeAeonik Pro · 18px · 400

BodyYou’re on the United Kingdom website. Choose your country or region to see location-specifInter · 12px · 400

NavPersonalAeonik Pro · 16px · 500

Buttons

SendDownload the appMove your salaryLearn more

Style reference measured from the public page at revolut.com on 2026-10-12 for design education. Revolut and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Revolut — Style Reference
> Revolut sets oversized Aeonik Pro headlines with tight tracking on a light bone white canvas. Graphite (#1f1f1f) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 9999px, with 22.5px and 20px on smaller elements.

**Theme:** light · **Source:** https://www.revolut.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Graphite | `#1f1f1f` | `--color-accent` | Primary actions and links |
| Void | `#000000` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Soft Graphite | `#1f1f1f` | `--color-ink` | Headlines and body copy |
| Silver Mist | `#c9c9cd` | `--color-surface-1` | Supporting colour |
| Deep Graphite | `#191c1f` | `--color-surface-2` | Surface or divider |
| Ash | `#717173` | `--color-surface-3` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Aeonik Pro | 88px | 500 | 1.00 | -0.024em |
| Heading | Aeonik Pro | 52px | 500 | 1.00 | -0.012em |
| Subheading | Aeonik Pro | 18px | 400 | 1.33 | 0 |
| Body | Inter | 12px | 400 | 1.50 | 0.015em |
| Nav | Aeonik Pro | 16px | 500 | 1.38 | 0 |

Font families on the page: -apple-system, Inter, Aeonik Pro. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 9999px, 22.5px, 20px, 50px, 12px
- Primary button: background `#1f1f1f`, text `#ffffff`, radius 9999px, padding 0px 20px, 16px / 400

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer