prismdinstrument

EXTRACTED · 9 SECTIONS · 7 COLORS · GRADE D

revolut.com

Accent #4f55f1 · Inter — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

breakpoints

DESIGN.md tokens.json

real render · source of truth

revolut.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(31, 31, 31) as the singular interactive color. Moderately rounded CTAs (12px) — modern SaaS standard, neither sharp nor pill alongside Aeonik Pro as the primary typeface. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

Color — roles, semantics & the full census

7 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 16.48:1

Ink

#1f1f1f

AAA 16.48:1

Accent

#1f1f1f

AAA 16.48:1

Line

#1f1f1f

AAA 16.48:1

Semantic states

error#a90b1asuccess#005f48warning#774915

3 semantic roles found.

7 colors mined from the live renderexpand

Type — the ladder, in the real face

5 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl87.5733px · 500

display md

display-md18px · 400 · ×4.87

body

body16px · 400 · ×1.13

caption

caption12px · 400 · ×1.33

button

button16px · 500 · ×0.75

Motion — easings, transitions & live keyframes

6 easing curves · 0 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.4, 0.3, 0.8, 0.6)

transition-3cubic-bezier(0.15, 0.5, 0.5, 1)

rui-timing-shadowcubic-bezier(0.4,0.3,0.8,0.6)

rui-easing-toastcubic-bezier(0.175,0.885,0.21,1.65)

rui-timing-lgcubic-bezier(0.15,0.5,0.5,1)

rui-easing-linearlinear

Keyframes

Transitions only — no @keyframes animation on this page. Motion lives entirely in the easing curves on the left.

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 16px

sm · 24px

md · 30px

base · 36px

lg · 40px

xl · 48px

2xl · 60px

3xl · 64px

Radius

none
0px

xs
12px

sm
20px

md
22.5px

lg
9999px

xl
10007px

full
9999px

Components — the closed vocabulary

10 component families · 55 variants counted on the live DOM

Component	Variants found
buttons	×10
badges	×10
links	×10
footer Links	×7
heading H2	×7
nav Links	×4
tabs	×3
captions	×2
heading H1	×1
heading H3	×1

Component style specs (§4)expand

Buttons

Icon Button

Background: transparent
Text: rgba(31, 31, 31, 0.8) {colors.hairline}
Padding: 0px
Radius: 12px
Font: 16px weight 400
Use: Toolbar/UI icons

Icon Button

Background: #1f1f1f {colors.hairline}
Text: #ffffff {colors.on-primary}
Padding: 0px 20px
Radius: 9999px
Font: 16px weight 400
Use: Toolbar/UI icons

Pill

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 8px 10px
Radius: 9999px
Font: 16px weight 500
Use: Status pills, tags, chips

Ghost

Background: transparent
Text: #c9c9cd
Padding: 0px
Radius: 12px
Font: 12px weight 400
Use: Subtle action, toolbar, nav button

Pill

Background: transparent
Text: #1f1f1f {colors.hairline}
Padding: 0px
Radius: 12px
Font: 14px weight 400
Use: Status pills, tags, chips

Tabs

Ghost Tab

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 0px 20px
Radius: 0px
Font: 16px weight 400
Use: Navigation tabs, filter tabs

Pill Tab

Background: #ffffff {colors.on-primary}
Text: #000000
Padding: 10px 26px
Radius: 9999px
Font: 16px weight 500
Use: Navigation tabs, filter tabs

Layout — structure & dimensions

4 layout metrics measured

max Width100%

header Height72px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

8 media-query stops read from the live CSS

400px

600px

839px

840px

1199px

1200px

1600px

1920px

Do's & Don'ts

15 enforceable rules pulled verbatim from the spec

Use Near-Black (`#1f1f1f`) for text — not pure black, it's warmer and more readable

Use Inter as the primary typeface — it defines the brand personality

Use negative letter-spacing (-2.08px) at display sizes for compressed, editorial headlines

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use Near-Black (`#1f1f1f`) as the primary accent — it's the brand's signature interactive color

Use 12px border-radius on buttons — the standard corner rounding for interactive elements

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Use a 4-column grid on desktop — density matters for this content type

Place 5 pricing tiers side-by-side on desktop — direct comparison is the value prop

Build a content-dense footer (4 columns, ~93 links) — this site treats the footer as a sitemap, not an afterthought

Don't

Don't use pure black (`#000000`) for text — the near-black adds warmth

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't increase letter-spacing on headings — the type is designed to run tight at scale

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the revolut.com design system. Canvas #ffffff · ink #1f1f1f · accent #1f1f1f. Type: Inter — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add revolut

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press