Design System
Inspired by Revolut

A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with fintech precision.

Get Started Learn More
01 / Colors

Color Palette

Primary
Revolut Dark
#191c1f
Dark surface, text
White
#ffffff
Light surface
Light
#f4f4f4
Secondary surface
Semantic
Blue
#494fdf
Brand blue
Danger
#e23b4a
Error
Teal
#00a87e
Success
Warning
#ec7e00
Warning
Deep Pink
#e61e49
Critical
Yellow
#b09000
Attention
Neutral
Slate
#505a63
Secondary text
Gray
#8d969e
Muted text
Border
#c9c9cd
Borders
02 / Typography

Typography Scale

Display Mega
Display — 136px / 500 / 1.00 / -2.72px / Aeonik Pro
Section Heading
Section — 48px / 500 / 1.21 / -0.48px / Aeonik Pro
Card Title
Card — 32px / 500 / 1.19 / -0.32px / Aeonik Pro
Body Large — One app for all things money. From spending to saving, to investing and beyond.
Body — 18px / 400 / 1.56 / -0.09px / Inter
Body Semibold — Account details
Semibold — 16px / 600 / 1.50 / +0.16px / Inter
03 / Buttons

Button Variants

Get Started
Primary Dark
Learn More
Secondary Light
Contact
Outlined
Ghost on Dark
Ghost variant on dark surface
04 / Cards

Card Examples

Spending

Track your spending in real-time. Get instant notifications for every transaction.

Saving

Set saving goals and round up spare change automatically into your vaults.

Investing

Buy and sell stocks, crypto, and commodities commission-free from your phone.

05 / Forms

Form Elements

Default
Focus (blue ring)
Error (danger ring)
06 / Spacing

Spacing Scale

4
8
16
24
32
48
80
07 / Radius

Border Radius

12px
20px
pill
08 / Elevation

Depth

Flat
No shadow — Revolut is flat
Focus
0.125rem ring