# Revolut — Design System
> Global financial super-app offering banking, currency exchange, and investment services.
- **Canonical:** https://uiuxskills.com/library/revolut
- **Source:** https://www.revolut.com
- **Category:** Fintech & Crypto
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:18:13.159Z

---

---
version: alpha
name: Revolut
description: Global financial super-app offering banking, currency exchange, and investment services.
tone: >-
  Direct, confident, and empowering. The language is concise and action-oriented, focusing on user
  benefits and financial freedom.
color-scheme: light
colors:
  primary: "#000000"
  secondary: "#FFFFFF"
  surface: "#F7F7F7"
  surface-container: "#FFFFFF"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  error: "#D32F2F"
  success: "#388E3C"
  outline: "#E0E0E0"
  focus-ring: "#007AFF"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.lg}"
  input-field:
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#555555"
  badge:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FFEBEE"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Revolut uses a bold, high-contrast visual identity that balances professional financial reliability with a modern, tech-forward aesthetic. The brand relies on clean typography and vibrant, action-oriented UI elements to convey speed, security, and global accessibility.

## Colors

The color strategy focuses on a stark monochrome foundation, using high-contrast black and white to ensure clarity, while reserving specific hues for status and interaction.

*   Primary (#000000): The core brand color used for primary CTAs and dominant typography.
*   Secondary (#FFFFFF): Used for text on dark backgrounds and primary surface areas.
*   Surface (inferred) (#F7F7F7): Light gray background for section differentiation.
*   Surface-container (inferred) (#FFFFFF): Primary card and container background.
*   On-surface (inferred) (#1A1A1A): Primary text color for high readability.
*   On-primary (inferred) (#FFFFFF): Text color for primary buttons.
*   Error (inferred) (#D32F2F): Used for risk warnings and financial alerts.
*   Success (inferred) (#388E3C): Used for positive financial indicators.
*   Outline (inferred) (#E0E0E0): Subtle borders for cards and dividers.
*   Focus-ring (inferred) (#007AFF): Standard focus state for interactive elements.

## Typography

Typography is strictly sans-serif, prioritizing legibility and a clean, modern hierarchy across all screen sizes.

*   Display-lg (inferred): Hero headlines.
*   Display-md (inferred): Section headers.
*   Headline-lg (inferred): Sub-section headers.
*   Body-md (inferred): Primary body text.
*   Label-md (inferred): Button labels.

## Layout

The site employs a responsive grid system with a max-width container for content, utilizing a 4px/8px base spacing rhythm to maintain vertical alignment. The section order follows a logical flow: nav, hero, features, social-proof, pricing, and footer. The hero pattern features a centered headline and subhead with a single primary CTA, supported by product imagery. The layout is mobile-first, transitioning from a single-column stack to multi-column grids on desktop.

## Elevation & Depth

Depth is used sparingly to highlight cards and interactive elements, employing subtle, single-layer shadows. The elevation tokens are inferred to match the brand's clean, modern aesthetic.

*   elevation.sm: Subtle lift for minor UI elements.
*   elevation.md: Standard lift for cards and interactive containers.
*   elevation.lg: Pronounced lift for modal or drawer overlays.

## Shapes

The design system uses a rounded corner philosophy to balance approachability with technical precision. UI components like buttons and cards utilize the `rounded.lg` or `rounded.md` tokens to soften edges, while structural elements like dividers remain sharp.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
An action-oriented component using `{colors.primary}` background and `{colors.secondary}` text. It is designed for high-impact conversion points and should be used for the primary call to action in any section.

### Card
A container component with `{rounded.lg}` corners and `{colors.outline}` borders. Use this to group related feature information or product offerings.

### Input Field
A form component featuring `{rounded.md}` corners and a `{colors.outline}` border. It transitions to a `{colors.focus-ring}` border state when active to ensure accessibility and clear focus.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.primary}` for background surfaces. |
| Apply `{rounded.lg}` to all card components. | Never mix `{rounded.sm}` and `{rounded.full}` on the same component. |
| Use `{typography.display-lg}` for main hero headlines. | Avoid using `{typography.body-sm}` for primary navigation items. |
| Ensure `{colors.outline}` is used for all subtle dividers. | Do not use low-contrast text on `{colors.surface-container}`. |
| Use `{colors.error}` exclusively for risk warnings. | Avoid using shadows on flat, non-interactive elements. |
| Apply `{spacing.md}` as the standard gutter between grid items. | Do not use `{colors.focus-ring}` for non-interactive decorative elements. |
| Use `{colors.success}` for positive financial indicators. | Do not use `{colors.error}` for standard UI labels. |
| Apply `{rounded.md}` to all input fields. | Do not use sharp corners on card components. |

## Content Style

CTA labels are written as imperative verbs in sentence case, kept short and direct to drive immediate action.

Headings are phrased as concrete benefit statements, avoiding marketing superlatives or fluff to maintain a direct, confident tone.

Copy density is managed through short, scannable paragraphs and the frequent use of bullet points to break up complex financial information.

## Imagery & Icons

The imagery style is mixed, combining high-quality product screenshots with clean, flat-style vector icons. Illustrations and icons should maintain a minimal, bold aesthetic that aligns with the brand's tech-forward identity. Avoid overly complex or decorative imagery that detracts from the core financial message.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Revolut, a minimal, bold fintech brand. Match its direct, confident, action-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.lg}` — never hardcode hex, px, or font-size values.
2. Use only the component variants defined under `components:`. Do not invent variants (e.g. a ghost button or pill button) the spec does not list.
3. Follow the Layout section for page structure: mobile-first single-column, multi-column at 768px, 4px/8px base spacing rhythm using `{spacing.xs}` through `{spacing.2xl}`.
4. Treat the Do's and Don'ts table as authoritative. If a user's request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, design tokens export) exists, those values override the spec.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for interactive components where the spec defines them — including `{colors.focus-ring}` on input focus and `button-primary-hover` on CTAs.
- Apply `{rounded.lg}` to cards, `{rounded.md}` to inputs, and `{rounded.full}` to badges only.
- Use `{elevation.sm}` / `{elevation.md}` / `{elevation.lg}` only on interactive or raised elements, never on flat decorative surfaces.
- Write CTA labels as short imperative verbs in sentence case, per Content Style.

**Must NOT:**
- Invent colors, font sizes, radii, or spacing values outside the spec.
- Use generic utility defaults (e.g. `gray-500`, `rounded-md` as a literal string) when a brand token exists.
- Use `{colors.primary}` as a background surface or `{colors.focus-ring}` for decoration.
- Mix `{rounded.sm}` and `{rounded.full}` on the same component.
- Add emoji, marketing superlatives, or filler copy.
- Rewrite existing page copy, button labels, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If a value isn't in the spec, ask before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.
- For ambiguous CTA hierarchy, the single dominant action in a section takes `button-primary`; secondary actions take `button-secondary`.