--- name: Revolut tagline: 'Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness.' updated_at: 2026-05-28T22:15:20.985Z published_at: 2026-05-28T22:15:20.985Z author: webdesignhot source_url: https://www.revolut.com spec: webdesignhot/0.1 quality: curated featured: false categories: [saas] tags: [dark, bold, sans, fintech, gradient] preview_swatch: ['#ffffff', '#191c1f', '#5f43ff'] related: [] description: 'Revolut''s site is a study in two-register contrast: a near-black hero (`#191c1f`) where a single white Aeonik Pro headline floats at ~86px / weight 500, then white content sections (`#ffffff`) where everything resets to crisp Inter body type on the same near-black ink. The brand is the UK fintech super-app — banking, currency, crypto, stocks, travel, business — and the design reflects that breadth with a calm, premium restraint rather than fintech-neon loudness. The signature gestures are: fully-pill CTAs (radius 9999px) that read as soft, friendly capsules; the Aeonik Pro / Inter pairing that splits display authority (geometric, slightly humanist Aeonik Pro) from running-text legibility (workhorse Inter); and gradient accents — electric violet-into-blue washes — that bloom behind product mockups and card art without ever taking over the type. Where Monzo goes hot-coral and Cash App goes acid-green, Revolut goes monochrome-plus-gradient: near-black and white do the structural work, and colour arrives only as luminous, premium accent. The result feels like a sleek metal card rendered as a website — quiet, expensive, global.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand accent: accent muted: text-muted border: border ring: focus-ring colors: bg: '#ffffff' # primary white content canvas bg-dark: '#191c1f' # near-black hero / dark section ground bg-dark-deep: '#0e1013' # deepest near-black for footer / max-contrast bands surface: '#ffffff' # default card surface on white surface-subtle: '#f7f7f8' # faint grey card / alternating section band surface-muted: '#eff0f1' # input rest fill, chips on light surface-dark: '#23272b' # +1 elevated surface on the dark ground surface-dark-2: '#2d3237' # +2 elevated surface on dark text: '#191c1f' # primary near-black ink on white text-body: '#3a3f44' # running body grey-black on white text-muted: '#5f676e' # captions, metadata on white text-subtle: '#8d969e' # disabled / lowest hierarchy on white text-on-dark: '#ffffff' # white ink on the dark hero text-on-dark-muted: 'rgba(255, 255, 255, 0.72)' # body on dark hero text-on-dark-subtle: 'rgba(255, 255, 255, 0.48)' # captions on dark brand: '#191c1f' # Revolut primary — near-black ink, the structural brand colour brand-on-dark: '#ffffff' # the brand inverted to white on dark grounds accent: '#5f43ff' # electric violet — primary gradient accent accent-blue: '#2868ff' # gradient terminus blue accent-pink: '#ff4d97' # warm gradient bloom on premium/Ultra art accent-soft: 'rgba(95, 67, 255, 0.10)' # violet at 10% — informational tint on-brand: '#ffffff' # white text on near-black CTA fill on-brand-light: '#191c1f' # near-black text on white CTA (on dark sections) link: '#191c1f' # default link = near-black, underlined link-accent: '#5f43ff' # accent-violet link in product copy link-on-dark: '#ffffff' # link on dark hero border: '#e2e4e6' # default 1px hairline on white border-strong: '#c9cdd1' # input border, focused divider on white border-soft: '#f0f1f2' # softest section divider border-on-dark: 'rgba(255, 255, 255, 0.16)' # hairline on dark grounds semantic-success: '#1f8f4e' # positive balance, success green semantic-warning: '#c77700' # caution amber semantic-danger: '#d92d20' # error / spend red semantic-info: '#2868ff' # informational blue focus-ring: 'rgba(95, 67, 255, 0.55)' # 3px violet focus ring shadow-ambient: 'rgba(16, 18, 21, 0.06)' # faint ambient on white cards shadow-soft: 'rgba(16, 18, 21, 0.10)' shadow-standard: 'rgba(16, 18, 21, 0.14)' shadow-elevated: 'rgba(16, 18, 21, 0.20)' typography: display: family: '"Aeonik Pro", system-ui, -apple-system, sans-serif' weights: [500, 600, 700] opentype-features: ['kern', 'liga'] body: family: 'Inter, system-ui, -apple-system, sans-serif' weights: [400, 500, 600] opentype-features: ['kern', 'liga', 'cv11'] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] opentype-features: ['tnum'] scale: display-hero: { size: 86, weight: 500, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 64, weight: 500, lineHeight: 1.04, tracking: '-0.025em', family: display } display-md: { size: 48, weight: 500, lineHeight: 1.08, tracking: '-0.02em', family: display } h1: { size: 40, weight: 600, lineHeight: 1.1, tracking: '-0.018em', family: display } h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display } h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } title-sm: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-strong: { size: 16, weight: 600, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } eyebrow: { size: 12, weight: 600, lineHeight: 1.2, tracking: '0.08em', family: body } button: { size: 16, weight: 600, lineHeight: 1.2, tracking: '0', family: body } nav-link: { size: 15, weight: 500, lineHeight: 1.4, tracking: '0', family: body } money: { size: 56, weight: 500, lineHeight: 1.05, tracking: '-0.02em', family: display, opentype: 'tnum' } money-inline: { size: 16, weight: 500, lineHeight: 1.4, tracking: '0', family: body, opentype: 'tnum' } legal: { size: 12, weight: 400, lineHeight: 1.5, tracking: '0', family: body } radius: none: 0 micro: 2 sm: 4 md: 8 lg: 12 xl: 16 xxl: 24 pill: 9999 spacing: base: 4 scale: { xxs: 4, xs: 8, sm: 12, base: 16, md: 24, lg: 32, xl: 48, xxl: 64, section: 96, hero: 120 } layout: page-width: 1280 prose-width: 720 header-height: 64 components: button-primary: { bg: brand, text: on-brand, padding: '14px 28px', height: 48, radius: pill, font: button } button-primary-on-dark: { bg: text-on-dark, text: on-brand-light, padding: '14px 28px', height: 48, radius: pill, font: button } button-secondary: { bg: surface-muted, text: text, padding: '13px 27px', height: 48, radius: pill, font: button } button-ghost: { bg: transparent, text: text, border: '1px solid border-strong', padding: '13px 27px', height: 48, radius: pill, font: button } button-tertiary: { bg: transparent, text: brand, font: button } card: { bg: surface, border: '1px solid border', radius: xl, padding: md } card-subtle: { bg: surface-subtle, radius: xxl, padding: lg } card-gradient: { bg: 'linear-gradient(135deg, accent, accent-blue)', text: text-on-dark, radius: xxl, padding: lg } badge-pill: { bg: accent-soft, text: accent, radius: pill, padding: '4px 12px', font: caption } input: { bg: surface-muted, border: '1px solid border-strong', text: text, radius: md, padding: '12px 16px', height: 48 } top-nav: { bg: bg, text: text, height: 64, font: nav-link } top-nav-dark: { bg: bg-dark, text: text-on-dark, height: 64, font: nav-link } footer: { bg: bg-dark-deep, text: text-on-dark-muted, padding: '64px 0', font: body-sm } motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 duration-reveal: 600 reduced-motion: 'respects prefers-reduced-motion: reduce — gradient drift, parallax mockups, scroll-reveal fades, and number count-ups collapse to static end-states' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: 'rgba(16, 18, 21, 0.06) 0 1px 2px' soft: 'rgba(16, 18, 21, 0.10) 0 4px 12px' standard: 'rgba(16, 18, 21, 0.14) 0 12px 28px -6px' elevated: 'rgba(16, 18, 21, 0.20) 0 28px 56px -12px' ring: '0 0 0 3px rgba(95, 67, 255, 0.55)' accessibility: contrast-text-on-bg: 15.6 contrast-on-brand-on-brand: 15.6 contrast-body-on-bg: 9.6 contrast-text-on-dark: 14.9 focus-ring: '3px solid rgba(95, 67, 255, 0.55) with 2px offset' reduced-motion-honored: true min-target: 44 dark-mode: dual --- ## 1. Visual Theme & Atmosphere Revolut's site runs on a **two-register contrast system**: a near-black hero (`#191c1f`) and white content (`#ffffff`), with the same near-black ink threading through both. The hero is the brand's loudest gesture — a deep, slightly-blue-warm near-black ground onto which a single white **Aeonik Pro** headline floats at roughly 86px and weight 500. That weight choice matters: 500 is medium, not bold, so the hero reads as *poised* rather than shouting. It is the typographic posture of a premium metal card, not a startup banner. Below the fold, the site resets to white sections where everything is built in **Inter** at body sizes on the same `#191c1f` ink, and the mood shifts from cinematic to clean-product-explainer. The brand is the UK fintech **super-app** — current accounts, multi-currency exchange, crypto, stock trading, travel eSIMs, business banking, and the premium **Ultra** tier all live under one roof. A lesser design would fragment under that breadth; Revolut holds it together with **monochrome restraint plus gradient accent**. Near-black and white do all the structural work — backgrounds, type, dividers, the grid — and colour arrives only as luminous, intentional accent: electric **violet** (`#5f43ff`) bleeding into **blue** (`#2868ff`), occasionally warmed by pink (`#ff4d97`) on the most premium product art. These gradients bloom *behind* phone mockups and card renders; they never colour the type, and they never compete with the headline. The signature shape is the **fully-pill CTA** (radius 9999px). Every primary button is a soft capsule — near-black fill with white label on light sections, white fill with near-black label on the dark hero. The pill geometry is friendly and unmistakably consumer-fintech, but Revolut keeps it disciplined: pills are for actions, while cards and surfaces use a calmer 16–24px radius family. The combination — sharp-ish cards, soft-round buttons — gives the surface its characteristic *expensive calm*. Pacing alternates **dark cinematic moments** with **white explanatory bands**. The page opens dark (hero), drops to white (feature grid, comparison tables, FAQ), then occasionally returns to dark for a premium-tier showcase or the footer. The dark sections are where the gradient-accented product imagery lives — metal cards catching violet light, globe visualisations, currency tickers — and the white sections are where the rational, legible product argument is made in Inter. This dark/light rhythm is the brand's structural heartbeat. The overall atmosphere is **sleek, global, and quietly expensive**. Where Monzo goes hot-coral and Cash App goes acid-green-on-black, Revolut deliberately under-saturates: it wants to look like the *grown-up* fintech, the one you'd trust with a salary and a stock portfolio, not just lunch-money splits. The Aeonik Pro / Inter pairing reinforces this — a slightly-humanist geometric display face for authority, a neutral workhorse for trust — and the gradient is the only place the brand lets itself glow. **Key Characteristics:** - Two-register layout: near-black hero (`#191c1f`) + white content (`#ffffff`), same ink in both - White Aeonik Pro hero headline at ~86px / weight 500 — medium, poised, not bold - Aeonik Pro (display) + Inter (body) pairing — authority split from legibility - Near-black `#191c1f` as the structural brand colour; never neon - Fully-pill CTAs at radius 9999px — soft capsules, inverted by section - Gradient accents (violet `#5f43ff` → blue `#2868ff`) bloom behind imagery, never on type - Cards use a calmer 16–24px radius — sharp-ish surfaces against round buttons - Generous whitespace; headlines breathe, sections separated by 96px+ - Monochrome-plus-gradient discipline — colour is accent, never structure - Premium "metal card rendered as a website" mood — global, expensive, calm ## 2. Color Palette & Roles ### Canvas - **White** (`#ffffff` → `--bg`, `--surface`): Primary content canvas; the default ground for all explanatory sections. - **Near-Black Hero** (`#191c1f` → `--bg-dark`): The dark hero / dark-section ground; warm-blue near-black, not pure black. - **Deep Near-Black** (`#0e1013` → `--bg-dark-deep`): Deepest ground for footer and maximum-contrast bands. - **Subtle Surface** (`#f7f7f8` → `--surface-subtle`): Faint grey for alternating section bands and quiet cards. ### Text - **Ink** (`#191c1f` → `--text`): Primary near-black headline + heavy text on white. - **Body** (`#3a3f44` → `--text-body`): Running paragraph grey-black on white. - **Muted** (`#5f676e` → `--text-muted`): Captions, metadata, secondary labels. - **Subtle** (`#8d969e` → `--text-subtle`): Disabled state and lowest hierarchy on white. - **On-Dark Ink** (`#ffffff` → `--text-on-dark`): White headline + body on the dark hero. - **On-Dark Body** (`rgba(255,255,255,0.72)` → `--text-on-dark-muted`): Running body on dark. - **On-Dark Subtle** (`rgba(255,255,255,0.48)` → `--text-on-dark-subtle`): Captions on dark. ### Brand - **Brand / Primary** (`#191c1f` → `--brand`): The structural brand colour — near-black ink. Drives the primary CTA fill on light, the hero ground, and all heavy type. Revolut's "brand colour" is not a hue; it is this near-black. - **Brand on Dark** (`#ffffff` → `--brand-on-dark`): The brand inverted — white becomes the primary on dark grounds, where the CTA fills white. ### Accent (Gradient System) Revolut's only chromatic voice. Accents appear as gradients behind imagery and as occasional link/highlight colour — never as background structure or body type. - **Accent Violet** (`#5f43ff` → `--accent`): Primary accent and gradient start; focus ring, in-copy product links. - **Accent Blue** (`#2868ff` → `--accent-blue`): Gradient terminus; informational semantic. - **Accent Pink** (`#ff4d97` → `--accent-pink`): Warm bloom on premium / Ultra card art. - **Accent Soft** (`rgba(95,67,255,0.10)` → `--accent-soft`): Violet at 10% — informational badge tint. ### Interactive - **Link** = Ink `#191c1f`, underlined at rest in running copy; thicker underline on hover. - **Accent Link** — `#5f43ff` for product/feature links inside marketing copy. - **Link on Dark** — `#ffffff`, underlined on the dark hero. - **CTA Hover (light)** — near-black fill lifts to `#23272b`; subtle soft shadow blooms. - **CTA Hover (dark)** — white fill dims to `rgba(255,255,255,0.92)`. - **Disabled** — `#eff0f1` fill, `#8d969e` text, no shadow. - **Selected chip** — `accent-soft` bg with `#5f43ff` text. ### Neutral Scale (Light) `#ffffff` (Canvas) → `#f7f7f8` (Subtle) → `#eff0f1` (Muted fill) → `#e2e4e6` (Border) → `#c9cdd1` (Border Strong) → `#8d969e` (Text Subtle) → `#5f676e` (Muted) → `#3a3f44` (Body) → `#191c1f` (Ink). On dark, the scale is `#0e1013` → `#191c1f` → `#23272b` → `#2d3237`. ### Surface & Borders - **Surface** (`#ffffff` → `--surface`): Default card on white. - **Subtle Surface** (`#f7f7f8` → `--surface-subtle`): Quiet card / alternating band. - **Muted Surface** (`#eff0f1` → `--surface-muted`): Input rest fill, secondary button fill, chips. - **Surface Dark** (`#23272b` → `--surface-dark`): +1 elevated surface on dark. - **Surface Dark 2** (`#2d3237` → `--surface-dark-2`): +2 elevated surface on dark. - **Border** (`#e2e4e6` → `--border`): Default 1px hairline on white. - **Border Strong** (`#c9cdd1` → `--border-strong`): Input border, focused divider. - **Border Soft** (`#f0f1f2` → `--border-soft`): Softest section divider. - **Border on Dark** (`rgba(255,255,255,0.16)` → `--border-on-dark`): Hairline on dark grounds. ### Shadow Colors Light-mode shadows are **low-opacity warm-black** — `rgba(16, 18, 21, 0.06–0.20)`, tuned to the near-black ink so shadows feel like a deepening of the brand colour rather than a generic grey. The accent gradient never casts a coloured shadow; the only "glow" in the system is the violet focus ring. ### Semantic - **Success** (`#1f8f4e` → `--semantic-success`): Positive balance, transfer complete. - **Warning** (`#c77700` → `--semantic-warning`): Caution amber. - **Danger** (`#d92d20` → `--semantic-danger`): Error, declined, spend-alert red. - **Info** (`#2868ff` → `--semantic-info`): Informational blue (shares the accent-blue hue). ## 3. Typography Rules ### Font Family **Display: Aeonik Pro** — a slightly-humanist geometric grotesque (CoType Foundry), used for every headline tier from the 86px hero down to the 24px h3. Its medium-weight cuts give Revolut its poised authority; the brand favours **weight 500–600** for display rather than heavy 700, which keeps the dark hero looking premium rather than shouty. Weights deployed: 500, 600, 700. **Body: Inter** — the neutral workhorse for all running text, labels, captions, and most UI chrome (h4 and below switch from Aeonik Pro to Inter). Inter's high x-height and broad legibility carry the dense explanatory copy of a super-app. The `cv11` stylistic set (single-storey lowercase a alternates) is occasionally enabled for a softer feel. Weights: 400, 500, 600. **Fallback chains**: display `"Aeonik Pro", system-ui, -apple-system, sans-serif`; body `Inter, system-ui, -apple-system, sans-serif`. Both hand off to the platform UI font, which keeps the dark/light contrast intact even before webfonts load. **Mono: system mono** — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`, reserved for the rare code reference or API snippet. Money figures do **not** use mono — Revolut renders balances in Aeonik Pro with `tnum` (tabular figures) so amounts feel like part of the brand voice, not a terminal. Weights: 400, 500. **OpenType features**: `kern` + `liga` always on across both families; `tnum` on money figures so columns of amounts align; `cv11` optional on Inter. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---------------|------------|------|--------|-------------|----------------|-------------|---------------------------------------------| | display-hero | Aeonik Pro | 86 | 500 | 1.0 | -0.03em | kern, liga | Dark-hero headline — white, poised, medium | | display-lg | Aeonik Pro | 64 | 500 | 1.04 | -0.025em | kern, liga | Large section hero | | display-md | Aeonik Pro | 48 | 500 | 1.08 | -0.02em | kern, liga | Product-section opener | | h1 | Aeonik Pro | 40 | 600 | 1.1 | -0.018em | kern | Page title on white | | h2 | Aeonik Pro | 32 | 600 | 1.2 | -0.012em | kern | Section heading | | h3 | Aeonik Pro | 24 | 600 | 1.25 | -0.005em | kern | Card / subsection title | | h4 | Inter | 20 | 600 | 1.3 | 0 | — | Inter takes over below 24px | | title-sm | Inter | 18 | 600 | 1.35 | 0 | — | List heading | | body-lg | Inter | 18 | 400 | 1.55 | 0 | — | Lead paragraph | | body | Inter | 16 | 400 | 1.55 | 0 | — | Default running body | | body-strong | Inter | 16 | 600 | 1.55 | 0 | — | Inline emphasis | | body-sm | Inter | 14 | 400 | 1.5 | 0 | — | Secondary body | | label | Inter | 13 | 500 | 1.4 | 0 | — | Form labels, table headers | | caption | Inter | 12 | 500 | 1.4 | 0.02em | — | Metadata, footnotes | | eyebrow | Inter | 12 | 600 | 1.2 | 0.08em | — | Section eyebrow — uppercase, wide tracking | | button | Inter | 16 | 600 | 1.2 | 0 | — | All CTA labels | | nav-link | Inter | 15 | 500 | 1.4 | 0 | — | Top navigation | | money | Aeonik Pro | 56 | 500 | 1.05 | -0.02em | tnum | Balance / amount display | | money-inline | Inter | 16 | 500 | 1.4 | 0 | tnum | Inline transaction amounts | | legal | Inter | 12 | 400 | 1.5 | 0 | — | Footer disclosure | ### Principles - **Display lives at weight 500–600, not 700**: the hero is medium-weight. The brand's premium calm comes from *not* shouting — Aeonik Pro at 500 reads as confident, not aggressive. - **Aeonik Pro above 24px, Inter at and below 20px**: the family handoff happens around the h3/h4 boundary. Display authority is Aeonik Pro; UI legibility is Inter. - **Negative tracking scales with size**: -0.03em on the 86px hero, tightening progressively, reaching 0 by body sizes. Large display compresses; body stays open. - **Generous body line-height (1.55)**: Inter body runs loose for legibility in dense super-app copy — never tighter than 1.5. - **Tabular figures on money** (`tnum`): balances and amounts use Aeonik Pro `tnum` so columns align and digits don't jitter. Money is brand-voiced, not mono-terminal. - **Eyebrows are uppercase Inter at 0.08em tracking**: small (12px), wide-spaced, weight 600 — the only place the brand uppercases. - **White on dark is pure `#ffffff`**: hero headlines are absolute white for maximum contrast; on-dark body steps down to 72% opacity, captions to 48%. ## 4. Component Stylings ### Buttons **Primary CTA (light sections)** ("Get started", "Open account") - Background: `#191c1f` (near-black brand) - Text: `#ffffff`, Inter weight 600, 16px - Padding: 14px / 28px · Height: 48px - Radius: pill (9999) - Hover: bg lifts to `#23272b`, soft shadow `rgba(16,18,21,0.10) 0 4px 12px` - Active: bg `#0e1013`, shadow removed - Use case: every primary action on white sections **Primary CTA (dark hero)** ("Get the app") - Background: `#ffffff` (inverted) - Text: `#191c1f`, Inter weight 600 - Same pill geometry, 48px height - Hover: bg dims to `rgba(255,255,255,0.92)` - Use case: the hero CTA on the dark ground — the brand inverts rather than recolours **Secondary** ("Learn more") - Background: `#eff0f1` (muted surface) on light / `rgba(255,255,255,0.12)` on dark - Text: `#191c1f` (light) / `#ffffff` (dark), weight 600 - Padding: 13px / 27px · Height: 48px · Radius: pill - Hover: bg deepens one step **Ghost / Outline** ("Compare plans") - Background: transparent - Text: `#191c1f`, weight 600 - Border: 1px solid `#c9cdd1` (light) / `rgba(255,255,255,0.16)` (dark) - Padding: 13px / 27px · Height: 48px · Radius: pill - Hover: border darkens, faint fill `#f7f7f8` **Tertiary / Text** ("See all features") - Background: transparent - Text: `#191c1f` weight 600 with trailing chevron; accent `#5f43ff` variant for in-copy product links - Underline grows on hover ### Cards **Default Card** - Background: `#ffffff` (surface) - Border: 1px solid `#e2e4e6` - Radius: 16px (xl) - Padding: 24px - Shadow: none at rest; `soft` on hover for interactive cards - Use case: feature card, plan card **Subtle Card** - Background: `#f7f7f8` (subtle surface) - Radius: 24px (xxl) - Padding: 32px - No border — the fill separates it from white - Use case: quiet stat blocks, testimonial cards on white bands **Gradient Card** (the premium product moment) - Background: `linear-gradient(135deg, #5f43ff, #2868ff)` (sometimes warmed with `#ff4d97`) - Text: `#ffffff` - Radius: 24px (xxl) - Padding: 32px - Use case: Ultra / Metal tier showcase, card-art hero blocks — the one place colour fills a surface ### Badges, Tags, Pills **Accent Badge** - Background: `rgba(95,67,255,0.10)` (accent-soft) - Text: `#5f43ff`, Inter weight 600, 12px - Padding: 4px / 12px · Radius: pill - Use case: "New", "Beta", "Popular" **Neutral Chip** - Background: `#eff0f1` (muted surface) - Text: `#3a3f44`, weight 500, 13px - Padding: 4px / 12px · Radius: pill - Use case: filter chips, currency tags **On-Dark Badge** - Background: `rgba(255,255,255,0.12)` - Text: `#ffffff`, weight 600, 12px - Use case: badges over the dark hero / gradient cards ### Inputs / Forms **Text Input** - Background: `#eff0f1` (muted surface) — filled, not outlined-on-white - Border: 1px solid `#c9cdd1` - Radius: 8px (md) - Height: 48px · Padding: 12px / 16px - Text: `#191c1f`, placeholder `#8d969e` - Focus: border `#5f43ff` 1.5px, ring `rgba(95,67,255,0.55)` 3px - Use case: email capture, sign-up, search **Select / Dropdown** - Same fill + border as text input, 48px height, trailing chevron `#5f676e` - Open menu: white surface, 12px radius, `standard` shadow, 8px item padding **Money Field** - Background: transparent or muted fill - Large amount rendered in Aeonik Pro `money` (56px / 500 / `tnum`) - Currency selector pill inline, accent-violet active state ### Navigation **Top Nav (light)** - Height: 64px · Background: `#ffffff` - Bottom hairline `#e2e4e6` appears on scroll - Logo left, nav links centre (15px / 500, `#191c1f`), "Log in" ghost + "Get started" pill right - Nav link hover: underline grows, colour holds `#191c1f` - Mega-menu: white panel, `standard` shadow, 16px radius, accent-violet category icons **Top Nav (dark hero overlay)** - Background: transparent over the dark hero, resolving to `#191c1f` on scroll - Links + logo white; "Get started" pill is white-fill / near-black text **Footer** - Background: `#0e1013` (deep near-black) - Link text `rgba(255,255,255,0.72)`, category headers `#ffffff` - Padding: 64px vertical - Regulatory disclosure block in `legal` (12px), `rgba(255,255,255,0.48)` ## 5. Layout Principles ### Spacing System Base 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 120. Section spacer 96px; hero padding 120px. The scale is generous — Revolut leans toward breathing room over density, the opposite of a poster-dense fintech. ### Grid & Container - Page max-width 1280px - Prose width 720px - 12-col grid, 24px gutters - Hero: full-bleed dark ground, content constrained to 1280px, headline left or centre - White sections: 12-col, often 2-up (copy + mockup) or 3-up (feature grid) - Gradient showcase blocks frequently break to full-bleed with the gradient bleeding edge-to-edge ### Whitespace Philosophy Whitespace is the brand's *luxury signal*. Headlines are surrounded by large margins; the 86px hero sits in 120px of vertical air. The premium calm depends on **emptiness around type** — Revolut would rather show one product clearly than crowd three. Gradient imagery is given room to glow rather than being cropped tight. ### Section Cadence Dark hero → white feature band → white comparison/table band → dark or gradient premium showcase → white FAQ → deep-near-black footer. The dark↔white alternation is the structural rhythm; gradient blocks punctuate, never repeat back-to-back. ## 6. Shapes & Radius Scale | Tier | Value | Use | |-------------|-------|--------------------------------------------------| | None | 0 | Full-bleed gradient edges, dividers | | Micro | 2 | Status dots, tiny indicators | | Small | 4 | Tags, inline chips | | Medium | 8 | Inputs, selects, dropdowns | | Comfortable | 12 | Mid-size cards, mega-menu panels | | Large | 16 | Feature cards, plan cards | | Featured | 24 | Subtle cards, gradient showcase cards, modals | | Pill | 9999 | All CTAs, badges, chips, currency tags | Revolut's signature pairing is **16–24px cards with fully-pill buttons** — the contrast between calm rectangular surfaces and soft round actions is the brand's geometric fingerprint. Pills are reserved for *actions and tags*; surfaces never go pill. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------------------------------------------------------------|--------------------------------------| | 0 | Flat (white canvas or dark ground) | Hero text, body, default sections | | 1 | Surface jump to `#f7f7f8` or 1px `#e2e4e6` border, no shadow | Default card | | 2 | Ambient `rgba(16,18,21,0.06) 0 1px 2px` | Sticky nav post-scroll | | 3 | Soft `rgba(16,18,21,0.10) 0 4px 12px` | Card / CTA hover | | 4 | Standard `rgba(16,18,21,0.14) 0 12px 28px -6px` | Mega-menu, dropdown, popover | | 5 | Elevated `rgba(16,18,21,0.20) 0 28px 56px -12px` | Modal dialog | ### Shadow Philosophy Light-mode shadows are **soft, warm, and restrained** — `rgba(16,18,21, 0.06–0.20)`, keyed to the brand's near-black ink so an elevated card looks like a deepening of the brand rather than a generic drop-shadow. There is no coloured glow in the elevation system; the accent gradient stays in imagery and the only chromatic emphasis is the violet focus ring. On the dark ground, elevation is communicated almost entirely by **surface lightening** (`#191c1f` → `#23272b` → `#2d3237`) rather than shadow, because low-opacity black is invisible on a dark background. ## 8. Interaction & Motion ### Easing - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — most state changes - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal/menu entrance, gradient reveals - **Entrance**: `cubic-bezier(0, 0, 0.2, 1)` — scroll-reveal fade-ups ### Durations - **Fast**: 150ms — hover colour/underline, chip select - **Standard**: 240ms — most transitions, dropdown open - **Slow**: 320ms — modal entrance, mega-menu - **Reveal**: 600ms — scroll-triggered fade-up of section content ### Per-Component Recipes - **Primary button hover**: bg `#191c1f` → `#23272b` over 150ms; soft shadow fades in over 240ms standard - **Nav link hover**: underline grows left-to-right over 150ms; colour holds - **Card hover**: `soft` shadow blooms over 240ms; optional 2px translate-up emphasised - **Mega-menu open**: panel fades + scales 0.98 → 1.0 over 320ms ease-emphasized - **Gradient drift** (decorative): the violet→blue wash slowly shifts hue/position over ~12s ease-linear behind hero mockups - **Scroll reveal**: section copy fades up 16px over 600ms ease-entrance, staggered ~80ms per item - **Number count-up**: balance/stat figures count from 0 to value over 1.2s ease-standard on first view - **Modal entrance**: overlay fades 240ms; dialog scales 0.96 → 1.0 over 320ms ### Page-Transition Behavior Soft cross-fade between routes (~240ms); the nav stays mounted. Dark→light section boundaries do not animate the background colour — the scroll itself reveals the change. ### Reduced Motion Strictly honoured. Gradient drift freezes to a static wash. Scroll-reveal fades collapse to visible end-state. Number count-ups jump straight to the final value. Parallax mockups become static. Modal scale-up becomes an instant fade. ## 9. Accessibility & A11y ### Contrast Pairs - `#191c1f` text on `#ffffff` bg: **15.6:1** — AAA - `#ffffff` on-brand text on `#191c1f` CTA fill: **15.6:1** — AAA - `#3a3f44` body on `#ffffff` bg: **9.6:1** — AAA - `#ffffff` text on `#191c1f` dark hero: **14.9:1** — AAA (hero ground is marginally warmer than pure brand ink) - `#5f676e` muted on `#ffffff`: **5.1:1** — AA for normal text - `#5f43ff` accent link on `#ffffff`: **5.4:1** — AA (used for links, not body) ### Focus Indicators 3px solid `rgba(95,67,255,0.55)` violet ring with 2px offset on every interactive element. The violet ring is the system's single chromatic focus cue and reads clearly on both white and dark grounds. ### ARIA Patterns - **Dialog**: modals use `role="dialog"`, `aria-modal="true"`, focus-trap, Escape-to-close - **Mega-menu**: `role="menu"` with `aria-expanded` on the trigger - **Tabs**: plan-comparison toggles use `role="tablist"` / `role="tab"` / `aria-selected` - **Live region**: form validation + balance updates use `aria-live="polite"` ### Keyboard Nav Tab order follows visual flow. Mega-menus open on Enter/Space and trap focus until Escape. Modals are focus-trapped. The dark/light section change requires no special handling — focus rings adapt via the single violet ring. ### Screen Reader Hints - Logo: `role="img"` with `aria-label="Revolut"` - Money figures: visible currency + numerals; `aria-label` spells out "1,250 pounds" - Gradient decorative imagery: `aria-hidden="true"` (decorative only) - Eyebrow uppercase text: rendered uppercase via CSS `text-transform`, source case preserved for screen readers ### Reduced Motion All animations honoured per `prefers-reduced-motion: reduce` — see §8. ## 10. Responsive Behavior ### Breakpoints | Name | Width | Use | |---------|------------|------------------------------| | mobile | <640 | Stacked single-column | | tablet | 640–1024 | 2-col grid | | desktop | 1024–1280 | Full multi-col layout | | wide | ≥1280 | Max-width 1280px, centred | ### Touch Targets Minimum 44×44px. CTAs at 48px height comfortably exceed it. Nav links and chips get expanded tap padding on touch viewports. ### Collapsing Strategy - Top nav collapses to a hamburger + slide-in drawer below 1024px - display-hero scales 86 → 64 → 44px (desktop → tablet → mobile) - display-lg scales 64 → 48 → 36px - 2-up copy+mockup blocks stack to single column on mobile (copy first) - 3-up feature grid → 2-col (tablet) → 1-col (mobile) - Gradient showcase cards retain full-bleed but reduce padding to 24px ### Image Behavior - Phone-frame mockups at iOS-bezel radius (~36–40px), centred over gradient - Gradient washes are CSS-rendered (not images) so they scale crisply - Card-art renders `loading="lazy"` below the fold - Hero retains the dark ground at all breakpoints — the two-register system never collapses to all-white ### Container Queries Plan-comparison cards use container queries: below ~360px the feature list stacks under the price; above, price and features sit side-by-side. ## 11. Content & Voice ### Tone **Confident, clear, globally-minded** — Revolut's voice is the assured-adult of fintech. Sentences are plain and benefit-led, never slangy. The brand speaks to ambition (travel, investing, premium tiers) without hype, and it leans on concrete numbers ("Spend in 150+ currencies", "Get up to 5% on savings"). It sounds like a competent friend who happens to manage money for a living — calm, specific, and a little aspirational. ### Microcopy Patterns - **Button verbs**: "Get started", "Open account", "Get the app", "Compare plans", "Learn more" - **Error recipe**: clear and corrective, never cute. "That email doesn't look right. Check and try again." - **Success confirmation**: "Done — your transfer is on its way." - **Loading state**: a calm spinner with "Just a moment…"; never jokes ### Empty States - **No transactions**: "Nothing here yet. Your activity will show up once you start spending." - **No saved cards**: "Add a card to get started." - Empty states are reassuring and instructive — they tell you the next step, not apologise. ### CTA Verb Conventions - **Acquisition**: "Get started", "Open account", "Sign up free" - **App download**: "Get the app", "Download" - **Sign-in**: "Log in" - **Exploration**: "Learn more", "Compare plans", "See how it works" - **Money**: "Send", "Exchange", "Add money", "Invest" - **Premium**: "Go Premium", "Get Ultra" The brand prefers **"Get"** as its acquisition verb ("Get started", "Get the app", "Get Ultra") — warm, low-friction, and consistent across the super-app's many products. ## 12. Dark Mode & Theming Revolut is **dual-register by design** — not a single light theme with an optional dark toggle, but a layout where dark and light coexist on the same page. The hero and premium showcases are near-black (`#191c1f` / `#0e1013`); the explanatory content is white (`#ffffff`). The same near-black ink (`#191c1f`) reads as *text* on white and *ground* on dark, which is what makes the brand's monochrome system feel unified. When implementing as a togglable theme, treat **light as the content default** and **dark as the hero/footer register**: ```yaml colors-dark: bg: '#191c1f' # hero / dark-section ground bg-deep: '#0e1013' # footer / max-contrast surface: '#23272b' # +1 elevated card on dark surface-2: '#2d3237' # +2 elevated text: '#ffffff' # white headline + body text-body: 'rgba(255,255,255,0.72)' text-muted: 'rgba(255,255,255,0.48)' brand: '#ffffff' # brand inverts to white on dark on-brand: '#191c1f' # near-black label on the white CTA fill accent: '#7d63ff' # violet lifts slightly for dark legibility border: 'rgba(255,255,255,0.16)' link: '#ffffff' ``` On dark, the **CTA inverts rather than recolours** (white fill, near-black label), elevation is communicated by **surface lightening** rather than shadow, and the accent violet lifts a touch (`#5f43ff` → `#7d63ff`) to hold contrast on the dark ground. The gradient accent system is identical in both registers. ## 13. Lineage & Influences Revolut's design lineage runs through the **European premium-fintech** tradition rather than the loud, youth-coded American one. Its monochrome-plus-gradient restraint, its medium-weight geometric display face, and its calm whitespace owe more to the visual language of premium hardware and challenger-bank minimalism than to consumer-money-app maximalism. The near-black-and-white structure with a single luminous accent is a direct descendant of the **Swiss/International-Style discipline** filtered through modern product design: type and grid do the work; colour is reward, not wallpaper. The Aeonik Pro choice — a contemporary geometric grotesque favoured across premium tech branding — places Revolut firmly in the post-2018 "neo-grotesque-with-a-warm-edge" cohort. What it draws from contemporaries: the **dark-hero-into-light-content** pattern shared by premium product launch pages; the **gradient-behind-mockup** convention popularised across modern fintech and developer-tool marketing; and the **fully-pill CTA** that has become consumer-fintech shorthand for friendly, low-friction action. What it rejects is just as defining: it refuses the **neon loudness** of Cash App's acid-green-on-black, the **hot-coral playfulness** of Monzo, and the **flat corporate-blue trust signalling** of legacy banking. Revolut's bet is that *premium calm* — quiet near-black, expensive whitespace, gradient as jewellery — reads as more trustworthy to an ambitious, globally-mobile user than any amount of brand-colour shouting. **Influences:** - **Aeonik Pro / CoType Foundry** ([cotypefoundry.com](https://www.cotypefoundry.com)) — The geometric grotesque display face that anchors the premium, poised headline voice - **Inter typeface** ([rsms.me](https://rsms.me/inter/)) — The neutral high-legibility workhorse for all body and UI text - **Swiss / International Typographic Style** ([wikipedia.org](https://en.wikipedia.org/wiki/International_Typographic_Style)) — Grid discipline and type-led hierarchy where colour is accent, not structure - **Apple product pages** ([apple.com](https://www.apple.com)) — Dark-hero-into-light-content rhythm and luxurious whitespace around a single hero object - **Stripe** ([stripe.com](https://stripe.com)) — Gradient-as-accent and the premium-minimal fintech marketing template - **Linear** ([linear.app](https://linear.app)) — Near-black grounds, restrained palette, and the gradient-bloom-behind-product convention ## 14. Do's and Don'ts **Do:** - Build on the two-register system: near-black hero (`#191c1f`) into white content (`#ffffff`) - Render the hero headline in Aeonik Pro at weight 500 — medium, poised, never heavy-700 - Use near-black `#191c1f` as the structural brand colour; let it be ink on white and ground on dark - Keep accents (violet `#5f43ff` → blue `#2868ff`) as gradients behind imagery, never on body type - Fully-pill every CTA (radius 9999); invert fill by section (near-black on light, white on dark) - Use 16–24px radius on cards — calm rectangular surfaces against round buttons - Give the hero 120px of vertical air; let whitespace do the premium signalling - Pair Aeonik Pro (display ≥24px) with Inter (UI ≤20px) and respect the handoff - Use `tnum` Aeonik Pro for money figures so amounts read as brand voice, not terminal - Communicate elevation on dark via surface lightening, not invisible black shadows **Don't:** - Don't make the hero light/white — the dark hero is the brand's loudest, most identifying gesture - Don't colour the headline with the gradient — colour stays in imagery and focus rings - Don't substitute the near-black ink with pure `#000000` — `#191c1f` is warmer and intentional - Don't set display type at weight 700 — that breaks the premium-calm posture - Don't pill the cards or square the buttons — the geometry contrast is the fingerprint - Don't crowd sections — Revolut shows one product clearly, not three crammed together - Don't recolour the CTA on dark — invert it to white-fill / near-black-label instead - Don't add a coloured drop-shadow — shadows are warm-black; the only glow is the focus ring - Don't use mono for money — balances are Aeonik Pro `tnum`, not terminal mono - Don't oversaturate — the brand's discipline is monochrome structure plus one luminous accent ## 15. Agent Prompt Guide ### Quick Color Reference ``` Brand / Ink: #191c1f (near-black — primary) Canvas: #ffffff Hero Ground: #191c1f Deep Ground: #0e1013 Body: #3a3f44 Muted: #5f676e Accent Violet: #5f43ff Accent Blue: #2868ff Accent Pink: #ff4d97 Border: #e2e4e6 On-Brand: #ffffff ``` ### Example Component Prompts 1. *"Create a Revolut hero: near-black `#191c1f` background, full-bleed. A single white Aeonik Pro headline at 86px weight 500 with -0.03em tracking, reading 'One app, all things money.'. Below, an 18px Inter body in `rgba(255,255,255,0.72)`. A fully-pill CTA (radius 9999) at 48px height, white fill `#ffffff` with near-black `#191c1f` label at Inter weight 600, reading 'Get the app'. Behind a phone mockup on the right, a slow-drifting violet→blue gradient `linear-gradient(135deg, #5f43ff, #2868ff)`."* 2. *"Design a Revolut feature card on a white section: bg `#ffffff`, 1px `#e2e4e6` border, 16px radius, 24px padding. Title in Aeonik Pro 24px weight 600 `#191c1f`. Body in Inter 16px `#3a3f44` line-height 1.55. A small accent-violet icon top-left. On hover, a soft warm-black shadow `rgba(16,18,21,0.10) 0 4px 12px` blooms over 240ms."* 3. *"Build a Revolut premium showcase card: 24px radius, 32px padding, filled with a `linear-gradient(135deg, #5f43ff, #2868ff)` warmed toward `#ff4d97` at one corner. White Aeonik Pro h2 (32px / 600) reading 'Revolut Ultra', white Inter body at 72% opacity, and a white-fill pill CTA with near-black label 'Get Ultra'. Centre a metal-card render catching the violet light."* 4. *"Compose a Revolut comparison section: white background, a 3-up grid of plan cards (24px gap). Each card bg `#f7f7f8`, 24px radius, no border, 32px padding. Plan name in Aeonik Pro 24px/600, price in Aeonik Pro 56px/500 with `tnum`, feature list in Inter 16px `#3a3f44`. The recommended plan gets an accent-soft `rgba(95,67,255,0.10)` badge reading 'Popular' in `#5f43ff`."* 5. *"Design a Revolut top nav: 64px tall, white `#ffffff` background with a `#e2e4e6` hairline. Logo left, centre nav links in Inter 15px/500 `#191c1f` (underline-grow on hover), and right side a ghost 'Log in' (transparent, `#c9cdd1` border, pill) beside a near-black-fill pill 'Get started' with white label."* 6. *"Create a Revolut money input: muted `#eff0f1` fill, 8px radius, 48px height, 1px `#c9cdd1` border. The amount renders in Aeonik Pro 56px weight 500 with `tnum`, near-black `#191c1f`. An inline currency-selector pill sits right, accent-violet `#5f43ff` when active. On focus, a 3px `rgba(95,67,255,0.55)` violet ring with 2px offset."* ### Iteration Guide 1. **Go dark in the hero**: if your hero is white, you're not Revolut. The identifying gesture is the near-black `#191c1f` hero with a single white headline. 2. **Drop the headline weight to 500**: Aeonik Pro at medium, not bold. The premium calm depends on *not* shouting. 3. **Keep colour in imagery only**: move every accent into gradients behind mockups and into focus rings. Body type and structure stay monochrome near-black/white. 4. **Pill the buttons, calm the cards**: CTAs at radius 9999; cards at 16–24px. The geometry contrast is the fingerprint. 5. **Invert, don't recolour, on dark**: on the dark hero, the CTA becomes white-fill / near-black-label — same brand, flipped. 6. **Replace pure black with `#191c1f`**: the warm near-black is intentional; pure `#000000` reads colder and off-brand. 7. **Add air**: widen section padding to 96px+ and give the hero 120px. Whitespace is the luxury signal. 8. **Split the type by size**: Aeonik Pro for display ≥24px, Inter for everything ≤20px, with `tnum` on any money figure.