# Design Reference - Revolut
> financial passport to the world

## Source
- Original site: https://revolut.com
- Captured: 2026-04-11T17:44:47.958Z

## Tags
- cinematic
- monochrome
- aspirational
- geometric
- minimalist
- tech-forward
- high-contrast

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Revolut Black | `#191c1f` | neutral | Primary text, dark CTA backgrounds, footers, borders. Establishes a deep, serious foundation. |
| Cloud White | `#f4f4f4` | neutral | Primary light CTA backgrounds, some page sections. A soft off-white that feels less stark than pure white. |
| Pure White | `#ffffff` | neutral | Primary page background, text on dark surfaces. |
| Onyx Black | `#000000` | neutral | Text on light CTA buttons, some secondary CTA backgrounds. |
| Slate Gray | `#8d969` | neutral | Secondary body text, disabled states, helper text. |
| Ash | `#505a63` | neutral | Tertiary text, subtle UI elements. |
| Pebble | `#c9c9cd` | neutral | Borders and dividers. |
| Light-Tint | `#ebebf0` | neutral | Subtle button backgrounds and hover states. |

## Typography
- role: All major headings (H1-H4) and display text. Its slightly condensed and geometric form creates a modern, architectural feel. The signature use of tight negative letter-spacing at large sizes is critical to its identity.; sizes: 16px, 18px, 24px, 32px, 40px, 53px, 89px; family: Aeonik Pro; weight: 400, 500; lineHeight: 1.00, 1.17, 1.19, 1.20, 1.33, 1.38; substitute: Sohne, Neue Haas Grotesk; letterSpacing: -2.05px at 89px, -0.58px at 53px, normal at smaller sizes
- role: Body copy, button text, labels, captions, and legal text. A neutral, highly-legible workhorse font that recedes to let headings and imagery stand out.; sizes: 12px, 14px, 16px; family: Inter; weight: 400, 600, 700; lineHeight: 1.20, 1.50, 1.57; substitute: Inter, San Francisco, Roboto; letterSpacing: Slightly negative for bold weights, slightly positive for regular weights.

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "20px",
      "inputs": "12px",
      "buttons": "9999px",
      "ui-mockups": "22.5px"
    },
    "elementGap": "",
    "sectionGap": "96px",
    "cardPadding": "24px",
    "pageMaxWidth": "1200px"
  },
  "radius": {
    "cards": "20px",
    "inputs": "12px",
    "buttons": "9999px",
    "ui-mockups": "22.5px"
  }
}
```

## Component Patterns
- name: Button Group — Primary Dark, Primary Light, Ghost
- name: Social Proof — Stats & Awards Block
- name: Savings Feature Card — Interest Rate CTA
- name: Primary CTA Button (Light); role: The main sign-up and affirmative action button.
- name: Primary CTA Button (Dark); role: The main action button for use on dark or photographic backgrounds.
- name: Ghost Button (On Dark); role: Secondary action on dark or photographic backgrounds, like 'Explore'.
- name: Navigation Link Button; role: Top-level navigation items in the header.
- name: Language Selector Button; role: Small utility button for selecting country/region.
- name: App UI Frame; role: A container that visually represents the mobile app screen.
- name: Award Logo Card; role: Container for displaying third-party award and partner logos.

## Do
- Use Aeonik Pro with significant negative letter-spacing for all display and headline text.
- Restrict the palette almost exclusively to white (#ffffff), off-white (#f4f4f4), black (#000000), and near-black (#191c1f).
- Employ full-bleed, cinematic photography for all hero sections.
- Always use 9999px radius pill-shaped buttons for primary and secondary actions.
- Center-align all headline and sub-headline text blocks within their sections.
- Juxtapose full-bleed photo sections with stark, solid #ffffff background sections.
- Maintain generous vertical whitespace (96px+) between major page sections.

## Don't
- Do not introduce any saturated brand or accent colors. The photos provide the only color.
- Do not use box-shadows for elevation. The design is intentionally flat.
- Do not use traditional, sharp-cornered (e.g., 4px-8px radius) buttons.
- Do not use system fonts like Arial or Helvetica for headlines; it will break the brand identity.
- Do not left-align hero content. The centered stack is a core pattern.
- Do not use complex card layouts. Keep content blocks simple and direct.
- Do not make content containers full-width; use the 1200px max-width for readability.