getrelay 0.1.0

package/design-md/revolut/DESIGN.md

@@ -0,0 +1,636 @@
+---
+version: alpha
+name: Revolut
+description: |
+  Revolut's marketing surfaces pair a stark black canvas with the brand's
+  cobalt-violet (`#494fdf`) and a wide accent palette of deep, fully-saturated
+  product colours — teal, light-blue, deep pink, light-green, warning orange.
+  The system reads as fintech-meets-product-brochure: oversized 80px–136px
+  Aeonik Pro display headlines, generous whitespace, photography-led hero
+  bands, and full-width product mockups (cards, phones, terminals) shown as
+  hero objects inside near-black sections. Most surfaces are either black or
+  off-white; pill-shaped buttons and rounded-12/20px content cards carry the
+  consumer-financial-app feel without crossing into playful territory.
+
+colors:
+  primary: "#494fdf"
+  primary-bright: "#4f55f1"
+  primary-deep: "#3a40c4"
+  on-primary: "#ffffff"
+  ink: "#191c1f"
+  body: "#1f2226"
+  charcoal: "#3a3d40"
+  mute: "#505a63"
+  ash: "#5c5e60"
+  stone: "#8d969e"
+  faint: "#c9c9cd"
+  on-dark: "#ffffff"
+  on-dark-mute: "rgba(255,255,255,0.72)"
+  canvas-light: "#ffffff"
+  canvas-dark: "#000000"
+  surface-soft: "#f4f4f4"
+  surface-card: "#ffffff"
+  surface-deep: "#0a0a0a"
+  surface-elevated: "#16181a"
+  hairline-light: "#e2e2e7"
+  hairline-dark: "rgba(255,255,255,0.12)"
+  hairline-strong: "#191c1f"
+  divider-soft: "rgba(255,255,255,0.06)"
+  accent-teal: "#00a87e"
+  accent-blue-link: "#376cd5"
+  accent-light-blue: "#007bc2"
+  accent-light-green: "#428619"
+  accent-green-text: "#006400"
+  accent-yellow: "#b09000"
+  accent-warning: "#ec7e00"
+  accent-pink: "#e61e49"
+  accent-danger: "#e23b4a"
+  accent-deep-red: "#8b0000"
+  accent-brown: "#936d62"
+  link: "#376cd5"
+
+typography:
+  display-xxl:
+    fontFamily: Aeonik Pro
+    fontSize: 136px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: -2.72px
+  display-xl:
+    fontFamily: Aeonik Pro
+    fontSize: 80px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: -0.8px
+  display-lg:
+    fontFamily: Aeonik Pro
+    fontSize: 48px
+    fontWeight: 500
+    lineHeight: 1.21
+    letterSpacing: -0.48px
+  display-md:
+    fontFamily: Aeonik Pro
+    fontSize: 40px
+    fontWeight: 500
+    lineHeight: 1.2
+    letterSpacing: -0.4px
+  heading-lg:
+    fontFamily: Aeonik Pro
+    fontSize: 32px
+    fontWeight: 500
+    lineHeight: 1.19
+    letterSpacing: -0.32px
+  heading-md:
+    fontFamily: Aeonik Pro
+    fontSize: 24px
+    fontWeight: 500
+    lineHeight: 1.33
+    letterSpacing: 0
+  heading-sm:
+    fontFamily: Aeonik Pro
+    fontSize: 20px
+    fontWeight: 500
+    lineHeight: 1.4
+    letterSpacing: 0
+  body-lg:
+    fontFamily: Inter
+    fontSize: 18px
+    fontWeight: 400
+    lineHeight: 1.56
+    letterSpacing: -0.09px
+  body-md:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0.24px
+  body-md-bold:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: 600
+    lineHeight: 1.5
+    letterSpacing: 0.16px
+  body-sm:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.43
+  button-lg:
+    fontFamily: Aeonik Pro
+    fontSize: 20px
+    fontWeight: 500
+    lineHeight: 1.4
+  button-md:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: 600
+    lineHeight: 1.5
+    letterSpacing: 0.24px
+  button-sm:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 1.43
+  caption:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: 400
+    lineHeight: 1.4
+  link-emph:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: 700
+    lineHeight: 1.5
+    letterSpacing: 0.24px
+
+rounded:
+  none: 0px
+  sm: 8px
+  md: 12px
+  lg: 20px
+  xl: 28px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 6px
+  sm: 8px
+  md: 14px
+  lg: 16px
+  xl: 24px
+  xxl: 32px
+  xxxl: 48px
+  block: 80px
+  section: 88px
+  band: 120px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.canvas-light}"
+    textColor: "{colors.canvas-dark}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 14px 28px
+    height: 48px
+  button-primary-pressed:
+    backgroundColor: "{colors.faint}"
+    textColor: "{colors.canvas-dark}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+  button-dark:
+    backgroundColor: "{colors.canvas-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 14px 28px
+    height: 48px
+  button-soft:
+    backgroundColor: "{colors.surface-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 14px 28px
+    height: 48px
+  button-outline-light:
+    backgroundColor: "{colors.canvas-light}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 13px 27px
+    height: 48px
+  button-outline-dark:
+    backgroundColor: "{colors.canvas-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 13px 27px
+    height: 48px
+  button-pill-sm:
+    backgroundColor: "{colors.surface-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-sm}"
+    rounded: "{rounded.full}"
+    padding: 8px 16px
+    height: 36px
+  text-input:
+    backgroundColor: "{colors.canvas-light}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 14px 16px
+    height: 56px
+  hero-band-dark:
+    backgroundColor: "{colors.canvas-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.display-xxl}"
+    rounded: "{rounded.none}"
+    padding: 88px 24px
+  hero-band-photo:
+    backgroundColor: "{colors.canvas-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.display-xl}"
+    rounded: "{rounded.none}"
+    padding: 0
+  feature-card-light:
+    backgroundColor: "{colors.canvas-light}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  feature-card-dark:
+    backgroundColor: "{colors.surface-elevated}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  plan-card:
+    backgroundColor: "{colors.surface-elevated}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  plan-card-featured:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  product-mockup:
+    backgroundColor: "{colors.canvas-dark}"
+    textColor: "{colors.on-dark}"
+    rounded: "{rounded.xl}"
+    padding: 48px
+  download-tile:
+    backgroundColor: "{colors.surface-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-sm}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+    height: 56px
+  badge-tag:
+    backgroundColor: "{colors.surface-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.full}"
+    padding: 4px 12px
+  badge-feature:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.full}"
+    padding: 4px 12px
+  nav-bar:
+    backgroundColor: "{colors.canvas-dark}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.none}"
+    height: 64px
+  sub-nav-pill:
+    backgroundColor: "{colors.surface-elevated}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.button-sm}"
+    rounded: "{rounded.full}"
+    padding: 8px 16px
+  footer:
+    backgroundColor: "{colors.canvas-dark}"
+    textColor: "{colors.on-dark-mute}"
+    typography: "{typography.body-sm}"
+    rounded: "{rounded.none}"
+    padding: 80px 24px
+---
+
+## 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.

package/design-md/revolut/README.md

@@ -0,0 +1,5 @@
+# Revolut Inspired Design System
+
+Design system details have been moved to: https://getdesign.md/revolut/design-md
+
+You can also view previews, dark mode examples, and download options on getdesign.md.