---
title: "Revolut design system"
variant: extended
source: https://www.revolut.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/revolut-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Revolut · Design System

> Global banking, framed in crisp contrast and vivid blue

**Theme:** light · **Industry:** fintech · **Source:** https://www.revolut.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Revolut pairs a vivid blue photographic hero with restrained white content sections and a substantial near-black plan and footer area. Aeonik Pro headlines, compact Inter utility text, and rounded pill controls give the financial homepage a clean, contemporary rhythm.

## North star

Let immersive, high-contrast photography lead, then keep interface elements crisp, pill-shaped, and typographically restrained.

## Overview

The page opens with a full-bleed blue hero photograph, placing large white Aeonik Pro display text over the image and a compact download CTA beneath the supporting copy. The blue gradient belongs to the hero treatment; the measured blue gradient stops are #4c8acc and #3991d8, while photographic color should not be mistaken for additional brand tokens. White sections provide a quiet reset for proof points and security content. Near the bottom, a broad #191c1f plan and footer region creates a strong tonal anchor, with white headings and compact information arranged in columns. Aeonik Pro supplies rounded, confident headlines and body text; Inter appears in small captions and legal or utility links. Layout favors centered, constrained content with occasional full-bleed media. Controls are pill-shaped, cards are rounded, and borders are light and restrained rather than relying on prominent shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas, white content sections, reverse text on the blue hero and dark plan/footer region, and light CTA surfaces. |
| Soft Alloy | `#c9c9cd` | `--color-soft-alloy` | neutral | Muted text and measured hairline borders, especially around cards and secondary information. |
| Pure Ink | `#000000` | `--color-pure-ink` | surface | Inverse surface in dark sections and footer; use for strong contrast, not as the primary text color on white. |
| Graphite Ink | `#1f1f1f` | `--color-graphite-ink` | neutral | Primary text and links on light backgrounds, plus the dark filled download CTA. |
| Night Slate | `#191c1f` | `--color-night-slate` | surface | Large dark plan and footer surface, with light text and compact navigation content. |
| Sky Current | `#4c8acc` | `--color-sky-current` | accent | Upper stop in the measured blue hero-carousel gradient; the hero photograph supplies much of the visible blue. |
| Clear Current | `#3991d8` | `--color-clear-current` | accent | Lower stop in the measured blue hero-carousel gradient, paired with Sky Current. |
| Muted Graphite | `#717173` | `--color-muted-graphite` | semantic | Secondary gray text, including restrained footer and heading details. |
| Pale Divider | `#e4e4e4` | `--color-pale-divider` | semantic | Subtle border tone in measured details; keep dividers quiet and secondary. |
| Midnight Gray | `#4c4c4c` | `--color-midnight-gray` | semantic | Supporting dark-gray text and small detail accents, rather than a large page surface. |
| Coal Edge | `#303336` | `--color-coal-edge` | semantic | Dark footer border and separation detail against the near-black footer surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Pure Ink) · `--color-surface-2` → `#191c1f` (Night Slate) · `--color-text` → `#1f1f1f` (Graphite Ink) · `--color-text-muted` → `#c9c9cd` (Soft Alloy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#c9c9cd` (Soft Alloy) · `--color-accent` → `#4c8acc` (Sky Current) · `--color-accent-2` → `#3991d8` (Clear Current)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1f1f1f` | `#ffffff` | 16.48:1 | AAA |
| `#1f1f1f` | `#000000` | 1.27:1 | fail |
| `#1f1f1f` | `#191c1f` | 1.04:1 | fail |
| `#c9c9cd` | `#ffffff` | 1.65:1 | fail |
| `#c9c9cd` | `#000000` | 12.72:1 | AAA |
| `#c9c9cd` | `#191c1f` | 10.36:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#191c1f` | 17.11:1 | AAA |
| `#4c8acc` | `#ffffff` | 3.61:1 | AA-large |
| `#4c8acc` | `#000000` | 5.81:1 | AA |

### Gradients

- `linear-gradient(rgb(76, 138, 204), rgb(57, 145, 216))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-inter` | webfont | 400, 600, 700 | Compact captions, small links, and utility or legal copy. | Inter |
| Aeonik Pro | `--font-body` | webfont | 400, 500 | Display and section headings, body copy, navigation, and primary CTA labels. | Manrope |

- **Inter:** Use measured regular weight for compact text; slightly open tracking supports small caption and link treatments.
- **Aeonik Pro:** Use medium headline weights with subtly tight tracking; keep case natural and avoid decorative all-caps styling.

### Type scale — Perfect Fifth (ratio ≈ 1.485, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 87.5px | 500 | 1 | -0.024em | — | Aeonik Pro | Oversized hero headline over full-bleed photography. |
| h1 | 52px | 500 | 1 | -0.012em | — | Aeonik Pro | Primary page or major section heading. |
| h2 | 40px | 500 | 1.2 | -0.01em | — | Aeonik Pro | Section titles, including plan selection and editorial blocks. |
| h3 | 24px | 500 | 1.17 | -0.01em | — | Aeonik Pro | Card titles and subordinate content headings. |
| body | 18px | 400 | 1.33 | 0 | — | Aeonik Pro | Hero supporting copy and standard explanatory text. |
| caption | 12px | 400 | 1.5 | 0.015em | — | Inter | Small captions, awards context, and legal notes. |
| nav | 16px | 500 | 1.38 | 0 | — | Aeonik Pro | Main navigation labels and menu items. |
| link | 12px | 400 | 1.5 | 0.015em | — | Inter | Compact informational and footer links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 18, 20, 24, 40, 80 px.
- Section rhythm 64px · element gap 8px · card padding — · max content width 1000px.

Use a centered content frame with a measured maximum width of 1000px, while letting hero photography and major dark bands span the viewport. The hero aligns headline and copy to the left over centered subject imagery; later content returns to more restrained centered or column-based arrangements. Maintain a comfortable density with an 8px base spacing unit, measured 64px section gap, and clear separation between white content and the dark plan/footer block. Pricing content is denser and multi-column; keep its hierarchy legible.

## Shape & elevation

- Radius: button `9999px` · card `23px` · media `23px` · nav `9999px` · xs `12px` · sm `20px` · md `23px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.15, 0.5, 0.5, 1)` on interactive elements.

The interface reads mostly flat: broad color fields and photography provide depth rather than heavy shadows. Cards use generous rounded corners, and measured card borders are light gray. Pill buttons create clear, compact control silhouettes. Layered account UI on the hero is outlined and legible against the image; preserve contrast without adding unmeasured shadow treatments.

## Imagery

Use cinematic, full-bleed lifestyle photography as the primary hero device, with a person framed prominently against a saturated blue background. Product-account interface elements can layer over the photograph as crisp outlined panels. Further down, large video or photographic sections create an atmospheric transition; keep image color and awards artwork distinct from the core brand palette.

## Components

### Hero navigation

Place brand and primary menu over the blue hero, with light navigation labels and a contrasting sign-up pill.

### Download CTA

Use a dark #1f1f1f pill with white text; measured buttons use 16px Aeonik Pro and 10px 24px padding.

### Hero account overlay

Layer a fine outlined account panel and compact account details over the lifestyle image, keeping the subject visible.

### Trust and award strip

Set proof points on white with small logos and compact captions; treat logo colors as supplied artwork, not page palette.

### Security media section

Use broad cinematic media and minimal surrounding interface to create an atmospheric break between content areas.

### Plan cards

Present multiple tiers on #191c1f with light text, rounded card shapes, compact descriptions, and clear plan hierarchy.

### Footer columns

Organize dense navigation and legal links into columns on a dark surface, using small muted text and subtle separators.

### Measured component styles

- **Primary button** (“Download the app”): background #1f1f1f · text #ffffff · radius 9999px · padding 10px 24px · 500 16px Aeonik Pro
- **Secondary button** (“Explore Savings”): background #ffffff · text #000000 · radius 9999px · padding 10px 24px · 500 16px Aeonik Pro
- **Link** (“Instant Access Savings T&Cs”): transparent background · text #1f1f1f · radius 0px · padding 0px · 400 12px Inter
- **Card**: transparent background · text #1f1f1f · border 3px solid #c9c9cd · radius 22.5px · padding 0px · 400 16px -apple-system
- **Navigation item** (“Personal Business Kids & Teens Company L”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px -apple-system

## Do

- Use the measured blue gradient only as a hero treatment.
- Keep hero headlines large, white, and clearly readable over photography.
- Use Aeonik Pro for prominent headings and primary interface text.
- Reserve Inter for compact captions, links, and legal details.
- Separate white editorial sections from the near-black plan and footer band.
- Use rounded pill silhouettes for prominent buttons.

## Don't

- Do not treat colors inside photographs or award logos as brand palette tokens.
- Do not add unmeasured accent colors to interface elements.
- Do not rely on heavy drop shadows for card hierarchy.
- Do not make all content blocks full-bleed; preserve quiet white sections.
- Do not let dense footer links compete with the main heading hierarchy.
- Do not use sharp, square buttons in place of the measured pill controls.

## Agent prompt

Build a new fintech page in Revolut’s visual style. Use Gallery White (#ffffff) for clean content bands, Graphite Ink (#1f1f1f) for primary text and dark CTAs, and Night Slate (#191c1f) for a substantial dark information section. For a vivid media-led hero, use the measured gradient stops Sky Current (#4c8acc) and Clear Current (#3991d8), or place them behind photographic imagery. Set headlines and core interface text in Aeonik Pro or Manrope; use Inter for compact captions and utility links. Keep a centered content frame, with full-bleed hero media and generous separation between sections. Use rounded pill buttons and restrained card borders, not heavy shadows. Make the photographic subject and headline dominant, keep secondary copy concise, and reserve dense multi-column layouts for plans or the footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed blue photographic hero, with left-aligned white headline and copy over a centered person. | Download app CTA, Overlaid account preview | White headline, Dark pill button, Thin outlined account panel |
| 2 | video | Single-column content with a broad cinematic media area and restrained surrounding copy. | Media-led storytelling, Security information link | Full-width imagery or video, Minimal text treatment |
| 3 | pricing | Centered plan heading and multi-column cards above dense footer navigation on a near-black background. | Compare plan tiers, Follow plan links | Dark surface, Rounded plan cards, Compact footer columns |

## Source CSS custom properties (selected)

```css
--website-color-grouped-background: rgb(247, 247, 247);
--website-color-rating: rgb(251, 199, 10);
--website-color-green-text: rgb(0, 100, 0);
--website-color-red-text: rgb(139, 0, 0);
--website-color-blue-text: rgb(55, 108, 213);
--website-feature-scroll-foreground: #191c1f;
--website-color-widget-background: rgba(241, 242, 244, 0.8);
--website-feature-items-carousel-card-border: none;
--website-hero-carousel-background: linear-gradient(rgb(76 138 204),rgb(57 145 216));
--website-layout-background-channel: 255 255 255;
--website-navigation-header-background: rgba(255, 255, 255, 0.7);
--website-navigation-menu-default-background: rgba(255, 255, 255, 0.15);
--website-navigation-menu-background: rgba(0, 0, 0, 0.5);
--website-navigation-button-background: rgba(31, 31, 31, 0.15);
--website-navigation-button-hover-background: rgba(0, 0, 0, 0.15);
--website-sales-banner-background: linear-gradient(90deg,#1227fd,#6fa0ff);
--website-sales-banner-text: rgb(244, 244, 244);
--website-shadow-level-5: 0 14px 28px 0 rgba(25,28,31,0.04),0 8px 16px 0 rgba(25,28,31,0.04),0 -1px 0 0 rgba(25,28,31,0.04);
--website-news-card-background: rgb(255 255 255/0.8);
--website-news-card-caption-color: rgb(31 31 31/0.7);
--website-news-card-title-color: #1f1f1f;
--website-news-card-description-color: rgb(31 31 31/0.7);
--website-news-card-button-background: rgb(31 31 31/0.9);
--website-type-slider-tabs-foreground: #1f1f1f;
--website-type-slider-marquee-title-foreground: #1f1f1f;
--rui-duration-xs: 100ms;
--rui-duration-sm: 200ms;
--rui-duration-md: 300ms;
--rui-duration-lg: 450ms;
--rui-duration-xl: 900ms;
--rui-duration-skeleton: 1500ms;
--rui-easing-shadow: cubic-bezier(0.4,0.3,0.8,0.6);
--rui-timing-shadow: 200ms cubic-bezier(0.4,0.3,0.8,0.6);
--rui-font-default: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Helvetica,Arial,Arimo,sans-serif;
--rui-font-system: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Helvetica,Arial,Arimo,sans-serif;
--rui-font-brand: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Helvetica,Arial,Arimo,sans-serif;
--rui-font-emoji: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--rui-font-size-marketing-display1: 3.5rem;
--rui-font-size-marketing-display2: 2.5rem;
--rui-font-size-marketing-display3: 2rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/revolut-com