---
name: Revolut
description: "This site is a prime example of premium fintech design, using restrained UI to let high-quality photography and bold typography build trust and modern appeal."
version: alpha

colors:
  background: "#F4F4F4"
  primary: "#191C1F"
  secondary: "#505A63"
  neutral: "#8D969E"
  bg-soft: "#F7F7F7"
  bg-quiet: "#FFFFFF"
  line: "rgba(25, 28, 31, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 52px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.6px"
  h2:
    fontFamily: humanist-sans
    fontSize: 38px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.24px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.18px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.12px"

rounded:
  sm: 4px
  md: 12px
  lg: 20px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, photography-driven fintech design that balances premium aesthetics with approachable consumer banking.

*A sleek, modern fintech interface that blends photography with clean typography to establish trust and clarity.*

## Colors

High-contrast neutral palette where photography provides the primary visual interest and color.

- **Background (`#F4F4F4`)** — uses `bg` token
- **Primary text (`#191C1F`)** — uses `ink` token
- **Secondary text (`#505A63`)** — uses `ink-soft` token
- **Muted (`#8D969E`)** — uses `muted` token
- **Borders (`rgba(25, 28, 31, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Use geometric-sans for large display headlines to maintain a modern, bold feel.
- Use humanist-sans for body text to ensure readability and a friendly tone.
- Maintain tight letter-spacing (negative) on large display text for a premium look.

## Layout

Standard 12-column grid with generous side margins and clear content hierarchy.

*Rhythm:* Generous whitespace with a consistent 4px base scale and large vertical section padding (64px).

## Elevation & Depth

- Borders: Minimal and subtle, using 1px borders primarily for structural definition rather than visual flair.

## Shapes

- `sm`: 4px
- `md`: 12px
- `lg`: 20px
- `pill`: 9999px

## Components

- **button:** Highly rounded pill-shaped buttons; primary is dark ink with white text, secondary is outline or ghost.
- **card:** Rounded corner containers (12-20px radius) used for app interface mockups and feature highlights.
- **chip:** Small pill-shaped tags used for navigation or categorization (e.g., 'Adventure', 'Wedding').
- **input:** Minimal, clean input fields with subtle borders, maintaining the overall restraint of the UI.
- **hero:** Full-width section featuring large typography overlaid on immersive, high-quality lifestyle photography.

## Do's and Don'ts

**Don't:**
- Don't use decorative serifs — screenshot shows geometric and humanist sans-serifs exclusively.
- Don't use muted, low-contrast borders — screenshot shows clear but subtle borders only where structurally necessary.
- Don't clutter the layout with excessive UI elements — screenshot shows generous whitespace and focused sections.
- Don't use complex shadows or bevels — screenshot shows flat surfaces with minimal or no shadows.
- Don't use a wide variety of colors — screenshot shows a strict neutral palette of blacks, whites, and grays.
- Don't use sharp, square corners — screenshot shows consistent use of rounded corners (12px to pill) on all components.

---

## System Prompt (paste into AI agent)

```
Revolut is a modern fintech consumer banking platform. The design DNA is defined by a clean, neutral palette of dark ink (#191C1F) and light gray (#F4F4F4), with large, high-quality photography providing the primary visual interest. Typography mixes geometric-sans for bold display headlines (tight letter-spacing) with humanist-sans for readable body text. The layout uses a generous 4px base scale with significant whitespace (64px vertical padding) and a standard 12-column grid. Components like buttons and chips use heavily rounded pill shapes (border-radius: 9999px). Critical design constraints: never use decorative serifs, never clutter the layout with excessive UI elements, and never use complex shadows. The overall feel is premium, trustworthy, and highly accessible.
```