A reverse-engineered style guide for Revolut — a two-mode canvas of true-black storytelling bands and white catalogue bands, oversized Aeonik Pro headlines, pill buttons, and a single cobalt-violet stamp.
Two absolute canvases — white and true black — with a warm near-black ink ramp for text. The cobalt-violet brand colour is rationed; the eight saturated accents live inside illustrations only.
Revolut's signature rhythm: full-bleed bands slam between modes rather than fading. The same content reads as a magazine spread.
Aeonik Pro 500 for display (20–136px, tightening as it grows), Inter for body with positive tracking. Display here is rendered in Manrope, the nearest Google substitute for the proprietary Aeonik Pro.
Every button is a full pill. The primary action is the highest-contrast object available — a black pill on white, a white pill on black. Cobalt is used scarcely, never as a default button.
Content cards use a generous 20px radius. On dark bands they lift off true black via surface luminance (#16181a); the featured tier inverts to cobalt.
Inputs run a 12px radius and a tall 56px height — fintech-grade touch targets.
A 4px base in 4 / 8 / 16 multiples, opening to large editorial steps — 88px between bands, 120px on hero and the closing plan section.
Roundness is tiered by component: pills for buttons, 20px for cards, 12px for inputs, 28px for product-mockup chrome.
There is no drop-shadow language. Depth is built from canvas colour-blocking and surface-luminance shifts only.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | All grids 1-up; hero clamps 136 → 48px; section padding 88 → 64px; sub-nav pills become a scroll-rail. |
| Tablet | 768–1023px | Plan grid 2-up; feature grid 2-up; nav folds into a hamburger; wordmark + primary CTA stay anchored. |
| Laptop | 1024–1279px | Plan grid 4-up; feature grid 3-up; container shrinks with xl side padding. |
| Desktop | ≥ 1280px | 4-up plan grid, full-bleed product-mockup bands, content capped ≈1200px. |
Product mockups never letterbox. Phone, card and terminal assets stay full-bleed at every breakpoint and crop inward rather than adding bars.
Revolut's real plan ladder. The recommended tier inverts to cobalt — the single saturated block in an otherwise neutral grid.
A transactions-style table — the kind of dense, tabular surface the catalogue mode is built for.
| ID | Merchant | Amount | Status | When |
|---|---|---|---|---|
| #80421 | Apple | £9.99 | Completed | Today, 14:22 |
| #80417 | Salary — Acme Ltd | +£2,640.00 | Completed | Today, 09:00 |
| #80410 | Transfer to Sam | £40.00 | Pending | Yesterday |
| #80406 | Spotify | £11.99 | Completed | 24 Jun |
| #80399 | Savings Vault | £150.00 | Completed | 23 Jun |
Cards held by hairlines, not shadows. Pill CTAs, 56px inputs, an SSO route below a soft divider.