What is Revolut's primary brand color and how is it used?

Revolut's brand colour is cobalt violet — #494fdf, a fully-saturated indigo. The surprising rule: it almost never appears on the marketing canvas. The primary CTA on every dark hero band is a white pill with black text, not cobalt. The cobalt is reserved for the featured plan card surface (the recommended subscription tier), the brand wordmark, and secondary CTAs inside white-canvas regions. There's a pressed variant at #3a40c4 and a bright variant at #4f55f1 for inline links.

Does Revolut use dark mode on its marketing site?

Revolut runs a two-mode canvas — not a toggle, but a structural rhythm. Pure black #000000 storytelling bands carry hero headlines, plan cards, and product mockups; pure white #ffffff catalogue bands carry FAQ rows, download tiles, and comparison tables. The two switch in full-bleed band boundaries with no soft transitions. Inside dark regions, surfaces step up to #16181a (surface-elevated) for plan cards; that's the only second dark step in the system.

What typography does Revolut use, and what are the substitutes?

The display family is Aeonik Pro at weight 500, used from 20px up to 136px with tight `lineHeight: 1.0` and negative letter-spacing scaling from -0.32px at 32px to -2.72px at 136px. Body type is Inter at weight 400 with positive 0.24px tracking. When Aeonik Pro cannot be licensed, Inter Display, General Sans, or Söhne are credible substitutes — clamp display line-height to 1.0 explicitly and apply -1% letter-spacing. Inter is open-source and can be used directly for body.

What is the shape language of Revolut's design system?

Every button is a pill at radius 9999px (`{rounded.full}`), regardless of size or surface. Content cards including feature cards and plan cards use a 20px radius (`{rounded.lg}`). Form inputs and download tiles use 12px (`{rounded.md}`). Product mockup chrome — the device bezels on phone and POS terminal photography — uses a 28px radius (`{rounded.xl}`). The only square corners in the system are full-bleed hero bands and the footer. There's no shadow language at all — depth comes from canvas switches and surface-luminance shifts.

Can I use this DESIGN.md to build my own fintech React app?

Yes — the file is structured to feed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Revolut's two-mode rhythm, scarce-cobalt discipline, and Aeonik Pro display weights rather than a generic fintech dashboard theme. You can also reference the tokens directly: every colour, type style, radius, and spacing value is a quoted hex or pixel that drops into Tailwind config or CSS variables. The 21 component definitions reference each other by token name so they compose cleanly.

What is missing from this DESIGN.md spec?

A handful of items, documented in the Known Gaps section: pressed and active visual states are only captured for button-primary; other components rely on focus-ring (browser default). Logged-in app surfaces — transactions, transfers, account settings — are out of scope; only the public marketing canvas is documented. The wide accent palette from teal #00a87e through brown #936d62 is captured as tokens, but exact usage inside product illustrations varies per market. Mobile-app screenshot art direction (bezels, status bars) is product-photography territory and not standardised as design tokens.

Revolut Design System

Revolut's design system as a DESIGN.md file.

About Revolut DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source revolut.com

Fintech & Crypto
Banking & Payments

Revolut's marketing surfaces operate on a two-mode rhythm that most fintech sites avoid: full-bleed true-black storytelling bands at #000000 slam directly against pure-white #ffffff catalogue rows, with no soft transitions between them. The brand cobalt-violet #494fdf is famous, but on the marketing site it barely appears — the primary CTA on every dark hero is a white pill with black text, and the cobalt is held back for the featured plan card and the brand wordmark. The display stack is Aeonik Pro at weight 500, used at sizes from 20px up to a 136px hero ("Banking & Beyond") with tight -2.72px letter-spacing and `lineHeight: 1.0`. Body type is Inter at weight 400 with positive 0.24px tracking, which gives UI labels a subtly mechanical precision that fits the fintech context.

This page packages Revolut's marketing canvas into a single DESIGN.md file built on the Google Labs DESIGN.md specification. Inside the spec: 31 colour tokens grouped into brand, surface, text, and semantic; 17 typography tokens spanning display-xxl at 136px down to caption at 13px; 11 spacing tokens climbing from 4px to a 120px hero band; six radius tokens including a 28px corner reserved for product mockup chrome; and 21 component tokens covering buttons, plan cards, hero bands, product mockups, navigation, and the regulatory footer. Every value is quoted as an exact hex, pixel, or millisecond — no Tailwind shorthand, no approximations.

A working React or Next.js developer drops the file into Claude, Cursor, or GitHub Copilot and the agent reproduces Revolut's two-mode rhythm rather than a generic dark-theme dashboard. The tokens map cleanly onto Tailwind config or CSS variables, and component definitions reference each other by name (`{component.plan-card-featured}` resolves to `{colors.primary}` over `{colors.canvas-dark}`). The system is worth studying for one disciplined choice: a famous brand colour that almost never appears, because the white-pill-on-black CTA carries more visual voltage than the cobalt ever could.

What makes it distinct

Two-mode canvastrue black #000000 storytelling bands slam against pure white #ffffff catalogue rows in full-bleed switches
Primary CTA is a white pill on black, not the cobalt accent`#494fdf` is reserved for the featured plan card and brand glyph only
Aeonik Pro 500 runs 20px to 136px with `lineHeight: 1.0` and -2.72px tracking on the flagship hero
Eight saturated accent colours live inside product mockups onlynever as button surfaces or text colours
Zero drop shadowsdepth comes from canvas switches and surface-luminance shifts between `#000000` and `#16181a`

Live at revolut.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

revolut.com

Explore Revolut

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Revolut design system FAQ

Common questions about Revolut's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Revolut in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→