yaclty/awesome-design-md
1
0
Fork 0
mirror of https://github.com/VoltAgent/awesome-design-md.git synced 2026-05-14 13:06:57 +08:00
Code Issues Packages Projects Releases Wiki Activity
awesome-design-md/design-md/revolut/DESIGN.md
necatiozmen 4990fd5168 update DESIGN.md v2
2026-05-02 20:37:58 +03:00

31 KiB
Raw Blame History

version name description colors typography rounded spacing components
alpha Revolut 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.
primary primary-bright primary-deep on-primary ink body charcoal mute ash stone faint on-dark on-dark-mute canvas-light canvas-dark surface-soft surface-card surface-deep surface-elevated hairline-light hairline-dark hairline-strong divider-soft accent-teal accent-blue-link accent-light-blue accent-light-green accent-green-text accent-yellow accent-warning accent-pink accent-danger accent-deep-red accent-brown link
#494fdf #4f55f1 #3a40c4 #ffffff #191c1f #1f2226 #3a3d40 #505a63 #5c5e60 #8d969e #c9c9cd #ffffff rgba(255,255,255,0.72) #ffffff #000000 #f4f4f4 #ffffff #0a0a0a #16181a #e2e2e7 rgba(255,255,255,0.12) #191c1f rgba(255,255,255,0.06) #00a87e #376cd5 #007bc2 #428619 #006400 #b09000 #ec7e00 #e61e49 #e23b4a #8b0000 #936d62 #376cd5
display-xxl display-xl display-lg display-md heading-lg heading-md heading-sm body-lg body-md body-md-bold body-sm button-lg button-md button-sm caption link-emph
fontFamily fontSize fontWeight lineHeight letterSpacing
Aeonik Pro 136px 500 1.0 -2.72px
fontFamily fontSize fontWeight lineHeight letterSpacing
Aeonik Pro 80px 500 1.0 -0.8px
fontFamily fontSize fontWeight lineHeight letterSpacing
Aeonik Pro 48px 500 1.21 -0.48px
fontFamily fontSize fontWeight lineHeight letterSpacing
Aeonik Pro 40px 500 1.2 -0.4px
fontFamily fontSize fontWeight lineHeight letterSpacing
Aeonik Pro 32px 500 1.19 -0.32px
fontFamily fontSize fontWeight lineHeight letterSpacing
Aeonik Pro 24px 500 1.33 0
fontFamily fontSize fontWeight lineHeight letterSpacing
Aeonik Pro 20px 500 1.4 0
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter 18px 400 1.56 -0.09px
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter 16px 400 1.5 0.24px
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter 16px 600 1.5 0.16px
fontFamily fontSize fontWeight lineHeight
Inter 14px 400 1.43
fontFamily fontSize fontWeight lineHeight
Aeonik Pro 20px 500 1.4
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter 16px 600 1.5 0.24px
fontFamily fontSize fontWeight lineHeight
Inter 14px 600 1.43
fontFamily fontSize fontWeight lineHeight
Inter 13px 400 1.4
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter 16px 700 1.5 0.24px
none sm md lg xl full
0px 8px 12px 20px 28px 9999px
xxs xs sm md lg xl xxl xxxl block section band
4px 6px 8px 14px 16px 24px 32px 48px 80px 88px 120px
button-primary button-primary-pressed button-dark button-soft button-outline-light button-outline-dark button-pill-sm text-input hero-band-dark hero-band-photo feature-card-light feature-card-dark plan-card plan-card-featured product-mockup download-tile badge-tag badge-feature nav-bar sub-nav-pill footer
backgroundColor textColor typography rounded padding height
{colors.canvas-light} {colors.canvas-dark} {typography.button-md} {rounded.full} 14px 28px 48px
backgroundColor textColor typography rounded
{colors.faint} {colors.canvas-dark} {typography.button-md} {rounded.full}
backgroundColor textColor typography rounded padding height
{colors.canvas-dark} {colors.on-dark} {typography.button-md} {rounded.full} 14px 28px 48px
backgroundColor textColor typography rounded padding height
{colors.surface-soft} {colors.ink} {typography.button-md} {rounded.full} 14px 28px 48px
backgroundColor textColor typography rounded padding height
{colors.canvas-light} {colors.ink} {typography.button-md} {rounded.full} 13px 27px 48px
backgroundColor textColor typography rounded padding height
{colors.canvas-dark} {colors.on-dark} {typography.button-md} {rounded.full} 13px 27px 48px
backgroundColor textColor typography rounded padding height
{colors.surface-soft} {colors.ink} {typography.button-sm} {rounded.full} 8px 16px 36px
backgroundColor textColor typography rounded padding height
{colors.canvas-light} {colors.ink} {typography.body-md} {rounded.md} 14px 16px 56px
backgroundColor textColor typography rounded padding
{colors.canvas-dark} {colors.on-dark} {typography.display-xxl} {rounded.none} 88px 24px
backgroundColor textColor typography rounded padding
{colors.canvas-dark} {colors.on-dark} {typography.display-xl} {rounded.none} 0
backgroundColor textColor typography rounded padding
{colors.canvas-light} {colors.ink} {typography.body-md} {rounded.lg} 32px
backgroundColor textColor typography rounded padding
{colors.surface-elevated} {colors.on-dark} {typography.body-md} {rounded.lg} 32px
backgroundColor textColor typography rounded padding
{colors.surface-elevated} {colors.on-dark} {typography.body-md} {rounded.lg} 32px
backgroundColor textColor typography rounded padding
{colors.primary} {colors.on-primary} {typography.body-md} {rounded.lg} 32px
backgroundColor textColor rounded padding
{colors.canvas-dark} {colors.on-dark} {rounded.xl} 48px
backgroundColor textColor typography rounded padding height
{colors.surface-soft} {colors.ink} {typography.body-sm} {rounded.md} 12px 20px 56px
backgroundColor textColor typography rounded padding
{colors.surface-soft} {colors.ink} {typography.caption} {rounded.full} 4px 12px
backgroundColor textColor typography rounded padding
{colors.primary} {colors.on-primary} {typography.caption} {rounded.full} 4px 12px
backgroundColor textColor typography rounded height
{colors.canvas-dark} {colors.on-dark} {typography.button-md} {rounded.none} 64px
backgroundColor textColor typography rounded padding
{colors.surface-elevated} {colors.on-dark} {typography.button-sm} {rounded.full} 8px 16px
backgroundColor textColor typography rounded padding
{colors.canvas-dark} {colors.on-dark-mute} {typography.body-sm} {rounded.none} 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.