Design System: Revolut

1. Visual Theme & Atmosphere

Revolut's website is fintech confidence distilled into pixels a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.

The color system is built on a comprehensive --rui-* (Revolut UI) token architecture with semantic naming for every state: danger (#e23b4a), warning (#ec7e00), teal (#00a87e), blue (#494fdf), deep-pink (#e61e49), and more. But the marketing surface itself is remarkably restrained near-black (#191c1f) and pure white (#ffffff) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.

What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius primary dark (#191c1f), secondary light (#f4f4f4), outlined (transparent + 2px solid), and ghost on dark (rgba(244,244,244,0.1) + 2px solid). The padding is generous (14px 32px34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px0.24px), the result is a design that feels both premium and accessible banking for the modern era.

Key Characteristics:

• Aeonik Pro display at 136px weight 500 billboard-scale fintech headlines
• Near-black (#191c1f) + white binary with comprehensive --rui-* semantic tokens
• Universal pill buttons (9999px radius) with generous padding (14px 32px)
• Inter for body text with positive letter-spacing (0.16px0.24px)
• Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning
• Zero shadows detected depth through color contrast only
• Tight display line-heights (1.00) with relaxed body (1.501.56)