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.

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.

BreakpointWidthKey Changes
Desktop XL≥ 1440px4-up plan grid, full-bleed product mockups, max content 1200.
Desktop1280–1439pxContainer shrinks; xl side padding.
Tablet Large1024–1279pxPlan grid 4-up; feature grid 3-up.
Tablet768–1023pxPlan grid 2-up; feature grid 2-up; sub-nav scroll-rail.
Mobile Large426–767pxPlan grid 1-up; nav hamburger; hero clamps to 64px.
Mobile≤ 425pxAll grids 1-up; hero 48px; section padding 64px.
390
600
800
1024
1280
1440