The calmest banking interface in fintech — a lavender accent that sells trust the way a private bank sells discretion, soft-shadow layers, Arcadia. Neighbour to Revolut Business.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Mercury’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Calm-premium fintech: a near-monochrome canvas warmed by a single soft-lavender accent (#5266eb, hsl 232°). Trust is delivered through whisper-soft layered shadows instead of borders, generous corner radii (32–40px on hero surfaces, 4–12px on controls), a warm editorial display family (Arcadia Display) paired with a quiet UI sans (Arcadia), and a decelerating ease-out motion vocabulary that never springs or snaps. Restraint over spectacle, softness over edges, settling over bouncing — the whole language is designed to feel safe around money.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (near-white #ededf3 foreground on a soft dark #1e1e2a canvas, with a single lavender/indigo accent #5266eb used homeopathically — under 3% surface area), the warm typographic pairing (an editorial display family for headings + a calm UI sans for body and controls), the soft-shadow elevation model (multi-layer single-digit-opacity shadows instead of hard borders), the generous-but-bounded radius scale (4/8/12/32/40px), the calm ease-out motion curve cubic-bezier(0, 0, 0.2, 1) at 0.15–0.3s, and the restrained illustration posture across every page and component I ship. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.
Layout
Grid
Content width
Bounded
Framing
Layered
Grid strength
Soft
Near-monochrome calm warmed by a single lavender-indigo accent. Foreground is near-white #ededf3 (the dominant reading layer at ~1707 measured occurrences) over a soft dark canvas #1e1e2a; the only brand color is #5266eb (slate-7, hsl 232° 79% 62%) used homeopathically. Cool neutral #70707d handles borders and metadata; a pale sky #cdddff appears as a soft tint accent. No gradients do heavy lifting — the one captured gradient is a black-to-transparent image scrim, not decoration.
Mode strategydual-paired
Near-white #ededf3 (the most frequent surface color) carries all primary reading — dominant foreground layer
Soft dark canvas #1e1e2a for dark sections; the warmth (slight violet bias, hsl 240°) keeps it from feeling clinical
Lavender accent #5266eb used only for focus, key emphasis, and rare brand moments — surface area kept under ~3%
Cool neutral #70707d (hsl 240° 5% 46%) for hairline borders, captions, and de-emphasized metadata
Pale sky #cdddff as a soft background tint — used for gentle highlight zones, never as a fill on text
Light text variant #edecfb (slight violet bias) on the darkest surfaces for harmonized contrast
Two-family system: Arcadia Display (warm editorial display family) for headings + Arcadia (calm UI sans) for body, labels, and controls. Both self-hosted, preloaded as woff2 from the Mercury CDN — no Google Fonts.
Display sizes from Arcadia Display: 82.912px / 36px / 32px / 28px / 24px headings, mostly at weight 480. The warm display voice is the brand's emotional signature — never substitute a geometric sans here.
Body + UI from Arcadia: 16–18px reading text at weights 360 / 420 / 480 / 500; small UI labels at 12–14px. The 360 and 420 weights give the calm, slightly-light feel — do not coarsen to 400/700.
Letter-spacing is near-zero everywhere except display: 0.36–0.48px positive tracking on large Arcadia Display headings, and small positive tracking (0.07–0.24px) on uppercase small labels. Body tracking is normal.
Line-height is comfortable, not tight: ~1.35–1.5 on body (16px → 21.6px, 18px → 24.3px), ~1.1–1.15 on large display (82.912px → 91.2px). The page breathes — never crush body leading below 1.3.
Heading weight 480 is the signature display weight — a touch below a conventional 500. Hold this stepping; it is part of why the type reads premium rather than corporate.
Paragraph max ~55–65 ch at 16–18px body; bounded content rails (608px container) naturally enforce comfortable measure.
4px base unit. Scale: 1 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 56 / 72 / 80 px — the 1px step is reserved for hairline borders only, the real rhythm starts at 4.
32px is the dominant spacing token (by far the most frequent at ~186 occurrences) — it is the default gap and section padding. Reach for it first.
Container max-width 1376px (xl) with a 1320px (lg) bounded variant; narrow content clusters use 608px (md) and 448px (sm) rails for comfortable reading measure.
Grid/flex gutters cluster at 32 and 40px for section-level layout, 12px for dense control groups, 4px for tight inline pairs — pick from the captured set, no magic numbers.
Section vertical rhythm leans on 40 / 56 / 72 / 80px; card padding sits at 20–32px. Generosity is the signature — do not tighten section spacing to compress the page.
Surface styleElevated
Primary elevation is multi-layer soft shadow, never a hard border. Stack several low-alpha layers (single-digit opacity, generous blur) so surfaces float gently off the canvas.
Captured shadow-xs: `rgba(28,28,35,0.02) 0 10px 16px, rgba(28,28,35,0.04) 0 6px 10px, rgba(28,28,35,0.09) 0 0 3px` — three meaningful layers, max opacity 0.09. Use this as the default card shadow.
Captured shadow-sm: `rgba(0,0,0,0.05) 0 0 3px, rgba(0,0,0,0.05) 0 8px 12px, rgba(0,0,0,0.05) 0 12px 20px` — slightly deeper float for hover or raised cards. Never exceed ~0.1 opacity on any single layer.
Borders, when present, are hairline 1px in the cool neutral #70707d — used for structural separation, not for elevation. Depth comes from shadow + radius, not line weight.
No hard drop shadow, no bloom, no glow. The softness is the brand; a crisp shadow edge breaks the calm.
Techniques
Multi-layer soft float
Cards default to the three-layer shadow-xs (`rgba(28,28,35,0.02) 0 10px 16px, rgba(28,28,35,0.04) 0 6px 10px, rgba(28,28,35,0.09) 0 0 3px`). Hover transitions to the deeper shadow-sm over 0.3s on cubic-bezier(0, 0, 0.2, 1). The lift is felt, not seen — the card appears to rise a millimeter.
Generous-radius surface softening
Hero and feature surfaces use 32–40px radii so the eye reads 'soft object' before it reads 'rectangle'. Pair the large radius with the soft shadow and the surface feels physically gentle — the core of the calm-premium read.
Radius scale: 4 (the dominant control radius, ~103 occurrences) / 8 / 12 / 32 / 40. The split is intentional — small for precise controls, large for reassuring hero surfaces.
Buttons and inputs default to 4px; cards and panels 12px; hero surfaces, feature media, and large illustration frames 32–40px; pills `rounded-full` for badges only.
Icons are stroke-based, ~1.5–2px weight, calm and rounded — no filled or duotone variants. Match the soft, unhurried register of the rest of the language.
Tap targets minimum 40×40px on pointer, 44×44 on touch — generous, never cramped.
Hovercolor / background-color shift (0.15s on cubic-bezier(0.4, 0, 0.2, 1)), shadow deepen on card lift (0.3s on cubic-bezier(0, 0, 0.2, 1)), opacity fade (0.2s on cubic-bezier(0, 0, 0.2, 1))
Scroll patterns
Intersection-triggered opacity + translate reveals at 0.3s on cubic-bezier(0, 0, 0.2, 1) — gentle settle, no overshoot
fadeOutBlur ambient transition at 0.5s on cubic-bezier(0.25, 0.46, 0.45, 0.94) for atmospheric section exits
grid-template-rows expand at 0.3s on cubic-bezier(0, 0, 0.2, 1) for accordion-style reveals
Slow positional ease (bottom) at 0.5s on cubic-bezier(0.65, 0.05, 0.36, 1) — reserved for rare hero choreography
Primary easing: cubic-bezier(0, 0, 0.2, 1) — a pure ease-out (decelerate-only) that anchors most reveals and shadow lifts. Everything settles, nothing springs.
Secondary easing: cubic-bezier(0.4, 0, 0.2, 1) (standard ease-in-out) for color/background hover transitions; cubic-bezier(0, 0, 0.6, 1) for gentler slow fades.
Four durations captured: 0.15s (primary hover state change), 0.2s (opacity fades), 0.3s (the dominant reveal/expand duration, ~40 occurrences), 0.5s (ambient + scroll choreography).
Spring and overshoot animations forbidden — the only bounce-adjacent curve (cubic-bezier(0.65, 0.05, 0.36, 1)) is reserved for rare positional hero moves, never for affordance feedback.
Framer Motion is the animation runtime (window.MotionIsMounted detected). Use deterministic ease arrays, not spring configs.
useReducedMotion mandatory: all animations collapse to opacity-only or disable.
No loop animations except an explicit 45s linear marquee for logo/testimonial scroll, and intentional loaders.
Tabbed feature switchers with gentle fade+translate (fadeInTabTranslate / fadeOutTabTranslate at 0.3s ease-in-out) for product storytelling sections.
Accordion: single-open for FAQ via grid-template-rows transition; multi-open only for deep documentation.
Tooltips reveal on hover + focus with a short delay, dismiss instantly on blur.
Modals (z-index 99) for confirmations and destructive flows; drawers for mobile-only expansions; never nested modals.
Form validation: inline below field on blur; submit disabled until validation passes. Errors never color-only.
Empty states: small calm caption + one-line copy + a single primary action. Abstract illustration optional, never busy.
Loading states: soft skeleton for content, inline spinner for buttons. No startling full-page overlays.
Approachdesktop-first
Desktop-first because the audience evaluates a bank on a wide display before committing (Mercury's container extends to 1376px). Mobile reflows the same calm language without a parallel architecture — generous radii and soft shadows persist down to the smallest tier; the page is the page, just narrower. Bounded content rails (448 / 608px) keep reading measure comfortable at every width.
Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536 — standard Tailwind ladder.
Container max-width scales through 448 → 608 → 1320 → 1376px for bounded content at each tier.
Hide-on-mobile is banned — if a control exists on desktop, it must reach mobile via reflow.
Tap target minimum 44×44 on touch; 40×40 on pointer devices.
Typography scales proportionally: hero ~83 → ~48 → ~32px display, headings drop ~25% per tier while positive tracking eases toward zero.
Hero radius eases from 40px on desktop toward 24–32px on mobile so large surfaces stay proportionate to the narrower viewport.
focus-visible: a 2px lavender (#5266eb) ring with offset on every interactive element — mandatory, replaces the default outline.
All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions.
Color contrast: #ededf3 foreground on #1e1e2a canvas ≈ 14:1 (AAA). Lavender #5266eb on white ≈ 4.6:1 (AA) — keep accent text at 16px+ or pair with weight 480. Never drop body text below 4.5:1.
ARIA labels on icon-only buttons; aria-expanded on collapsible regions; aria-live='polite' on toast and status updates.
Motion respects prefers-reduced-motion — reveals reduce to opacity-only or disable; the marquee and fadeOutBlur fully stop.
Tap targets minimum 44×44 on touch; 40×40 on pointer.
Screen reader-only content uses `sr-only`; never `display:none` for meaningful context.
Form errors announced via aria-describedby on the associated input; never color-only signaling — pair the lavender/error state with text and an icon.
Framer MotionNext/ImageLucide
Framer Motion is the confirmed animation runtime (window.MotionIsMounted). Images run through Next/Image with ~88% lazy-loading — only the eager hero start/end frames (3840×1440) pay for priority. Illustration is abstract, sparse, and webp-delivered (22 of 26 assets); icons are stroke-based at 1.5–2px weight.
Framer Motion `motion.div` with `whileInView` + `viewport={{ once: true, margin: '-10%' }}` for scroll reveals
Transitions use `ease: [0, 0, 0.2, 1]` and `duration: 0.3` (or 0.15 / 0.2 / 0.5) — constants only, no spring configs
useReducedMotion guard wraps every animation primitive — no exceptions
Next/Image with `sizes` always set; `priority` only on the LCP hero frame; everything else `loading='lazy'`
Prefer webp for illustration assets; abstract, calm imagery only — no busy or photographic hero clutter
No canvas, no WebGL, no Lottie — static-first, animated-discreet
Use the lavender accent #5266eb homeopathically — focus rings, key emphasis, primary CTA only; keep total surface under ~3%.
Reach for multi-layer soft shadows (single-digit opacity, generous blur) before any border for elevation.
Pair Arcadia Display (warm editorial headings) with Arcadia (calm UI sans) — hold the 480 display weight and 360/420 body weights.
Use generous radii (32–40px) on hero and feature surfaces; keep controls at the precise 4–8px tier.
Default to cubic-bezier(0, 0, 0.2, 1) ease-out at 0.3s for reveals and 0.15s for hover — let motion settle, never spring.
Keep section spacing generous — lean on 32 / 40 / 56 / 72 / 80px rhythm; let the page breathe.
Pass every page through useReducedMotion before shipping; stop the marquee and ambient blur under reduced motion.
Never let the lavender accent become a fill or a large surface — its premium power is its scarcity.
Never replace soft layered shadows with hard borders or crisp drop shadows — the softness is the brand.
Never substitute a geometric sans for Arcadia Display on headings — the warm editorial voice is the emotional signature.
Never coarsen the body weights to 400/700 — the 360 / 420 / 480 stepping is what reads as calm-premium.
Never introduce spring, bounce, or overshoot on affordance feedback — overshoot reads playful, wrong register for money.
Never invent durations outside {0.15, 0.2, 0.3, 0.5}s or a sixth easing beyond the captured set.
Never tighten section spacing below the captured rhythm to compress the page — generosity is part of the trust signal.
Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
Spacing base 4px, scale 1/4/8/12/16/20/24/32/40/56/72/80 (1px reserved for hairlines).
Container max 1376px — do not exceed.
Two-family system: Arcadia Display (display) + Arcadia (UI/body). No third family.
Transition duration grep: values draw from {0.15s, 0.2s, 0.3s, 0.5s}; 0.3s is the dominant reveal duration.
Radius audit: controls at 4–8px, hero/feature surfaces at 32–40px — values from {4, 8, 12, 32, 40}.
Image audit: loading='lazy' on every non-LCP image; priority only on the hero frame.
Contrast audit: body text on canvas ≥ 4.5:1 (WCAG AA); #ededf3 on #1e1e2a ≈ 14:1.
Motion audit: no spring/overshoot on affordance feedback; useReducedMotion path verified.
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 14 nodes across 7 levels, shallow to deep by color.
body1
div1
div1
div4
div1
div1
Nav
Main2
Section (×10)
[+3 more]
div1
div1
Footer
Section
Accessibility
Contrast matrix
40 combinations - 20 pass AA - 16 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox18.01
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#EDEDF3
bg
#000000
APCA Lc
-96
Use
background on foreground
AaThe quick brown fox18.01
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#EDEDF3
APCA Lc
+96
Use
foreground on background
AaThe quick brown fox17.99
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#EDECFB
APCA Lc
+96
Use
foreground on background
AaThe quick brown fox17.99
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#EDECFB
bg
#000000
APCA Lc
-96
Use
background on foreground
AaThe quick brown fox16.48
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#1E1E2A
APCA Lc
-106
Use
background on background
AaThe quick brown fox16.48
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#1E1E2A
bg
#FFFFFF
APCA Lc
+103
Use
background on background
AaThe quick brown fox15.38
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#CDDDFF
APCA Lc
+86
Use
foreground on accent
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
