Revolut

Difficulty:
Industry
Revolut Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 12px
md · 24px
lg · 24px
full

Interactive controls use fully rounded pill shapes.

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Aeonik

  • Ag

    Body 16px · regular

    Aeonik

  • Ag

    Labels 13px · medium

    Aeonik

Revolut is the digital bank bundling accounts, exchange, stocks, and crypto into one app. Its interface lets Aeonik Pro write billboard-scale 136px headlines at weight 500 over a binary near-black (#191c1f) and white base, supported by a rich semantic palette — blue, teal, pink, yellow, green, brown, danger, warning — managed through --rui-* tokens; buttons are universal 9999px pills with generous 14px×32px padding, and Inter body runs 0.16–0.24px positive tracking.

FintechMinimal

Prompt Template

Base Template
Design a Revolut-inspired interface. - Aeonik Pro display at 136px weight 500 — billboard-scale fintech headlines; - Near-black (#191c1f) + white binary with comprehensive --rui-* semantic tokens; - Universal pill buttons (9999px radius) with generous padding (14px 32px); - Inter for body text with positive letter-spacing (0.16px–0.24px); - Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning. Colors: #191c1f, #ffffff, #f4f4f4, #494fdf with #494fdf accent. Typography: - Background:.

Variant Prompts

📱 Mobile
Design a mobile app with Revolut aesthetics. Use Revolut color identity with #494fdf accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Revolut style. Use Revolut color identity with #494fdf accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Revolut design language. Use Revolut color identity with #494fdf accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Revolut visual identity. Use Revolut color identity with #494fdf accents. Compelling, conversion-focused.

Usage Examples

Revolut App

Web
Build a web app with Revolut design language and #494fdf color system.

Revolut Dashboard

Dashboard
Create a dashboard using Revolut style with data visualization and - Background: typography.

✅ Best For

  • Fintech
  • Digital banking apps
  • Dark financial interfaces

❌ Avoid For

  • Warm lifestyle brands
  • Retro decorated pages

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download