Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:system monospace stack- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Revolut's website is fintech confidence distilled into pixels — a design system that communicates "your money is in capable hands" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.
The color system is built on a comprehensive --rui-* (Revolut UI) token architecture with semantic naming for every state: danger (#e23b4a), warning (#ec7e00), teal (#00a87e), blue (#494fdf), deep-pink (#e61e49), and more. But the marketing surface itself is remarkably restrained — near-black (#191c1f) and pure white (#ffffff) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.
What distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius — primary dark (#191c1f), secondary light (#f4f4f4), outlined (transparent + 2px solid), and ghost on dark (rgba(244,244,244,0.1) + 2px solid). The padding is generous (14px 32px–34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px–0.24px), the result is a design that feels both premium and accessible — banking for the modern era.
Key Characteristics:
- 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
- Zero shadows detected — depth through color contrast only
- Tight display line-heights (1.00) with relaxed body (1.50–1.56)
#191c1f): Primary dark surface, button background, near-black text#ffffff): --rui-color-action-label, primary light surface#f4f4f4): Secondary button background, subtle surface#494fdf): --rui-color-blue, primary brand blue#4f55f1): --rui-color-action-photo-header-text, header accent#376cd5): --website-color-blue-text, link blue#e23b4a): --rui-color-danger, error/destructive#e61e49): --rui-color-deep-pink, critical accent#ec7e00): --rui-color-warning, warning states#b09000): --rui-color-yellow, attention#00a87e): --rui-color-teal, success/positive#428619): --rui-color-light-green, secondary success#006400): --website-color-green-text, green text#007bc2): --rui-color-light-blue, informational#936d62): --rui-color-brown, warm neutral accent#8b0000): --website-color-red-text, dark red text#505a63): Secondary text#8d969e): Muted text, tertiary#c9c9cd): --rui-color-grey-tone-20, borders/dividersAeonik Pro — geometric grotesque, no detected fallbacksInter — standard system sansArial for specific button contexts| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |
| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |
| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |
| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |
| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |
| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |
| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |
| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |
| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |
| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |
| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |
Primary Dark Pill
- Background: #191c1f
- Text: #ffffff
- Padding: 14px 32px
- Radius: 9999px (full pill)
- Hover: opacity 0.85
- Focus: 0 0 0 0.125rem ring
Secondary Light Pill
- Background: #f4f4f4
- Text: #000000
- Padding: 14px 34px
- Radius: 9999px
- Hover: opacity 0.85
Outlined Pill
- Background: transparent
- Text: #191c1f
- Border: 2px solid #191c1f
- Padding: 14px 32px
- Radius: 9999px
Ghost on Dark
- Background: rgba(244, 244, 244, 0.1)
- Text: #f4f4f4
- Border: 2px solid #f4f4f4
- Padding: 14px 32px
- Radius: 9999px
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Everything — Revolut uses zero shadows |
| Focus | 0 0 0 0.125rem ring |
Accessibility focus |
Shadow Philosophy: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Compact, single column |
| Mobile | 400–720px | Standard mobile |
| Tablet | 720–1024px | 2-column layouts |
| Desktop | 1024–1280px | Standard desktop |
| Large | 1280–1920px | Full layout |
#191c1f)#ffffff)#f4f4f4)#494fdf)#e23b4a)#00a87e)