# Revolut — Design Reference

> Huge confident type over people and sky, with one charcoal pill

**Theme:** light · **Measured from:** revolut.com/en-US (English, 1440 px)

Revolut sells money like a lifestyle magazine. The page is a stack of full-bleed photographs and black media panels; the headline sits directly on the photo in white Aeonik Pro 500 at almost 88px, with a short white paragraph and one charcoal pill underneath. The interface itself has almost no color: charcoal `#1f1f1f` instead of black for actions and text on white, pure white, and a few soft grays. Color comes only from the photography (a blue sky behind the hero model) and from small floating app cards — a phone-shaped outline with a balance ("$6,012") and a white transaction card — that show the product inside the photo. Everything you can press is a fully rounded pill.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Charcoal | `#1f1f1f` | Primary pill buttons, headings and text on white |
| White | `#ffffff` | Canvas, headlines over photos, app-card surfaces |
| Black | `#000000` | Full-bleed dark media panels |
| Graphite | `#4c4c4c` | Secondary text on white (Charcoal at 80%) |
| Fog | `#ededed` | Small control fills, e.g. region selector (Charcoal at 8%) |
| Frame Line | `#c9c9cd` | Thin outline of the phone-shaped card over the hero |

There is no brand accent in the UI. Keep color in the photos; keep controls charcoal, white and gray.

## Typography

**Aeonik Pro** for headlines, body and buttons. Substitute: **Manrope** (400/500) from Google Fonts.
**Inter** for small print, the region banner and app numbers — free on Google Fonts.

- Headlines are weight 500 with line-height 1 — lines nearly touch. The hero goes to 87.57px with `-2.08px` tracking; section titles are 51.79px with `-0.6px`.
- Headlines are short and punchy, often a twist on a phrase: "Change the way you money", "Life, meet savings", "Your salary, reimagined".
- Body is 18px weight 400, in white over photos or charcoal on white.
- Legal text is everywhere at the bottom of panels: Inter 12px with slight positive tracking (`0.18px`).

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 87.57px | 500 | 1 | -2.08px |
| Heading | 51.79px | 500 | 1 | -0.6px |
| Body large | 18px | 400 | 1.33 | 0 |
| Button | 16px | 500 | 1.375 | 0 |
| Small print | 12px | 400 | 1.5 | 0.18px |

## Shape and spacing

- **Buttons and chips:** fully rounded pill (`9999px`).
- **Floating app card:** 22.5px radius with a 3px `#c9c9cd` outline (the phone silhouette).
- **Small selectors:** 12px radius on a Fog fill.
- **Base unit:** 4px. Scale: 8, 10, 20, 24, 40, 72.
- **Content width:** 1000px, centered; photos and dark panels run full-bleed.
- **Section gap:** panels stack edge to edge, with about 72px of white between some of them.

## Components

### Primary button
Charcoal `#1f1f1f` pill, white text, 40px tall, padding `0 20px`, 16px text. No border, no shadow. Labels: "Download the app", "Move your salary", "Learn more".

### Glass chip
On dark media panels: white at 10% fill, 2px solid white border, white Aeonik 500 16px, pill, padding `10px 24px` (42px tall). Used as category tabs: "Virtual cards", "Wedding", "Moving".

### Navigation / region banner
White bar across the top: close × on the left, a short Inter 12px line ("You're on the United States website…"), then a Fog pill selector with a flag and chevron (12px radius) and a round charcoal arrow button on the right.

### Floating app card
Product UI composited over the hero photo: a tall 22.5px-radius outline in `#c9c9cd` framing a balance ("Personal / $6,012") with a white "Accounts" pill, and below it a white rounded transaction card ("Salary · Today, 11:28 · +$2,550") with a round colored icon.

### Full-bleed media panel
Edge-to-edge photo or video on black, with a white 51.79px headline, short white copy and a pill CTA, and dense white legal text pinned to the bottom.

## Do

- Put the headline straight on a full-bleed photo in white.
- Keep headlines at weight 500, line-height 1, and very large.
- Make every action a charcoal pill; use the glass chip only on dark media.
- Show the product as small floating app cards inside the photo.
- Use `#1f1f1f` instead of pure black for UI and text.
- Keep legal copy small, in Inter, at the bottom of the panel.

## Don't

- Don't add a bright accent color to buttons or headings.
- Don't use square or slightly rounded buttons; pills only.
- Don't put headlines in boxes or cards over the photo.
- Don't use loose line-height on headlines.
- Don't add drop shadows; the site uses none.
- Don't fill the page with product screenshots in frames; the product floats in the photo.

## Layout

Hero: full-bleed photo (blue sky, one person), headline at top-left of a 1000px column, 18px white paragraph and one charcoal pill below, floating app cards centered over the subject. Below, a sequence of full-bleed panels — dark photo/video panels with white headlines ("Elevate your spend", "Life, meet savings") alternating with white panels with charcoal headlines ("Your salary, reimagined", "Your money's safe space") — each with a single CTA and its own legal footnote.

> Capture note: most panels below the hero loaded as empty black or white blocks (lazy media did not render), so the section layout above is inferred from the measured headings and buttons; only the hero is fully visible in the screenshots.

## Agent prompt guide

- Text on white: `#1f1f1f` · Secondary: `#4c4c4c` · Text on photos: `#ffffff`
- Canvas: `#ffffff` · Media panels: `#000000` · Control fill: `#ededed`
- Action: `#1f1f1f` pill with white text · Outline: `#c9c9cd`

Example prompts:

1. "Hero: full-bleed lifestyle photo; headline 'Change the way you money' in Manrope 500 at 88px, line-height 1, letter-spacing -2px, white; 18px white paragraph; one pill button background #1f1f1f, white 16px text, 40px tall, padding 0 20px."
2. "Floating app card over a photo: 3px #c9c9cd outline, 22.5px radius, transparent; inside, a small 'Personal' label, a big white balance '$6,012' and a white pill 'Accounts' with #1f1f1f text."
3. "Dark media panel: full-bleed on #000000 with a photo; 52px Manrope 500 white headline; a row of chips with rgba(255,255,255,.1) fill, 2px solid white border, pill radius, padding 10px 24px; 12px Inter legal text at the bottom."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-charcoal: #1f1f1f;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-graphite: #4c4c4c;
  --color-fog: #ededed;
  --color-frame-line: #c9c9cd;

  /* Fonts */
  --font-display: 'Aeonik Pro', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 87.57px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -2.08px;
  --text-display--font-weight: 500;
  --text-heading: 51.79px;
  --text-heading--line-height: 1;
  --text-heading--letter-spacing: -0.6px;
  --text-heading--font-weight: 500;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.33;
  --text-body-lg--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1.375;
  --text-button--font-weight: 500;
  --text-small: 12px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: 0.18px;
  --text-small--font-weight: 400;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 12px;
  --radius-cards: 22.5px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1000px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-charcoal: #1f1f1f;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-graphite: #4c4c4c;
  --color-fog: #ededed;
  --color-frame-line: #c9c9cd;

  /* Fonts */
  --font-display: 'Aeonik Pro', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 87.57px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: -2.08px;
  --text-display--font-weight: 500;
  --text-heading: 51.79px;
  --text-heading--line-height: 1;
  --text-heading--letter-spacing: -0.6px;
  --text-heading--font-weight: 500;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.33;
  --text-body-lg--font-weight: 400;
  --text-button: 16px;
  --text-button--line-height: 1.375;
  --text-button--font-weight: 500;
  --text-small: 12px;
  --text-small--line-height: 1.5;
  --text-small--letter-spacing: 0.18px;
  --text-small--font-weight: 400;

  /* Radius */
  --radius-buttons: 9999px;
  --radius-inputs: 12px;
  --radius-cards: 22.5px;
  --radius-tags: 9999px;

  /* Spacing */
  --spacing: 4px;

  /* Layout */
  --container-page: 1000px;
}
```

---

*Measured from https://www.revolut.com/en-US/ on 2026-10-28 by Faundr. Inspired by Revolut; not its official design system and not affiliated with Revolut.*