Revolut Design System

Overview

Revolut's marketing canvas operates in a high-contrast two-mode system: a near-black storytelling canvas ({colors.canvas-dark} — #000000) that hosts hero bands, product mockups, and the planning section, alternating with white catalogue bands ({colors.canvas-light} — #ffffff) that host comparison tables, FAQ rows, and download tiles. The two modes switch in full-bleed bands rather than soft transitions; sections slam against each other to create the magazine-spread rhythm the brand is known for.

The display typography is Aeonik Pro at weight 500, used at sizes from 20px to 136px. The flagship hero ("Banking & Beyond", "Join the 70+ million using Revolut") sits at 80–136px with lineHeight: 1.0 and tight negative letter-spacing. Body type is Inter at weight 400 — open-source, no-nonsense, paired with positive tracking (0.24px) on UI labels for slightly more mechanical precision.

The brand accent is {colors.primary} (#494fdf) — a saturated cobalt violet — but it appears scarcely on marketing surfaces. The actual primary CTA on the hero is the white pill on black ("Choose your subscription"), and the cobalt violet is reserved for featured plan cards, secondary CTAs in white sections, and the brand glyph itself. A wide secondary palette of deep teal, light-blue, deep-pink, light-green, warning orange, and yellow appears inside product mockups and feature illustrations — never as button surfaces.

Key Characteristics:

• Two-mode canvas system — {colors.canvas-dark} (true black) for storytelling, {colors.canvas-light} (white) for browsing — switched in full-bleed bands.
• Display typography is Aeonik Pro 500 at sizes 20–136px with tight lineHeight: 1.0 and large negative letter-spacing on display sizes.
• The actual primary CTA is {component.button-primary} — a white pill with black text, sitting on the dark canvas as the brightest pixel. Cobalt-violet {colors.primary} is reserved for featured plan cards and secondary CTAs.
• Eight saturated accent colours live inside product mockups and illustrations only, never as button surfaces — teal #00a87e, light-blue #007bc2, deep-pink #e61e49, light-green #428619, warning orange #ec7e00, yellow #b09000, brown #936d62, danger red #e23b4a.
• All buttons are pill-shaped ({rounded.full}); content cards use {rounded.lg} (20px); inputs and small chips use {rounded.md} (12px).
• Photography is product-led — phone mockups, card mockups, terminal mockups — shown full-bleed inside dark sections with no caption overlay.

Known Gaps

• Pressed/active visual states are documented for button-primary-pressed only; other components rely on focus-ring (browser default) for interactive feedback.
• Logged-in app surfaces (transactions, transfers, account settings) are out of scope — only the public marketing canvas is documented.
• The wide accent palette ({colors.accent-teal} #00a87e through {colors.accent-brown} #936d62) is captured from the extracted token set, but exact usage inside product illustrations varies per market and product line; document per-illustration rather than as system buttons.
• Mobile-app screenshot art direction (phone bezels, status bars) is product-photography territory and not standardised as design tokens.