Untitled Design System
Revolut's marketing canvas operates in a high-contrast two-mode system: a near-black storytelling canvas #000000 that hosts hero bands, product mockups, and the planning section, alternating with white catalogue bands #ffffff. The system uses Aeonik Pro for display typography (weights 20–136px) and Inter for body text. The primary CTA uses white pills on black canvas, while cobalt violet #494fdf appears only in specific contexts. Depth is achieved through color blocking and surface luminance shifts.
Color Palette
Brand & Accent
Surface
Text
Semantic
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Revolut's marketing canvas operates in a high-contrast two-mode system: a near-black storytelling canvas #000000 that hosts hero bands, product mockups, and the planning section, alternating with white catalogue bands #ffffff. The system uses Aeonik Pro for display typography (weights 20–136px) and Inter for body text. The primary CTA uses white pills on black canvas, while cobalt violet #494fdf appears only in specific contexts. Depth is achieved through color blocking and surface luminance shifts.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Elevation & Depth
Do's & Don'ts
Do
Don't
Layout
### Spacing System
• Base unit: 4px, with the working scale on multiples of 4 / 8 / 16.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 6px · {spacing.sm} 8px · {spacing.md} 14px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.xxxl} 48px · {spacing.block} 80px · {spacing.section} 88px · {spacing.band} 120px.
• Section padding: {spacing.section} (88px) vertical between bands; {spacing.band} (120px) on the hero band and the closing planning section.
• Card internal padding: {spacing.xxl} (32px) on {component.feature-card-light}, {component.plan-card}, {component.feature-card-dark}.
### Grid & Container
• Max content width ≈ 1200px on body sections; hero bands run full-bleed.
• Plan grid: 4-up plan cards on the home page, stacking 2-up at tablet and 1-up at small mobile.
• Feature grid: 3-up at desktop, 2-up at tablet, 1-up at mobile.
• Product mockup bands: a single full-width hero photo of a phone or card mockup, no surrounding chrome — the asset itself is the section.
### Whitespace Philosophy
• Whitespace is generous and editorial — sections breathe at 88–120px so display headlines have room to register at 80–136px without feeling cramped.
• Inside cards, padding stays at 32px so feature copy and plan tiers have a consistent rhythm.
• Hairline {colors.hairline-light} dividers replace shadow on white surfaces; {colors.hairline-dark} carries the corresponding role in dark regions.
Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| {rounded.none} | 0px | Hero bands, full-bleed sections, footer. |
| {rounded.sm} | 8px | Inline tags, small chips. |
| {rounded.md} | 12px | Form inputs, download tiles. |
| {rounded.lg} | 20px | Feature cards, plan cards. |
| {rounded.xl} | 28px | Product mockup containers. |
| {rounded.full} | 9999px | Buttons, pills, badges, tabs. |
### Photography Geometry
• Phone mockups: 9:19.5 (vertical) with {rounded.xl} corners on the device chrome.
• Card mockups: 1.586:1 (credit-card aspect) with {rounded.lg} corners.
• Terminal/POS mockups: 4:3 with {rounded.xl} corners and substantial padding around the device.
• Lifestyle photography (rare): 16:9 with {rounded.lg} corners.
Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Desktop XL | ≥ 1440px | 4-up plan grid, full-bleed product mockup bands, max content 1200. |
| Desktop | 1280–1439px | Container shrinks; xl side padding. |
| Tablet Large | 1024–1279px | Plan grid 4-up; feature grid 3-up. |
| Tablet | 768–1023px | Plan grid 2-up; feature grid 2-up. |
| Mobile Large | 426–767px | Plan grid 1-up; feature grid 1-up; nav collapses to hamburger; hero display-xxl clamps to 64px. |
| Mobile | ≤ 425px | All grids 1-up; hero clamps to 48px; section padding {spacing.section} collapses to 64px. |
### Touch Targets
• All buttons ship at minimum 48px tall — comfortably exceeds WCAG AAA (44px). Default {component.button-primary} is 48px.
• {component.text-input} is 56px tall — fintech-grade accessibility.
• {component.button-pill-sm} (36px) is bumped to 44px on mobile via padding adjustment.
### Collapsing Strategy
• Top-level nav collapses to hamburger at < 1024px; the wordmark and {component.button-primary} stay anchored.
• Hero {typography.display-xxl} clamps: 136px → 80px → 64px → 48px across the breakpoint ladder.
• Plan grid steps from 4-up to 2-up at < 1024px to 1-up at < 768px.
• Product mockup bands maintain full-bleed at every breakpoint; the asset crops inward rather than letterboxing.
• Sub-nav pills convert from a wrap row to a horizontal scroll-rail at < 768px.
### Image Behavior
• Phone and card mockups are served at 1.5× and 2× DPR; below 768px the system swaps to a smaller hero crop.
• Product photography retains its own atmospheric lighting at every breakpoint — no responsive variant assets.
Iteration Guide
1. Focus on ONE component at a time. Most surfaces share the {colors.canvas-dark} / {colors.canvas-light} pair with {rounded.full} for buttons and {rounded.lg} for cards.
2. Reference component names and tokens directly ({colors.primary}, {component.plan-card-featured}, {rounded.lg}) — do not paraphrase.
3. Run npx @google/design.md lint DESIGN.md after edits; orphaned-tokens warnings will catch unused entries.
4. Add new variants as separate entries (-pressed, -featured, -disabled) — do not bury them in prose.
5. Default body type to {typography.body-md} (Inter 400 with positive tracking); reach for {typography.body-md-bold} only on emphasis.
6. Keep {colors.primary} scarce — if more than one cobalt-violet element appears per viewport, ask whether one should drop to {component.plan-card} ({colors.surface-elevated}) instead.
Known Gaps
• Pressed/active visual states are documented for button-primary-pressed only; other components rely on focus-ring (browser default) for interactive feedback.
• Logged-in app surfaces (transactions, transfers, account settings) are out of scope — only the public marketing canvas is documented.
• The wide accent palette ({colors.accent-teal} through {colors.accent-brown}) is captured from the extracted token set, but exact usage inside product illustrations varies per market and product line; document per-illustration rather than as system buttons.
• Mobile-app screenshot art direction (phone bezels, status bars) is product-photography territory and not standardised as design tokens.
Use with MCP
Don't have the MCP? Install it here