Revolut

Overview

Revolut's marketing canvas operates in a high-contrast two-mode system: a

**near-black storytelling canvas** (`{colors.canvas-dark}` — `#000000`)

that hosts hero bands, product mockups, and the planning section, alternating

with **white catalogue bands** (`{colors.canvas-light}` — `#ffffff`) that

host comparison tables, FAQ rows, and download tiles. The two modes switch

in full-bleed bands rather than soft transitions; sections slam against each

other to create the magazine-spread rhythm the brand is known for.

The display typography is **Aeonik Pro at weight 500**, used at sizes from

20px to 136px. The flagship hero ("Banking & Beyond", "Join the 70+ million

using Revolut") sits at 80–136px with `lineHeight: 1.0` and tight negative

letter-spacing. Body type is **Inter** at weight 400 — open-source,

no-nonsense, paired with positive tracking (`0.24px`) on UI labels for

slightly more mechanical precision.

The brand accent is `{colors.primary}` (`#494fdf`) — a saturated cobalt

violet — but it appears scarcely on marketing surfaces. The actual primary

CTA on the hero is the **white pill on black** ("Choose your subscription"),

and the cobalt violet is reserved for featured plan cards, secondary CTAs in

white sections, and the brand glyph itself. A wide secondary palette of deep

teal, light-blue, deep-pink, light-green, warning orange, and yellow appears

inside product mockups and feature illustrations — never as button surfaces.

**Key Characteristics:**

• Two-mode canvas system — `{colors.canvas-dark}` (true black) for storytelling, `{colors.canvas-light}` (white) for browsing — switched in full-bleed bands.
• Display typography is **Aeonik Pro 500** at sizes 20–136px with tight `lineHeight: 1.0` and large negative letter-spacing on display sizes.
• The actual primary CTA is `{component.button-primary}` — a **white pill with black text**, sitting on the dark canvas as the brightest pixel. Cobalt-violet `{colors.primary}` is reserved for featured plan cards and secondary CTAs.
• Eight saturated accent colours live inside product mockups and illustrations only, never as button surfaces — teal, light-blue, deep-pink, light-green, warning orange, yellow, brown, danger red.
• All buttons are pill-shaped (`{rounded.full}`); content cards use `{rounded.lg}` (20px); inputs and small chips use `{rounded.md}` (12px).
• Photography is product-led — phone mockups, card mockups, terminal mockups — shown full-bleed inside dark sections with no caption overlay.

Colors

Brand & Accent

• **Cobalt Violet** (`{colors.primary}` — `#494fdf`): the brand accent. Reserved for featured plan cards (`{component.plan-card-featured}`), the brand wordmark icon, and secondary CTAs in white-canvas regions.
• **Cobalt Bright** (`{colors.primary-bright}` — `#4f55f1`): a one-step-up bright variant used in inline link colour and accent-photo headers.
• **Cobalt Deep** (`{colors.primary-deep}` — `#3a40c4`): the active/pressed state of cobalt elements.
• **On-Primary** (`{colors.on-primary}` — `#ffffff`): label colour on top of `{colors.primary}` surfaces.

Surface

• **Canvas Light** (`{colors.canvas-light}` — `#ffffff`): the white catalogue mode for FAQ, download tiles, comparison tables.
• **Canvas Dark** (`{colors.canvas-dark}` — `#000000`): the storytelling canvas — true black, never near-black.
• **Surface Soft** (`{colors.surface-soft}` — `#f4f4f4`): a subtle off-white used on download tiles, soft buttons, and inset card groups inside white bands.
• **Surface Card** (`{colors.surface-card}` — `#ffffff`): pure white card surface, used for feature cards in white-canvas regions.
• **Surface Deep** (`{colors.surface-deep}` — `#0a0a0a`): a one-step-up dark surface for inset cards inside black-canvas regions.
• **Surface Elevated** (`{colors.surface-elevated}` — `#16181a`): the planning-section card background — slightly luminous, lifts plan cards off the black canvas.
• **Hairline Light** (`{colors.hairline-light}` — `#e2e2e7`): 1px dividers inside white bands.
• **Hairline Dark** (`{colors.hairline-dark}` — `rgba(255,255,255,0.12)`): the corresponding low-contrast divider in dark regions.
• **Hairline Strong** (`{colors.hairline-strong}` — `#191c1f`): structural full-strength dividers and the outline of light cards.

Text

• **Ink** (`{colors.ink}` — `#191c1f`): primary text colour. Notably warmer than pure black, paired with the white canvas for body legibility.
• **Body** (`{colors.body}` — `#1f2226`): long-form body where `{colors.ink}` would feel slightly too sharp.
• **Charcoal** (`{colors.charcoal}` — `#3a3d40`): captions, secondary nav.
• **Mute** (`{colors.mute}` — `#505a63`): supporting text.
• **Ash** (`{colors.ash}` — `#5c5e60`): tertiary text, footer copy.
• **Stone** (`{colors.stone}` — `#8d969e`): metadata, subtle captions.
• **Faint** (`{colors.faint}` — `#c9c9cd`): disabled foreground, hairline replacements.
• **On-Dark** (`{colors.on-dark}` — `#ffffff`): primary text on `{colors.canvas-dark}`.
• **On-Dark Mute** (`{colors.on-dark-mute}` — `rgba(255,255,255,0.72)`): secondary text in dark regions.

Semantic

• **Accent Teal** (`{colors.accent-teal}` — `#00a87e`): used in product mockup illustrations.
• **Accent Light Blue** (`{colors.accent-light-blue}` — `#007bc2`): inline link colour in dark photo headers.
• **Accent Blue Link** (`{colors.accent-blue-link}` — `#376cd5`): default inline link colour on white surfaces.
• **Accent Light Green** (`{colors.accent-light-green}` — `#428619`): success / positive product callouts.
• **Accent Green Text** (`{colors.accent-green-text}` — `#006400`): inline success text.
• **Accent Yellow** (`{colors.accent-yellow}` — `#b09000`): caution / pending state in product mockups.
• **Accent Warning** (`{colors.accent-warning}` — `#ec7e00`): full-saturation orange used in warning illustrations.
• **Accent Pink** (`{colors.accent-pink}` — `#e61e49`): deep pink — used inside product photography and category iconography.
• **Accent Danger** (`{colors.accent-danger}` — `#e23b4a`): destructive / error state.
• **Accent Deep Red** (`{colors.accent-deep-red}` — `#8b0000`): inline error text.
• **Accent Brown** (`{colors.accent-brown}` — `#936d62`): a single warm-neutral used in metals tier card chrome.
• **Link** (`{colors.link}` — `#376cd5`): default inline link colour. Same as `{colors.accent-blue-link}`.

Typography

Font Family

Revolut ships a two-family stack:

• **Aeonik Pro** — proprietary humanist sans-serif used for all display sizes (20px+) at weight 500. Carries the brand's editorial confidence; tightens dramatically with negative letter-spacing at large sizes.
• **Inter** — open-source workhorse for body, button labels, captions, and metadata. Always at weight 400 or 600, with positive tracking (`0.16–0.24px`) on UI labels.

When Aeonik Pro cannot be licensed, **Inter Display**, **General Sans**, or **Söhne** are credible substitutes — all share the warm geometric character. Apply -1% letter-spacing on display sizes to match the original tightness.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xxl}` | 136px | 500 | 1.0 | -2.72px | The flagship hero ("Banking & Beyond"). One per page. |

| `{typography.display-xl}` | 80px | 500 | 1.0 | -0.8px | Section openers ("Join the 70+ million using Revolut"). |

| `{typography.display-lg}` | 48px | 500 | 1.21 | -0.48px | Sub-section titles. |

| `{typography.display-md}` | 40px | 500 | 1.2 | -0.4px | Feature card titles. |

| `{typography.heading-lg}` | 32px | 500 | 1.19 | -0.32px | Plan card titles. |

| `{typography.heading-md}` | 24px | 500 | 1.33 | 0 | Section sub-titles. |

| `{typography.heading-sm}` | 20px | 500 | 1.4 | 0 | List headers, prominent labels. |

| `{typography.body-lg}` | 18px | 400 | 1.56 | -0.09px | Marketing prose. |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0.24px | Default body. |

| `{typography.body-md-bold}` | 16px | 600 | 1.5 | 0.16px | Emphatic body. |

| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Captions, metadata. |

| `{typography.button-lg}` | 20px | 500 | 1.4 | 0 | Hero CTAs (Aeonik Pro). |

| `{typography.button-md}` | 16px | 600 | 1.5 | 0.24px | Default button label. |

| `{typography.button-sm}` | 14px | 600 | 1.43 | 0 | Pill chips, sub-nav. |

| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Footer disclosure, regulatory text. |

| `{typography.link-emph}` | 16px | 700 | 1.5 | 0.24px | Emphatic inline link in dark mode. |

Principles

• Display sizes always run at weight 500 with `lineHeight: 1.0` (or 1.19–1.21 below 48px). The negative letter-spacing scales with size — bigger types tighten more.
• Body Inter sits at weight 400 with positive tracking (`0.24px`) — the small spacing nudge makes UI labels feel slightly mechanical, fitting fintech precision.
• Hero CTAs use the Aeonik Pro `{typography.button-lg}` variant; everything below the hero uses the Inter `{typography.button-md}`.
• Inline links inside dark photo regions step up to weight 700 (`{typography.link-emph}`) so they hold contrast against the canvas without using the cobalt accent.

Note on Font Substitutes

When Aeonik Pro is unavailable, clamp display `lineHeight` to 1.0 explicitly and apply -1% letter-spacing on display sizes. Inter Display, General Sans, or Söhne will read closest to the original. Inter is open-source and should be used directly.

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.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| 0 — flat | No shadow, no border | Default canvas bands (light or dark), full-bleed hero. |

| 1 — surface card | `{colors.surface-card}` (white) on `{colors.surface-soft}` band | Feature cards inside light bands. |

| 2 — surface elevated dark | `{colors.surface-elevated}` (`#16181a`) on `{colors.canvas-dark}` | Plan cards inside the planning section. |

| 3 — featured surface | `{colors.primary}` on `{colors.canvas-dark}` | Featured plan card (cobalt violet inversion). |

| 4 — product mockup | Full-bleed photo asset | Hero phone / card / terminal mockup bands. |

The system has **no traditional drop-shadow language**. Surfaces register depth via colour-blocking (light → dark band switches) and surface-luminance shifts (`{colors.canvas-dark}` → `{colors.surface-elevated}`). Photography mockups carry their own depth from the asset itself.

Decorative Depth

• **Product mockup hero bands** — the home page features a phone mockup full-bleed against `{colors.canvas-dark}`, with the device's own glow providing the only atmospheric depth. No additional gradients, no shadows.
• **Featured plan card** — the cobalt-violet `{component.plan-card-featured}` sits inside the otherwise dark planning grid as a single saturated colour block, marking the recommended tier visually.
• **Card metals tier** — the brand uses `{colors.accent-brown}` and a deep gradient on metals card mockups to signal premium without resorting to gold-on-black metallic effects.

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.

Components

Buttons

**`button-primary`** — white CTA on dark

• Background `{colors.canvas-light}`, label `{colors.canvas-dark}`, type `{typography.button-md}`, padding `14px 28px`, `rounded: {rounded.full}`, height 48px.
• The brand's primary CTA, used on every dark hero band ("Choose your subscription", "Get started").
• Pressed state lives in `button-primary-pressed` (background `{colors.faint}`).

**`button-dark`** — dark CTA on light

• Background `{colors.canvas-dark}`, label `{colors.on-dark}`, type `{typography.button-md}`, `rounded: {rounded.full}`.
• The reverse-canvas equivalent of `{component.button-primary}` — used inside white catalogue bands.

**`button-soft`** — soft surface CTA

• Background `{colors.surface-soft}`, label `{colors.ink}`, type `{typography.button-md}`, `rounded: {rounded.full}`.
• Tertiary action in white-canvas regions ("Learn more", "View FAQs").

**`button-outline-light`** — outlined CTA on light

• Background `{colors.canvas-light}`, label `{colors.ink}`, 1px solid `{colors.hairline-strong}`, type `{typography.button-md}`, `rounded: {rounded.full}`.
• Secondary action when paired with `{component.button-dark}`.

**`button-outline-dark`** — outlined CTA on dark

• Background `{colors.canvas-dark}`, label `{colors.on-dark}`, 1px solid `{colors.on-dark}`, type `{typography.button-md}`, `rounded: {rounded.full}`, padding `13px 27px`, height 48px.
• Dark-canvas counterpart of `{component.button-outline-light}`; used inside dark hero bands as a tertiary action when paired with `{component.button-primary}`.

**`button-pill-sm`** — small pill chip

• Background `{colors.surface-soft}`, label `{colors.ink}`, type `{typography.button-sm}`, `rounded: {rounded.full}`, padding `8px 16px`, height 36px.
• Sub-nav chips, filter pills.

Cards & Containers

**`hero-band-dark`** — full-bleed dark hero

• Background `{colors.canvas-dark}`, text `{colors.on-dark}`, type `{typography.display-xxl}` for the title, padding `{spacing.section}` (88px) vertical, `rounded: {rounded.none}`.
• Used only on the home page hero band.

**`hero-band-photo`** — photo-led hero

• Background `{colors.canvas-dark}` with full-bleed product photography, text `{colors.on-dark}`, type `{typography.display-xl}`, `rounded: {rounded.none}`.
• Used on product pages — phone or card mockup as the full-band canvas.

**`feature-card-light`** — feature card on white

• Background `{colors.surface-card}`, text `{colors.ink}`, 1px solid `{colors.hairline-light}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}` (32px).
• Used in white catalogue bands for feature comparisons.

**`feature-card-dark`** — feature card on dark

• Background `{colors.surface-elevated}`, text `{colors.on-dark}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}`.
• Used inside dark storytelling sections.

**`plan-card`** — subscription plan card

• Background `{colors.surface-elevated}`, text `{colors.on-dark}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}` (32px).
• Plan name in `{typography.heading-lg}` ("Standard", "Plus", "Premium", "Metal", "Ultra").

**`plan-card-featured`** — featured plan card

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}`.
• Cobalt-violet inversion of `{component.plan-card}` — used on the recommended tier.

**`product-mockup`** — full-bleed product asset

• Background `{colors.canvas-dark}`, the asset itself fills the band, `rounded: {rounded.xl}` on the device chrome.
• Phone, card, and terminal mockups — no caption overlay, no surrounding chrome.

**`download-tile`** — app store download tile

• Background `{colors.surface-soft}`, text `{colors.ink}`, type `{typography.body-sm}`, `rounded: {rounded.md}`, padding `12px 20px`, height 56px.
• App Store + Google Play download buttons, side-by-side.

Inputs & Forms

**`text-input`** — default input

• Background `{colors.canvas-light}`, text `{colors.ink}`, type `{typography.body-md}`, 1px solid `{colors.hairline-light}`, `rounded: {rounded.md}`, padding `14px 16px`, height 56px.
• Generous height for fintech accessibility — comfortably exceeds WCAG AAA touch target.

Navigation

**`nav-bar`** — top nav (desktop)

• Background `{colors.canvas-dark}`, text `{colors.on-dark}`, type `{typography.button-md}`, height 64px.
• Left: wordmark logo. Centre: top-level nav ("Personal", "Business", "Company"). Right: language switcher + "Log in" + `{component.button-primary}`.

**`nav-bar`** (mobile)

• Same height 64px, collapses centre nav into a hamburger icon. Logo stays left, sign-in CTA stays right.

**`sub-nav-pill`** — sub-nav chip

• Pill chips set in a horizontal row inside dark sections (e.g. "Personal", "Business", "Premium"), `{component.sub-nav-pill}` styling.

Signature Components

**`badge-tag`** — neutral tag

• Background `{colors.surface-soft}`, text `{colors.ink}`, type `{typography.caption}`, `rounded: {rounded.full}`, padding `4px 12px`.
• Inline tags inside feature cards.

**`badge-feature`** — feature highlight badge

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.caption}`, `rounded: {rounded.full}`, padding `4px 12px`.
• "New", "Most popular" badges anchored on plan cards.

**`footer`** — global footer

• Background `{colors.canvas-dark}`, text `{colors.on-dark-mute}`, type `{typography.body-sm}`, `rounded: {rounded.none}`, padding `80px 24px`.
• Multi-column quick-links grid above a copyright + regulatory disclosure block separated by `{colors.divider-soft}`.

Do's and Don'ts

Do

• Switch full bands between `{colors.canvas-dark}` (storytelling) and `{colors.canvas-light}` (catalogue). The two-mode rhythm is core.
• Use `{component.button-primary}` (white pill on dark) as the primary CTA on every dark hero band. It's the brand's loudest action.
• Reserve `{colors.primary}` for the featured plan card and the brand wordmark — the cobalt should feel like a deliberate stamp, not a colour theme.
• Set hero headlines in **Aeonik Pro 500** at 80–136px with `lineHeight: 1.0` and large negative letter-spacing.
• Use **Inter** for body, button labels, captions — never substitute Aeonik Pro for body type.
• Apply `{rounded.full}` to every button and pill; `{rounded.lg}` (20px) to feature and plan cards; `{rounded.md}` (12px) to inputs.
• Show product mockups full-bleed inside dark sections — the asset IS the section.
• Use the wide accent palette (`{colors.accent-teal}`, `{colors.accent-pink}`, `{colors.accent-light-green}`, etc.) inside product illustrations and iconography only.

Don't

• Don't use accent colours (`{colors.accent-teal}`, `{colors.accent-pink}`, etc.) as button surfaces. They live inside illustrations only.
• Don't use a near-black canvas. The brand is `#000000`, not `#0a0a0a`.
• Don't pair white text with cobalt violet inside body content — `{colors.primary}` is for the featured plan card surface, not large prose.
• Don't add drop shadows on cards. Elevation is canvas + surface-luminance shifts.
• Don't introduce a secondary brand colour. Cobalt violet is the only brand stamp.
• Don't loosen Aeonik Pro `lineHeight` past 1.0 on display sizes. Tight stacking is structural.
• Don't bump body Inter to weight 500. Use 400 (default) or 600 (emphatic) — never the in-between.
• Don't pair `{colors.canvas-dark}` with another dark surface beyond `{colors.surface-elevated}`. The surface ladder has only two dark steps.

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.

개요

Revolut의 마케팅 캔버스는 고대비 2가지 모드 시스템으로 작동합니다.

**검은색에 가까운 스토리텔링 캔버스** (`{colors.canvas-dark}` — `#000000`)

히어로 밴드, 제품 모형, 기획 섹션이 번갈아 가며 진행됩니다.

**흰색 카탈로그 밴드**(`{colors.canvas-light}` — `#ffffff`)를 사용하면

비교표, FAQ 행을 호스트하고 타일을 다운로드합니다. 두 가지 모드 전환

소프트 전환보다는 풀 블리드 밴드에서; 섹션이 각각에 대해 슬램

다른 브랜드는 잡지에 널리 퍼져 있는 리듬을 만들어냅니다.

디스플레이 타이포그래피는 **Aeonik Pro at Weight 500**이며,

20px ~ 136px. 주력 영웅("Banking & Beyond", "7천만 명 이상의 대열에 합류하세요")

Revolut 사용")은 `lineHeight: 1.0` 및 엄격한 음수로 80~136px에 위치합니다.

문자 간격. 체형은 체중 400의 **Inter**입니다 — 오픈 소스,

말도 안되는 소리, UI 라벨의 포지티브 추적(`0.24px`)과 쌍을 이룹니다.

약간 더 기계적 정밀도가 향상되었습니다.

브랜드 액센트는 포화 코발트인 `{colors.primary}`(`#494fdf`)입니다.

보라색 — 그러나 마케팅 표면에는 거의 나타나지 않습니다. 실제 기본

영웅의 CTA는 **검은색 바탕에 흰색 알약**("구독 선택")입니다.

코발트 바이올렛은 주요 계획 카드, 보조 CTA용으로 예약되어 있습니다.

흰색 섹션, 브랜드 문양 자체. 깊은 깊이의 넓은 보조 팔레트

청록색, 연한 파란색, 진한 분홍색, 연한 녹색, 경고 주황색 및 노란색이 나타납니다.

내부 제품 모형 및 특집 일러스트레이션은 버튼 표면으로 사용되지 않습니다.

**주요 특징:**

• 2가지 모드 캔버스 시스템 - 스토리텔링을 위한 `{colors.canvas-dark}`(진짜 검정), 탐색을 위한 `{colors.canvas-light}`(흰색) - 풀 블리드 밴드로 전환됩니다.
• 디스플레이 타이포그래피는 크기 20~136px의 **Aeonik Pro 500**이며, 디스플레이 크기에서는 'lineHeight: 1.0'이 빡빡하고 음수 문자 간격이 큽니다.
• 실제 기본 CTA는 `{comComponent.button-primary}`입니다. **검은색 텍스트가 있는 흰색 알약**은 어두운 캔버스에 가장 밝은 픽셀로 표시됩니다. 코발트-보라색 `{colors.primary}`는 주요 계획 카드 및 보조 CTA용으로 예약되어 있습니다.
• 청록색, 연한 파란색, 진한 분홍색, 연한 녹색, 경고 주황색, 노란색, 갈색, 위험 빨간색 등 8가지 강렬한 강조 색상이 제품 모형 및 일러스트레이션 내부에만 적용되며 버튼 표면에는 적용되지 않습니다.
• 모든 버튼은 알약 모양입니다(`{rounded.full}`). 콘텐츠 카드는 `{rounded.lg}`(20px)를 사용합니다. 입력 및 소형 칩은 `{rounded.md}`(12px)를 사용합니다.
• 사진은 제품 중심입니다(휴대폰 모형, 카드 모형, 단말기 모형). 캡션 오버레이 없이 어두운 부분 내부에 풀 블리드가 표시됩니다.

색상

브랜드 및 액센트

• **코발트 바이올렛** (`{colors.primary}` — `#494fdf`): 브랜드 액센트. 추천 계획 카드(`{comComponent.plan-card-featured}`), 브랜드 워드마크 아이콘 및 흰색 캔버스 영역의 보조 CTA용으로 예약되어 있습니다.
• **코발트 브라이트**(`{colors.primary-bright}` — `#4f55f1`): 인라인 링크 색상 및 강조 사진 헤더에 사용되는 한 단계 높은 밝은 변형입니다.
• **코발트 딥** (`{colors.primary-deep}` — `#3a40c4`): 코발트 요소의 활성/압착 상태.
• **On-Primary** (`{colors.on-primary}` — `#ffffff`): `{colors.primary}` 표면 위에 라벨 색상을 표시합니다.

표면

• **캔버스 라이트**(`{colors.canvas-light}` — `#ffffff`): FAQ, 다운로드 타일, 비교 테이블을 위한 화이트 카탈로그 모드입니다.
• **캔버스 다크**(`{colors.canvas-dark}` — `#000000`): 스토리텔링 캔버스 — 검은색에 가깝지 않고 진정한 검은색입니다.
• **소프트 표면**(`{colors.surface-soft}` — `#f4f4f4`): 다운로드 타일, 소프트 버튼 및 흰색 밴드 내부에 삽입된 카드 그룹에 사용되는 은은한 황백색입니다.
• **표면 카드**(`{colors.surface-card}` — `#ffffff`): 흰색 캔버스 영역의 기능 카드에 사용되는 순수한 흰색 카드 표면입니다.
• **표면 깊이**(`{colors.surface-deep}` — `#0a0a0a`): 검정색 캔버스 영역 내부에 삽입된 카드를 위한 한 단계 향상된 어두운 표면입니다.
• **Surface Elevated** (`{colors.surface-elevated}` — `#16181a`): 계획 섹션 카드 배경 — 약간 빛나고 검은 캔버스에서 계획 카드를 들어 올립니다.
• **헤어라인 라이트** (`{colors.hairline-light}` — `#e2e2e7`): 흰색 밴드 내부에 1px 구분선이 있습니다.
• **Hairline Dark** (`{colors.hairline-dark}` — `rgba(255,255,255,0.12)`): 어두운 영역의 해당 저대비 구분선입니다.
• **Hairline Strong** (`{colors.hairline-strong}` — `#191c1f`): 구조적 최대 강도 구분선 및 라이트 카드의 윤곽선.

텍스트

• **잉크** (`{colors.ink}` — `#191c1f`): 기본 텍스트 색상. 순수한 검정색보다 눈에 띄게 따뜻하며 신체 가독성을 위해 흰색 캔버스와 짝을 이룹니다.
• **본문**(`{colors.body}` — `#1f2226`): `{colors.ink}`가 약간 너무 선명하게 느껴지는 긴 형식의 본문입니다.
• **차콜**(`{colors.charcoal}` — `#3a3d40`): 캡션, 보조 탐색.
• **음소거** (`{colors.mute}` — `#505a63`): 지원 텍스트.
• **Ash** (`{colors.ash}` — `#5c5e60`): 3차 텍스트, 바닥글 사본.
• **Stone** (`{colors.stone}` — `#8d969e`): 메타데이터, 미묘한 캡션.
• **희미함** (`{colors.faint}` — `#c9c9cd`): 전경 비활성화, 가는선 교체

概要

Revolut のマーケティング キャンバスは、ハイコントラストの 2 モード システムで動作します。

**黒に近いストーリーテリング キャンバス** (`{colors.canvas-dark}` — `#000000`)

ヒーローバンド、製品モックアップ、企画セクションを交互に開催します。

**白いカタログ バンド** (`{colors.canvas-light}` — `#ffffff`)

ホスト比較表、FAQ 行、およびダウンロード タイル。 2つのモードが切り替わります

ソフトトランジションではなくフルブリードバンドで。セクションがそれぞれにぶつかる

他には、ブランドの特徴である雑誌の広がりのリズムを生み出すためのものもあります。

ディスプレイのタイポグラフィは **Aeonik Pro、ウェイト 500** で、以下のサイズで使用されます。

20ピクセルから136ピクセル。代表的なヒーロー (「バンキング & ビヨンド」、「7,000 万人以上の人々に参加」

Revolut を使用") は `lineHeight: 1.0` で 80 ～ 136 ピクセルに設定され、タイトなネガティブになります

文字間隔。ボディタイプは **Inter**、重量 400 — オープンソース、

UI ラベルのポジティブ トラッキング (`0.24px`) と組み合わせた、ナンセンスな機能です。

機械的な精度が若干向上します。

ブランドのアクセントは `{colors.primary}` (`#494fdf`) — 飽和コバルトです

紫 — しかし、マーケティングの表面にはほとんど登場しません。実際のプライマリー

主人公の CTA は **黒地に白い錠剤** (「サブスクリプションを選択してください」)、

コバルト バイオレットは、注目のプラン カード、セカンダリ CTA 用に予約されています。

白い部分とブランドのグリフ自体。ディープの幅広いセカンダリパレット

ティール、ライトブルー、ディープピンク、ライトグリーン、警告オレンジ、イエローが表示されます

製品のモックアップや機能のイラストの内部に使用します。ボタンの表面として使用することはありません。

**主な特徴:**

• 2 モード キャンバス システム — ストーリーテリング用の `{colors.canvas-dark}` (真の黒)、ブラウジング用の `{colors.canvas-light}` (白) — フルブリード バンドで切り替えられます。
• ディスプレイ タイポグラフィは **Aeonik Pro 500** で、サイズ 20 ～ 136px、狭い `lineHeight: 1.0` とディスプレイ サイズでの大きな負の文字間隔です。
• 実際のプライマリ CTA は `{component.button-primary}` です。これは、**黒いテキストが付いた白い錠剤**で、暗いキャンバス上に最も明るいピクセルとして配置されています。コバルトバイオレット「{colors.primary}」は、注目のプラン カードとセカンダリ CTA 用に予約されています。
• 8 つの彩度の高いアクセント カラーは、製品モックアップとイラスト内にのみ存在し、ボタンの表面としては使用されません - ティール、ライトブルー、ディープピンク、ライトグリーン、警告オレンジ、黄色、茶色、デンジャーレッド。
• すべてのボタンは錠剤の形 (`{rounded.full}`) です。コンテンツ カードは `{rounded.lg}` (20px) を使用します。入力と小さなチップは `{rounded.md}` (12px) を使用します。
• 写真は製品主導で、電話のモックアップ、カードのモックアップ、端末のモックアップなど、キャプション オーバーレイなしで暗いセクション内でフルブリードで表示されます。

色

ブランドとアクセント

• **コバルト バイオレット** (`{colors.primary}` — `#494fdf`): ブランドのアクセント。注目のプラン カード (`{component.plan-card-featured}`)、ブランドのワードマーク アイコン、および白いキャンバス領域のセカンダリ CTA 用に予約されています。
• **Cobalt Bright** (`{colors.primary-bright}` — `#4f55f1`): インライン リンクの色とアクセント写真のヘッダーで使用される、1 段階上の明るいバリアントです。
• **コバルトディープ** (`{colors.primary-deep}` — `#3a40c4`): コバルト元素のアクティブ/プレス状態。
• **On-Primary** (`{colors.on-primary}` — `#ffffff`): `{colors.primary}` サーフェス上のラベル カラー。

表面

• **キャンバス ライト** (`{colors.canvas-light}` — `#ffffff`): FAQ、ダウンロード タイル、比較表用のホワイト カタログ モード。
• **キャンバス ダーク** (`{colors.canvas-dark}` — `#000000`): ストーリーテリング キャンバス — 本物の黒、決して黒に近いものではありません。
• **Surface Soft** (`{colors.surface-soft}` — `#f4f4f4`): ダウンロード タイル、ソフト ボタン、および白いバンド内の差し込みカード グループに使用される微妙なオフホワイト。
• **表面カード** (`{colors.surface-card}` — `#ffffff`): 純白のカード表面。白いキャンバス領域のフィーチャー カードに使用されます。
• **サーフェス ディープ** (`{colors.surface-deep}` — `#0a0a0a`): 黒のキャンバス領域内の差し込みカード用の 1 段階上のダーク サーフェス。
• **Surface Elevated** (`{colors.surface-elevated}` — `#16181a`): 計画セクションのカードの背景 — わずかに明るく、黒いキャンバスから計画カードを持ち上げます。
• **ヘアライン ライト** (`{colors.hairline-light}` — `#e2e2e7`): 白いバンド内の 1 ピクセルの仕切り。
• **Hairline Dark** (`{colors.hairline-dark}` — `rgba(255,255,255,0.12)`): 暗い領域の対応する低コントラストのディバイダー。
• **ヘアライン ストロング** (`{colors.hairline-strong}` — `#191c1f`): 構造的な完全強度の仕切りとライト カードの輪郭。

テキスト

• **インク** (`{colors.ink}` — `#191c1f`): テキストの主色。純粋な黒よりも明らかに暖かく、白いキャンバスと組み合わせてボディを読みやすくします。
• **本文** (`{colors.body}` — `#1f2226`): `{colors.ink}` が少しシャープすぎると感じる長い形式の本文。
• **Charcoal** (`{colors.charcoal}` — `#3a3d40`): キャプション、セカンダリ ナビゲーション。
• **ミュート** (`{colors.mute}` — `#505a63`): サポート テキスト。
• **Ash** (`{colors.ash}` — `#5c5e60`): 三次テキスト、フッター コピー。
• **Stone** (`{colors.stone}` — `#8d969e`): メタデータ、微妙なキャプション。
• **かすかな** (`{colors.faint}` — `#c9c9cd`): 前景を無効にし、ヘアラインのリプラを無効にします