Revolut Design System
Light · Generated 17/04/2026 · Banking & Beyond
v1.0.0
Color Palette
Background Colors
Dark Gray
#191C1F
White
#F4F4F4
Blue
#8D969E
White 2
#FFFFFF
Black
#000000
White 3
#F7F7F7
White 4
rgba(244,244,244,0.1)
Text Colors
Blue 2
#505A63
Mid Gray
#717173
Border Colors
Light Gray
#C9C9CD
Fill & Gradient Colors
Blue 3
#4C8ACC
Blue 4
#3991D8
RUI Brand & Semantic Colors
Accent
#BD0049
Action Blue
#0666EB
Green
#067F44
Orange
#D67200
Red
#E91F0C
Success
#00B88B
Warning
#EC7E00
Danger
#E23B4A
Positive
#09BE67
Typography
Base Font · Inter
Inter
The better way to handle your money. The quick brown fox jumps over the lazy dog.
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Marketing Font · Aeonik Pro
Aeonik Pro
Banking & Beyond — spend, save, invest, and grow your wealth.
Regular · 400 Bold · 700
Financial freedom
Display Hero · 84.18px · Bold (Aeonik Pro) · line-height: 84.18px · letter-spacing: −2.08px
Banking & Beyond
Display XL · 50.09px · Bold (Aeonik Pro) · line-height: 50.09px · letter-spacing: −2.08px
One app for all your finances
Display Large · 40px · Bold (Aeonik Pro) · line-height: 48px · letter-spacing: −0.6px
Spend, save, invest and grow
Heading XL · 32px · Bold (Aeonik Pro) · line-height: 48px · letter-spacing: −0.4px
Send money across 160+ currencies
Heading Large · 24px · Bold (Aeonik Pro) · line-height: 38px · letter-spacing: −0.32px
Revolut helps you manage your money, budget better, and earn more from your savings — all in one app.
Body Large · 18px · Regular (Inter) · line-height: 28px · letter-spacing: −0.24px
Open an account, get a card, and start spending or sending money worldwide with no hidden fees.
Body Default · 16px · Regular (Inter) · line-height: 24px · letter-spacing: −0.07px
Exchange rates updated every 30 seconds · Transaction history · 24/7 support
Body Small · 14px · Regular (Inter) · line-height: 22px
Standard · Plus · Metal · Ultra
Caption / Label · 12px · Semibold (Inter) · line-height: 18px · letter-spacing: 0.18px
Line Heights
Tight
18px
Snug
22px
Normal
24px
Relaxed
28px
Loose
38px
LH-6
48px
LH-7
50.09px
LH-8
84.18px
Letter Spacing
Revolut
Tight
−2.08px · display, hero
Banking & Beyond
Normal
−0.6px · headings
Send money now
Wide
−0.4px · subheadings
PLANS
LS-7
0.12px · uppercase labels
FEATURES
LS-8
0.18px · captions
Spacing
Spacing Scale
Token scale — 1px → 500px
1
4
8
10
12
16
18
20
24
26
32
48
56
60
64
66.5
72
80
100
109.4
123
237
408
500
Borders
Border Radii
Small
12px
Medium
20px
Large
21.5 21.5 0 0
X-Large
21.525px
Pill / Full
9999px
Border Widths
Hairline
1px
Thin
2px
Base
3px
Shadow / Elevation
Shadow Tokens
No shadow tokens were detected in the Revolut design system extract. Elevation is handled through RUI's internal --rui-shadow-* tokens.
Level 1
--rui-shadow-level1
0 2px 3px rgba(25,28,31,0.05) · subtle cards
Level 2
--rui-shadow-level2
0 3px 8px rgba(25,28,31,0.1) · dropdowns, popovers
Level 3
--rui-shadow-level3
0 3px 30px rgba(25,28,31,0.08) · modals, panels
Z-Index
TokenValueUsage
--z-1-1Background decorations, canvas layers beneath content
--z-21Base content layer
--z-33Elevated elements, sticky navigation, overlays
Breakpoints
--breakpoint-xs
320px
Ultra-small mobile
--breakpoint-sm
400px
Small mobile
--breakpoint-md
719px
Tablet portrait (upper edge)
--breakpoint-lg
720px
Tablet landscape
--breakpoint-xl
1023px
Laptop (upper edge)
--breakpoint-2xl
1024px
Desktop
--breakpoint-3xl
1280px
Large desktop
--breakpoint-bp-8
1920px
Full HD / wide monitors
Opacity
Opacity Tokens
Single token — 70%
--opacity-70
70%
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioRating
Blue 2Dark Gray2.43:1Fail
Blue 2White6.4:1AA
Blue 2Blue2.34:1Fail
Blue 2White 27.04:1AAA
Blue 2Black2.98:1Fail
Mid GrayDark Gray3.51:1AA Large
Mid GrayWhite4.43:1AA Large
Mid GrayBlue1.62:1Fail
Mid GrayWhite 24.87:1AA
Mid GrayBlack4.31:1AA Large
CSS Variables Reference
Background Colors
Dark Gray--color-dark-gray#191C1F
White--color-white#F4F4F4
Blue--color-blue#8D969E
White 2--color-white-2#FFFFFF
Black--color-black#000000
White 3--color-white-3#F7F7F7
White 4--color-white-4rgba(244,244,244,0.1)
Blue 2 (text)--color-blue-2#505A63
Mid Gray (text)--color-mid-gray#717173
Light Gray (border)--color-light-gray#C9C9CD
Blue 3 (gradient)--color-blue-3#4C8ACC
Blue 4 (gradient)--color-blue-4#3991D8
RUI Brand & Semantic
Accent--rui-color-accent#BD0049
Action Blue--rui-color-action-blue#0666EB
Blue--rui-color-blue#494FDF
Green--rui-color-green#067F44
Orange--rui-color-orange#D67200
Red--rui-color-red#E91F0C
Pink--rui-color-pink#DE1B87
Deep Purple--rui-color-deep-purple#7C57F4
Success--rui-color-success#00B88B
Warning--rui-color-warning#EC7E00
Danger--rui-color-danger#E23B4A
Positive--rui-color-positive#09BE67
Negative--rui-color-negative#F54C3E
Typography
Base Font--font-family-baseInter
Marketing Font--font-family-2Aeonik Pro
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
Caption--font-size-2xs12px
Body SM--font-size-xs14px
Body--font-size-sm16px
Body LG--font-size-base18px
Heading LG--font-size-lg24px
Heading XL--font-size-xl32px
Display--font-size-2xl40px
Display XL--font-size-3xl50.09px
Hero--font-size-4xl84.18px
Tight--letter-spacing-tight−2.08px
Normal--letter-spacing-normal−0.6px
Wide--letter-spacing-wide−0.4px
Wider--letter-spacing-wider−0.32px
Widest--letter-spacing-widest−0.24px
LS-6--letter-spacing-ls-6−0.07px
LS-7 Label--letter-spacing-ls-70.12px
LS-8 Caption--letter-spacing-ls-80.18px
Spacing
Space 1--space-11px
Space 2--space-24px
Space 3--space-38px
Space 4--space-410px
Space 5--space-512px
Space 6--space-616px
Space 8--space-818px
Space 10--space-1020px
Space 12--space-1224px
Space 16--space-1626px
Space 20--space-2032px
Space 32--space-3248px
Space 40--space-4056px
Space 48--space-4860px
Space 64--space-6464px
Space 80--space-8066.5px
Space 96--space-9672px
Space 128--space-12880px
Space 160--space-160100px
Space 192--space-192109.43px
Space 256--space-256123.09px
Space 24--space-24237.3px
Space 28--space-28500px
Borders & Radius
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base--border-width-base3px
Small--radius-sm12px
Medium--radius-md20px
Large--radius-lg21.5px 21.5px 0 0
X-Large--radius-xl21.525px
Pill / Full--radius-2xl9999px
Motion, Opacity, Layers & Breakpoints
Instant--duration-instant0.1s
Fast--duration-fast0.15s
Normal--duration-normal0.2s
Slow--duration-slow0.3s
Slower--duration-slower0.35s
Duration 6--duration-duration-60.6s
Ease In Out--easing-ease-in-outease-in-out
Opacity 70--opacity-7070%
Background--z-1-1
Base--z-21
Elevated--z-33
XS--breakpoint-xs320px
SM--breakpoint-sm400px
MD--breakpoint-md719px
LG--breakpoint-lg720px
XL--breakpoint-xl1023px
2XL--breakpoint-2xl1024px
3XL--breakpoint-3xl1280px
BP-8--breakpoint-bp-81920px
Design System Preview · Revolut (Light) · Generated 17/04/2026