What makes Revolut Business's design language stand out?

Revolut Business is Revolut's B2B sibling — and the marketing page proves the brand can extend its consumer typographic confidence into enterprise context without losing edge. We catalogued it because most B2B fintech reaches for one of two playbooks: corporate-blue trust signals or Mercury-style dark editorial.

What fonts and palette does Revolut Business use?

The type system is Inter, Aeonik Pro and Arial. The palette sits on a dark canvas around #F4F4F4, #BBC4CD, #000000 and #667DFF.

Can I transfer Revolut Business's design language to my product?

The patterns transfer without cloning. Study smaller display typography for B2B (32px vs consumer 80px) — enterprise marketing needs information density. The ai2 Design brief packages Revolut Business's tokens and rules as a paste-ready export for Claude, Cursor, or any coding agent.

Back to gallery

fintech · saas

Revolut Business

Revolut B2B sibling — Aeonik Pro 32px compressed display + Inter body + Arial for technical tables, single indigo blue accent. Bloomberg-tier business publication aesthetic.

www.revolut.com/businessAdded 2026-05-17

Editorial note

This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.

Fair Use & Gallery Policy

FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Revolut Business’s language, not just a screenshot.

Paste into your agent. No signup, no cost.

Revolut Business is the enterprise compression of Revolut's editorial confidence. Dark-mode canvas; Aeonik Pro 32px display (compressed from consumer 80px); Inter body + Arial for technical tables (deliberate system-font for density); single indigo blue accent #667dff; zero motion library. Brand reads as Bloomberg-tier business publication that ships corporate banking.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (#f4f4f4 white text dominant ~893 surface refs, #bbc4cd light slate-grey for tertiary text, #000000 deepest dark surface, #667dff indigo blue scarce primary accent ~38 refs, #19191a near-black secondary surface, #808080 muted grey for borders, #1c1d34 deep blue-tinted dark accent surface), typography stack (Aeonik Pro 20/24/32px weights 400/500 for display, Inter 16-20px weights 400 for body, Arial 13.3333px for technical tables and data), spacing scale 1/4/6/8/12/14/16/18, container ladder 1024/1432/1888 (slightly narrower than consumer), custom breakpoints sm=320 md=720 lg=1024 xl=1280 2xl=1920, zero motion library (no Framer Motion / GSAP), 0 catalogued gradients (clean flat dark surfaces). Treat indigo blue #667dff as scarce primary accent. Apply the language, not the source brand's copy.

Layout: Dark-mode enterprise flow with compressed display typography (32px vs consumer 80px).
Content width: Container ladder 1024/1432/1888.
Framing: Bloomberg-tier business publication for banking — compressed Aeonik Pro + Inter density.
Grid strength: Editorial enterprise grid — content density over chromatic decoration.

Dark-mode canvas; #f4f4f4 white text dominant; single indigo blue #667dff accent; zero gradients.

Mode strategyDark-mode-first enterprise canvas.

#f4f4f4 white text dominant (~893 refs)
#bbc4cd light slate-grey tertiary text
#000000 deepest dark surface
#667dff indigo blue scarce primary accent
#19191a near-black secondary surface
#808080 muted grey border
#1c1d34 deep blue-tinted dark accent surface

Gradients (paste-ready)

0 catalogued — flat enterprise surfaces, no chromatic depth

Aeonik Pro 20/24/32px weights 400/500 for display (compressed from consumer 80px)
Inter 16-20px weights 400 for body text
Arial 13.3333px for technical tables and data display (system font deliberate)
Letter-spacing 0 across
Line-height 1.5-1.6 body, 1.05-1.1 display

4px base, scale 1/4/6/8/12/14/16/18
Section vertical rhythm 80-128px (compressed for enterprise density)
Card padding 20-32px

Surface styleFlat dark surfaces with tone-based depth.

0 drop shadow
Tone-based depth (#19191a < #000)
Deep blue-tinted #1c1d34 for accent dark surface

Techniques

Enterprise dark card

bg #19191a, 1px #808080 at 12% alpha border, 8-12px radius, padding 20-32px.

Indigo accent badge

bg rgba(102,125,255,0.10), text #667dff, 4-6px radius.

Radii4 / 6 / 8 / 12Icon treatmentStroke 1.5px monoline, indigo stroke for accent.Icon setsCustom set

Buttons 6-10px radius
Cards 8-12px radius

Primary CTA (open business account)
background
#f4f4f4
textColor
#000000
fontFamily
Aeonik Pro, sans-serif
fontWeight
500
fontSize
14px
padding
12px 24px
borderRadius
8px
shadow
none
hover
background warms to #ffffff
Tailwind
```
inline-flex items-center gap-2 rounded-lg bg-[#f4f4f4] px-6 py-3 text-sm font-medium text-black transition-colors hover:bg-white
```
Display headline (Aeonik Pro 32px)
fontFamily
Aeonik Pro, sans-serif
fontSize
clamp(24px, 4vw, 32px)
fontWeight
500
letterSpacing
-0.01em
lineHeight
1.1
color
#f4f4f4
Tailwind
```
text-2xl font-medium leading-tight tracking-tight text-[#f4f4f4] md:text-3xl lg:text-[32px]
```
Technical table cell (Arial)
fontFamily
Arial, sans-serif
fontSize
13.3333px
fontWeight
400
color
#f4f4f4
Tailwind
```
font-[Arial] text-[13.3333px] text-[#f4f4f4]
```
Indigo accent text
color
#667dff
fontFamily
Inter
fontWeight
500
fontSize
14px
Tailwind
```
text-sm font-medium text-[#667dff]
```

LevelsubtleDurations150ms / 300ms

Easings

cubic-bezier(0.4, 0, 0.2, 1)

HoverCTA bg warm shift, Link colour shift to indigo

Scroll patterns

CSS-only fade-in

Marketing motion intentionally minimal — enterprise restraint

Hover shifts colour, never position
Focus rings: 2px indigo #667dff ring with 2px offset
Active state 95% opacity

Approachmobile-first

Custom: sm=320 md=720 lg=1024 xl=1280 2xl=1920 (2xl ultra-wide).

<720: 16px gutters, hero 24-32px
720-1024: 720px content rail
≥1024: full 1432-1888 hero canvas

White on dark passes AAA
Indigo #667dff on dark passes AA at 14px+ (6.3:1)
Arial 13.3333px in tables verified for screen readability
Focus visible always

Next.js (assumed)Aeonik Pro preloaded woff2Inter webfontArial system font for tablesNo motion library

Typography density = entire identity. Tables + display + body = three-stack discipline.

Aeonik Pro multiple weights preloaded
Inter loaded as body font
Arial system stack for tabular data
Zero JS motion library

Use compressed Aeonik Pro 24-32px for enterprise display
Use Inter for body 16-20px
Use Arial for technical tables — system font deliberate
Reserve indigo #667dff as scarce primary accent

Don't add second/third chromatic accent
Don't substitute custom mono for Arial in tables
Don't expand display typography beyond 32px
Don't add motion library

Dark-mode-first canvas
Type stack: Aeonik Pro + Inter + Arial (for tables)
Single accent: #667dff indigo

Background dominant: dark mode
Font-family grep: Aeonik Pro + Inter + Arial present (each per content type)
Display headline: 24-32px range
Indigo #667dff usage: text/badge accent only
Container max-width: 1888px

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 9 nodes across 5 levels, shallow to deep by color.

body1
- div3
  - Header
  - Mainmain2
    - Section (×10)1
      - Section
    - [+8 more]
  - Footercontentinfo1
    - Section

Accessibility

34 combinations - 20 pass AA - 12 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

fg: #F4F4F4
bg: #000000
APCA Lc: -101
Use: background on foreground

fg: #000000
bg: #F4F4F4
APCA Lc: +99
Use: foreground on background

fg: #F4F4F4
bg: #19191A
APCA Lc: -99
Use: background on foreground

fg: #19191A
bg: #F4F4F4
APCA Lc: +98
Use: foreground on background

fg: #F4F4F4
bg: #1C1D34
APCA Lc: -99
Use: background on background

fg: #1C1D34
bg: #F4F4F4
APCA Lc: +97
Use: background on background

fg: #BBC4CD
bg: #000000
APCA Lc: -70
Use: foreground on foreground

fg: #000000
bg: #BBC4CD
APCA Lc: +71
Use: foreground on foreground

fg: #BBC4CD
bg: #19191A
APCA Lc: -69
Use: foreground on foreground

Images

Image strategy

Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.

Total images

Lazy loaded

Format mix

png27 · 96%
webp1 · 4%

Hero image

https://assets.revolut.com/published-assets-v3/f51b9861-d5cf-44ed-9944-1eed1188243c/eeab07eb-d75b-4bf8-92f2-74214100af10.png

Format: PNG
Dimensions: 1012x2192
Loading: lazy
srcset: yes

srcset descriptor

https://assets.revolut.com/published-assets-v3/f51b9861-d5cf-44ed-9944-1eed1188243c/eeab07eb-d75b-4bf8-92f2-74214100af10.png 1080w, https://assets.revolut.com/published-assets-v3/f51b9861-d5cf-44ed-9944-1eed1188243c/eeab07eb-d75b-4bf8-92f2-74214100af10.png 2048w, https://assets.revolut.com/published-assets-v3/f51b9861-d5cf-44ed-9944-1eed1188243c/eeab07eb-d75b-4bf8-92f2-74214100af10.png 3840w

Industry: fintech
Industry: saas
Theme: Dark
Added: 2026-05-17

FAQ

Questions people ask about Revolut Business

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Revolut Business

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Image strategy

Hero image

Questions people ask about Revolut Business

Revolut Business

Editorial disclaimer

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Contrast matrix

Image strategy

Hero image

Questions people ask about Revolut Business

01What makes Revolut Business's design language stand out?

02What fonts and palette does Revolut Business use?

03Can I transfer Revolut Business's design language to my product?

Side-by-side reads sharing this design signal.

More in this design language