Dark Mode

# 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

Phone number
Default
Email
Focus (blue ring)
Amount
Error (danger ring)
Note

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