## Color Palette

Black canvas, white catalogue, cobalt-violet brand stamp, and a wide product-illustration palette of teal, deep pink, light green, warning orange, yellow, brown.

Brand & Accent

Cobalt Violet

#494fdf

Featured plan card, brand wordmark.

Cobalt Bright

#4f55f1

Inline link in dark photo headers.

Cobalt Deep

#3a40c4

Pressed state.

On-Primary

#ffffff

Label on cobalt.

Surface

Canvas Light

#ffffff

White catalogue mode.

Canvas Dark

#000000

Storytelling canvas.

Surface Soft

#f4f4f4

Soft buttons, download tiles.

Surface Deep

#0a0a0a

Inset cards in dark bands.

Surface Elevated

#16181a

Plan cards in dark.

Hairline Light

#e2e2e7

Dividers in white bands.

Hairline Strong

#191c1f

Card outlines, structural rules.

Text

Ink

#191c1f

Primary text.

Body

#1f2226

Long-form body.

Charcoal

#3a3d40

Captions.

Mute

#505a63

Supporting text.

Ash

#5c5e60

Footer copy.

Stone

#8d969e

Metadata.

Faint

#c9c9cd

Disabled foreground.

On-Dark

#ffffff

Text on canvas-dark.

Product Accent Palette

Teal

#00a87e

Product illustrations.

Light Blue

#007bc2

Inline link in dark photo headers.

Blue Link

#376cd5

Default inline link on white.

Light Green

#428619

Success / positive callouts.

Green Text

#006400

Inline success text.

Yellow

#b09000

Caution / pending state.

Warning

#ec7e00

Warning illustrations.

Deep Pink

#e61e49

Photography accents, icons.

Danger

#e23b4a

Destructive / error.

Deep Red

#8b0000

Inline error text.

Brown

#936d62

Metals tier card chrome.

## Typography

Aeonik Pro 500 for display, Inter for body. Inter Tight substitutes for Aeonik Pro when proprietary licensing is unavailable.

display-xxl136 · 500 · 1.0 · -2.72px
Banking & Beyond
display-xl80 · 500 · 1.0 · -0.8px
Choose your subscription
display-lg48 · 500 · 1.21 · -0.48px
Join the 70+ million using Revolut
display-md40 · 500 · 1.2 · -0.4px
Premium plan benefits
heading-lg32 · 500 · 1.19 · -0.32px
Standard
heading-md24 · 500 · 1.33
Send money worldwide
body-lg18 · 400 · 1.56 · -0.09px
A complete personal banking experience for managing your money.
body-md16 · 400 · 1.5 · 0.24px
Marketing prose with the small mechanical tracking that gives Inter its fintech precision.
body-md-bold16 · 600 · 1.5 · 0.16px
Emphatic body copy for callouts and highlights.
body-sm14 · 400 · 1.43
Captions and metadata.
button-lg20 · 500 · 1.4 (Aeonik)
Get started
button-md16 · 600 · 1.5 · 0.24px
Choose your subscription
caption13 · 400 · 1.4
© Revolut Bank UAB 2026 — design system catalogue.

## Buttons

All buttons are pill-shaped (`rounded.full`). White-on-dark is the brand's primary CTA pattern.

## Feature Cards (Light)

Feature cards on white canvas use `rounded.lg` (20px) corners and `hairline-light` 1px outlines.

### Send money worldwide

Transfer money in 30+ currencies at the interbank exchange rate.

### Save effortlessly

Round up purchases and earn interest on your spare change.

### Invest in stocks

Buy fractional shares in over 1,500 stocks with no commission.

## Feature Cards (Dark)

Inside dark sections, feature cards swap to `surface-elevated` (`#16181a`) — slightly luminous, lifts off canvas-dark.

### Beyond banking

An account that goes far beyond traditional banking.

### Premium experience

Lounge access, travel insurance, premium card materials.

### Crypto & investing

Buy, hold, and trade cryptocurrencies and stocks alongside cash.

## Plan Grid

4-up plan grid with the recommended tier flipped to cobalt violet (`{component.plan-card-featured}`).

Standard

Free

- Free GBP & EUR account
- Send money to 30+ currencies
- Spend abroad in any currency

Plus

£3.99/month

- Everything in Standard
- Buyer protection
- Plus card, plastic

Premium

£8.99/month

- Everything in Plus
- Premium metal card
- Lounge access via DragonPass

Metal

£14.99/month

- Everything in Premium
- 1% cashback outside Europe
- Metal card, choice of finishes

## Product Mockup Band

A full-bleed phone mockup against `canvas-dark` — the asset itself is the section, no chrome, no caption overlay.

£105.50

## Download Tiles

App store download buttons use `rounded.md` (12px) and `surface-soft` background.

▼ App Store ▶ Google Play

## Form Elements

Generous 56px input height for fintech accessibility.

Email
Phone
Country
Plan
Notes
Standard Plus Most popular

## Spacing Scale

A 4px base, with `section: 88px` and `band: 120px` driving the editorial dual-canvas rhythm.

xxs · 4
xs · 6
sm · 8
md · 14
lg · 16
xl · 24
xxl · 32
xxxl · 48
block · 80
section · 88
band · 120

## Border Radius

Pill for buttons, lg-20px for cards, xl-28px for product mockups.

none · 0
sm · 8
md · 12
lg · 20
xl · 28
full · pill

## Elevation & Depth

Depth is canvas-switching + surface-luminance shifts. The featured tier is its own elevation step in cobalt violet.

Level 0 — Flat
Level 1 — Card on Light
Level 2 — Elevated Dark
Level 3 — Featured

## Responsive Behavior

Six breakpoints from desktop XL (≥1440) to small mobile (≤425). Hero clamps from 136px down to 48px across the ladder.

Breakpoint | Width | Key Changes
--- | --- | ---
Desktop XL | ≥ 1440px | 4-up plan grid, full-bleed product mockups, max content 1200.
Desktop | 1280–1439px | Container shrinks; xl side padding.
Tablet Large | 1024–1279px | Plan grid 4-up; feature grid 3-up.
Tablet | 768–1023px | Plan grid 2-up; feature grid 2-up; sub-nav scroll-rail.
Mobile Large | 426–767px | Plan grid 1-up; nav hamburger; hero clamps to 64px.
Mobile | ≤ 425px | All grids 1-up; hero 48px; section padding 64px.

390
600
800
1024
1280
1440