Design System

Money without
the complexity.

Clean fintech precision with bright surfaces, confident blue accents, and compact typographic hierarchy. Built for trust and clarity.

15 color tokens 11 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with a single strong blue accent. 15 tokens across surfaces, text hierarchy, interactive states, and semantic feedback colors.

Pure White
#ffffff
Primary background, cards
Snow
#f7f8fa
Secondary sections
Platinum
#f0f1f5
Borders, dividers
Iron
#e6e8eb
Disabled, inactive
Slate
#c4c8cc
Placeholders
Ash
#8b9199
Secondary text
Graphite
#6b727a
Captions, metadata
Charcoal
#191C1F
Primary text, headings
Revolut Blue
#0075EB
Actions, links, brand
Blue Hover
#0066cc
Interactive hover
Blue Light
#e8f2fc
Selected states
Success Green
#00b578
Positive states
Warning Amber
#ff8c00
Warning states
Error Red
#e5484d
Error states

Gradients

gradient-blue
Hero gradients, premium highlights
gradient-blue-light
Subtle section backgrounds
surface-blue
Feature card subtle blue tint
Typography

Type Scale

Plus Jakarta Sans for headings, Inter for body text, JetBrains Mono for financial data. Compact scale optimized for data-dense fintech interfaces.

Display-lg One app, all things money 48px / 1.0 / -0.03em
Display Send money globally 40px / 1.1 / -0.03em
Heading-lg Your finances, simplified 32px / 1.1 / -0.02em
Heading Account overview 24px / 1.2 / -0.02em
Heading-sm Transaction details 20px / 1.3 / -0.01em
Subheading Available balance 18px / 1.4 / -0.01em
Body Default body text for readable content 15px / 1.6 / 0
Body-sm Secondary descriptions, helper text 14px / 1.5 / 0
Label Form labels, navigation items 13px / 1.4 / 0.01px
Caption Meta info · Footer · Labels 12px / 1.5 / 0.02px

Fonts

Display Plus Jakarta Sans 400-800 · Headings
Body Inter 400-600 · UI, body text
Mono JetBrains Mono 400-500 · Financial data
Fallback system-ui Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Compact density with clear visual rhythm. 14-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

22px
44px
88px
1212px
1616px
2424px
3232px
4848px
8080px

Border Radius

sm 6px
default 8px
input 10px
buttons 12px
cards 16px
pill 100px

Shadows

Flat 1px border
Subtle cards on hover
Medium dropdowns
Elevated modals
Elevation

Surface System

Clean borders over shadows. White-first hierarchy with subtle blue accent for selected states. 4 distinct surface levels.

Pure White #ffffff
Snow #f7f8fa
Platinum #f0f1f5
Blue Light #e8f2fc
Components

Button Variants

Primary (Revolut Blue), secondary (outlined), and ghost variants. Consistent 12px radius with clear interaction hierarchy.

Primary Action Button
Main call to action — highest visual weight
.btn-primary
Revolut Blue (#0075EB) background, Pure White text, 12px radius. Use exclusively for the single most important action on screen.
Secondary Button
Alternative actions, secondary CTAs
.btn-secondary
Pure White background, Revolut Blue text, 1px Revolut Blue border. Clear secondary path without competing with primary.
Ghost Button
Tertiary actions, navigation
.btn-ghost
Revolut Blue text, transparent background, no border. Minimal visual weight for less prominent actions.
Card
Content containers, feature blocks
.card
Instant transfers
Send money to anyone in seconds, anywhere in the world.
Pure White background, 16px radius, 20px padding, 1px Platinum border. Clean containers for content grouping.
Input Field
Text input, form fields
input
Pure White background, Charcoal text, 10px radius. Focus state shows Revolut Blue border.
Pill Tag
Status indicators, category labels
.pill-tag
Active Completed Pending Failed
Pill shape (100px radius), 4px/12px padding. Color-coded for status: blue for info, green for success, amber for warning, red for error.
Guidelines

Do's & Don'ts

Do — Embrace
  • Pure White (#ffffff) as the primary canvas
  • Revolut Blue (#0075EB) for all interactive elements
  • Charcoal (#191C1F) for all primary text
  • 12px radius for buttons, 16px for cards
  • 4px-based spacing with compact density
  • JetBrains Mono for financial data
  • Clean borders over heavy shadows
Don't — Avoid
  • Blue backgrounds on large surfaces
  • Multiple accent colors for interactions
  • Decorative gradients on functional elements
  • Border radius smaller than 8px
  • Heavy drop shadows
  • Display weights for body text
  • Mono fonts for non-data content