dark · bold · sans · fintech · gradient
DESIGN.md inspired by Revolut
Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness.
By webdesignhot · www.revolut.com ↗
$ npx @webdesignhot/design-md add revolut
Learn more about the CLI → Compare to…
Aave Ghost-soft DeFi — lavender #978fff on white, custom Aave Repro sans, pastel gradients in a usually-brutalist lending space. Accenture Dark hero, white Graphik, and one electric purple — the `>` greater-than mark made into a whole consulting brand. '#a600ff' is always moving forward. Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. Affirm Honest-money fintech in the dark — indigo #4a4af4 CTAs at near-pill 96px radius, light-weight white headlines, no fine print. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Allbirds Oatmeal-canvas eco-minimalism — Geograph sans on warm Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. American Express White-canvas premium-restraint membership UI — signature Amex Blue accent, near-black editorial type, concierge-tier hierarchy. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Atlassian Enterprise-blue corporate canvas — signature Atlassian Blue, Charlie display type, four-product mark. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Away Editorial travel-luggage DTC — Graphik on white, photography-led, sharp 0px white CTAs over dark hero imagery. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Best Buy Yellow price-tag mark, electric blue trust, bold sans — big-box electronics design with Geek-Squad confidence. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Biome A white-canvas Rust toolchain page where one deep azure blue does all the work. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Bolt An electric-blue command line for the web — StackBlitz's AI builder on a near-black #1e1e21 canvas, Inter Display, builder's register. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Buttondown Indie newsletter software in heavy 900-weight Auto Pro — electric `#0069ff` pill CTAs and soft-yellow highlights on a pure-white canvas. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Capital One Confident-accessible banking — navy authority, one red swoosh, 2px-sharp blue. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Casper Cozy DTC sleep brand — Casper navy/indigo ink (`#1e306e`) on a pure-white canvas, deep-navy `#012169` pill CTAs at 32px radius, Calibre body under New Kansas friendly-serif display. Premium that tucks you in. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chase Trust-institutional banking UI — white canvas, near-black ink, bright-blue primary + green secondary CTAs in Open Sans. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. CircleCI Light-content CI/CD platform — near-black hero, Inter sans, navy chrome with a restrained CircleCI-green accent. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. CVS Health CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. Databricks Signature Databricks Red Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deloitte Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. dYdX Pure-black canvas, Satoshi-compressed display, and one signature indigo-purple #7774ff CTA — a pro-trader perps terminal as a brand. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Emirates Custom-serif luxury — Emirates red on light grey, gold accents, Fly Better editorial calm. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Everlane Pure white canvas, Maison Neue Book, near-black ink — radical-transparency DTC minimalism. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. fal Pure white canvas, focal display at 120px, and near-black #252527 CTAs — generative-AI inference at editorial scale. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. GitLab Light DevOps-platform marketing — GitLab Sans, near-black ink, oversized 96px headlines, tanuki-orange accent. Gitpod Editorial dev-tool calm — light canvas, near-black navy text, ABC Diatype sans + Martina Plantijn serif, 8px radius. Glif Near-black Manrope on near-white, anchored by one confident green CTA — a playful creative-agent canvas. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Graphite Near-black developer canvas — Matter type, near-white ink, one clean blue, 8px CTAs. Groq Warm off-white canvas, light-weight Space Grotesk, and a single hot `#f43e01` orange — speed-obsessed AI inference. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. Gumroad Hot pink `#ff90e8` on cream, ABC Favorit at 96px, hard black borders and offset shadows — neo-brutalist creator commerce. Gymshark Pure white canvas, black ink, Montserrat bold display over Roboto body — every CTA a fully-rounded 56px pill. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. HEY Warm-white canvas, deep purple-ink, and a crayon-box of saturated pastels — opinionated email dressed as a friendly poster. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. HubSpot Warm coral-orange (#FF7A59) on a near-white canvas, a humanist sans set generous and round, and a brand voice that turned inbound marketing into a methodology. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. Hume AI Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness. Hyperliquid Near-black IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. IKEA Yellow `#ffdb00` on blue `#0058a3`, Noto IKEA sans, Swedish-democratic-design retail at planetary scale. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. Jupiter Jupiter lime on near-black — Solana DeFi aggregator with Inter, a cat-in-space mascot, and playful pill-CTA energy. Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Klarna Klarna PINK `#ffa8cd` on white, near-black navy `#0b051d` ink, Klarna Title at billboard scale. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Ledger White canvas, Inter at rest, and one unmistakable Ledger Orange on full-pill CTAs — security made calm. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. Lemon Squeezy A dark hero with white Circular display, signature lemon-yellow Leonardo.Ai A pure-black cinematic canvas where ufficioDisplay headlines and white full-pill CTAs frame generative imagery — a film studio's title card, Canva-owned. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Lowe's Signature navy blue on white canvas — residential-DIY warmth rendered as big-box retail. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Luma AI A cinematic black screening room that opens into a white studio — Graphik set tight, every CTA a full white pill. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. MetaMask Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Monzo Hot Coral `#ff4f40` on bright white, MonzoSans humanist geometry, and a transparent challenger-bank warmth. Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nubank Roxo #8d0de3 as the whole brand — white nuSansDisplay on dark purple, 999px pill CTAs, anti-bank warmth. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Obsidian Near-black canvas, near-white text, a single electric-purple CTA and a crystal mark — a local-first knowledge base that looks like the editor it ships. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. On Swiss-engineered monochrome — true-black ink on white, custom On sans, bold 700 heads and 40px full-pill CTAs. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paddle Merchant-of-record calm — condensed serif headlines on a near-black canvas with warm cream and sand CTAs. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Picoko Warm-white canvas, weight-900 Outfit, and one blazing pink — product photography reimagined in seconds. Pika A cream-canvas AI video studio in custom Telka type, with peach and black pill CTAs. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Pinterest Masonry feed as product, restrained chrome around it — white canvas, near-black text, Pinterest red reserved for action. Pitch Enormous Mark Pro headlines on a black hero, then a clean white workspace — violet Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Rainbow White canvas, SF Pro Rounded Black at 96px, and a pink-orange-blue-purple rainbow — the friendliest Ethereum wallet onchain. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Recraft A jet-black studio where ABC Gravity Condensed slams the headline at weight 900 and a single electric-lime CTA does all the shouting. Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Ritual Visible-supply-chain wellness — white lab canvas, Ritual Navy #142b6f everywhere, CircularXX, 25px rounded CTAs, warm yellow as the one accent. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Robinhood Chartreuse `#CCFF00` lime on a black `#000` canvas, Martina Plantijn serif headlines paired with Capsule Sans Text — financial-editorial register, not tech-app sans. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Shortwave A dark AI-email canvas with Poppins display weight and one electric blue — Inbox rebuilt by the people who built it. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. Snowflake Deeper cyan Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. Sourcegraph Near-black code-intelligence canvas — PolySans display, coral-red accent, big quiet headlines. Southwest Airlines Heart-warm low-cost airline — Southwest Sans on light grey, yellow CTA voltage with navy ink, sharp 2px corners. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. StackBlitz Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Storybook Open-source frontend workshop — white canvas, Nunito Sans, dark hero band, and the signature coral-pink brand mark. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. T-Mobile T-Mobile magenta (#E20074) dominates a near-white canvas — Un-carrier loudness in TeleNeo display weight. Tailscale Warm-light approachable-technical — off-white canvas, near-black Inter, brick-red accent. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The Home Depot Signature orange on white, Helvetica bold — hardware-aisle signage as a web storefront. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Udio A pitch-black stage with near-white Innovator display type and a single magenta-pink spotlight — a recording console reimagined as a creative canvas. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Visa Bright-blue + golden-yellow payment-rail confidence — saturated `#1434CB` primary, ceremonial `#FCC015` yellow on hero pill CTAs, pill geometry throughout, custom visa-font-latin in light/regular weights. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warby Parker Friendly-premium DTC eyewear — white canvas, bright blue + deep navy, fully pill CTAs. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Wayfair Near-white canvas, ink-black type, photographic product cards — editorial-light home retail at marketplace scale. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zed Warm paper-light canvas, IBM Plex Serif headlines at light weight, one electric-blue download button — a code editor's site that reads like a typesetter's page. Zoom Zoom Blue `#0B5CFF` on white — geometric sans wordmark, Workplace-era AI Companion friendly-corporate register. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
- bg
#ffffff - bg-dark
#191c1f - bg-dark-deep
#0e1013 - surface
#ffffff - surface-subtle
#f7f7f8 - surface-muted
#eff0f1 - surface-dark
#23272b - surface-dark-2
#2d3237 - text AAA · 17.1
#191c1f - text-body
#3a3f44 - text-muted
#5f676e - text-subtle
#8d969e - text-on-dark
#ffffff - text-on-dark-muted
rgba(255, 255, 255, 0.72) - text-on-dark-subtle
rgba(255, 255, 255, 0.48) - brand AAA · 17.1
#191c1f - brand-on-dark
#ffffff - accent
#5f43ff - accent-blue
#2868ff - accent-pink
#ff4d97 - accent-soft
rgba(95, 67, 255, 0.10) - on-brand
#ffffff - on-brand-light
#191c1f - link
#191c1f - link-accent
#5f43ff - link-on-dark
#ffffff - border — · 1.3
#e2e4e6 - border-strong — · 1.6
#c9cdd1 - border-soft
#f0f1f2 - border-on-dark
rgba(255, 255, 255, 0.16) - semantic-success
#1f8f4e - semantic-warning
#c77700 - semantic-danger
#d92d20 - semantic-info
#2868ff - focus-ring
rgba(95, 67, 255, 0.55) - shadow-ambient
rgba(16, 18, 21, 0.06) - shadow-soft
rgba(16, 18, 21, 0.10) - shadow-standard
rgba(16, 18, 21, 0.14) - shadow-elevated
rgba(16, 18, 21, 0.20)
Ship faster than ever.
display-hero "Aeonik Pro" 86px w500 -0.03em
Ship faster than ever.
display-lg "Aeonik Pro" 64px w500 -0.025em
The quick brown fox jumps over the lazy dog.
money "Aeonik Pro" 56px w500 -0.02em
Ship faster than ever.
display-md "Aeonik Pro" 48px w500 -0.02em
Ship faster than ever.
h1 "Aeonik Pro" 40px w600 -0.018em
Built for teams that ship.
h2 "Aeonik Pro" 32px w600 -0.012em
A complete kit
h3 "Aeonik Pro" 24px w600 -0.005em
The quick brown fox jumps over the lazy dog.
h4 Inter 20px w600 0
The quick brown fox jumps over the lazy dog.
title-sm Inter 18px w600 0
The quick brown fox jumps over the lazy dog.
body-lg Inter 18px w400 0
The quick brown fox jumps over the lazy dog.
body Inter 16px w400 0
The quick brown fox jumps over the lazy dog.
body-strong Inter 16px w600 0
The quick brown fox jumps over the lazy dog.
button Inter 16px w600 0
The quick brown fox jumps over the lazy dog.
money-inline Inter 16px w500 0
The quick brown fox jumps over the lazy dog.
nav-link Inter 15px w500 0
The quick brown fox jumps over the lazy dog.
body-sm Inter 14px w400 0
OUR DESIGN SYSTEM
label Inter 13px w500 0
OUR DESIGN SYSTEM
caption Inter 12px w500 0.02em
The quick brown fox jumps over the lazy dog.
eyebrow Inter 12px w600 0.08em
The quick brown fox jumps over the lazy dog.
legal Inter 12px w400 0
- none
0px - micro
2px - sm
4px - md
8px - lg
12px - xl
16px - xxl
24px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Design roles 8/8 mapped · webdesignhot/0.1
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background → bg
- foreground → text
- primary → brand
- primary-foreground → on-brand
- accent → accent
- muted → text-muted
- border → border
- ring → focus-ring
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: Revolut
tagline: 'Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness.'
updated_at: 2026-05-28T22:15:20.985Z
published_at: 2026-05-28T22:15:20.985Z
author: webdesignhot
source_url: https://www.revolut.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas]
tags: [dark, bold, sans, fintech, gradient]
preview_swatch: ['#ffffff', '#191c1f', '#5f43ff']
related: []
description: 'Revolut''s site is a study in two-register contrast: a near-black hero (`#191c1f`) where a single white Aeonik Pro headline floats at ~86px / weight 500, then white content sections (`#ffffff`) where everything resets to crisp Inter body type on the same near-black ink. The brand is the UK fintech super-app — banking, currency, crypto, stocks, travel, business — and the design reflects that breadth with a calm, premium restraint rather than fintech-neon loudness. The signature gestures are: fully-pill CTAs (radius 9999px) that read as soft, friendly capsules; the Aeonik Pro / Inter pairing that splits display authority (geometric, slightly humanist Aeonik Pro) from running-text legibility (workhorse Inter); and gradient accents — electric violet-into-blue washes — that bloom behind product mockups and card art without ever taking over the type. Where Monzo goes hot-coral and Cash App goes acid-green, Revolut goes monochrome-plus-gradient: near-black and white do the structural work, and colour arrives only as luminous, premium accent. The result feels like a sleek metal card rendered as a website — quiet, expensive, global.'
# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
accent: accent
muted: text-muted
border: border
ring: focus-ring
colors:
bg: '#ffffff' # primary white content canvas
bg-dark: '#191c1f' # near-black hero / dark section ground
bg-dark-deep: '#0e1013' # deepest near-black for footer / max-contrast bands
surface: '#ffffff' # default card surface on white
surface-subtle: '#f7f7f8' # faint grey card / alternating section band
surface-muted: '#eff0f1' # input rest fill, chips on light
surface-dark: '#23272b' # +1 elevated surface on the dark ground
surface-dark-2: '#2d3237' # +2 elevated surface on dark
text: '#191c1f' # primary near-black ink on white
text-body: '#3a3f44' # running body grey-black on white
text-muted: '#5f676e' # captions, metadata on white
text-subtle: '#8d969e' # disabled / lowest hierarchy on white
text-on-dark: '#ffffff' # white ink on the dark hero
text-on-dark-muted: 'rgba(255, 255, 255, 0.72)' # body on dark hero
text-on-dark-subtle: 'rgba(255, 255, 255, 0.48)' # captions on dark
brand: '#191c1f' # Revolut primary — near-black ink, the structural brand colour
brand-on-dark: '#ffffff' # the brand inverted to white on dark grounds
accent: '#5f43ff' # electric violet — primary gradient accent
accent-blue: '#2868ff' # gradient terminus blue
accent-pink: '#ff4d97' # warm gradient bloom on premium/Ultra art
accent-soft: 'rgba(95, 67, 255, 0.10)' # violet at 10% — informational tint
on-brand: '#ffffff' # white text on near-black CTA fill
on-brand-light: '#191c1f' # near-black text on white CTA (on dark sections)
link: '#191c1f' # default link = near-black, underlined
link-accent: '#5f43ff' # accent-violet link in product copy
link-on-dark: '#ffffff' # link on dark hero
border: '#e2e4e6' # default 1px hairline on white
border-strong: '#c9cdd1' # input border, focused divider on white
border-soft: '#f0f1f2' # softest section divider
border-on-dark: 'rgba(255, 255, 255, 0.16)' # hairline on dark grounds
semantic-success: '#1f8f4e' # positive balance, success green
semantic-warning: '#c77700' # caution amber
semantic-danger: '#d92d20' # error / spend red
semantic-info: '#2868ff' # informational blue
focus-ring: 'rgba(95, 67, 255, 0.55)' # 3px violet focus ring
shadow-ambient: 'rgba(16, 18, 21, 0.06)' # faint ambient on white cards
shadow-soft: 'rgba(16, 18, 21, 0.10)'
shadow-standard: 'rgba(16, 18, 21, 0.14)'
shadow-elevated: 'rgba(16, 18, 21, 0.20)'
typography:
display:
family: '"Aeonik Pro", system-ui, -apple-system, sans-serif'
weights: [500, 600, 700]
opentype-features: ['kern', 'liga']
body:
family: 'Inter, system-ui, -apple-system, sans-serif'
weights: [400, 500, 600]
opentype-features: ['kern', 'liga', 'cv11']
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
weights: [400, 500]
opentype-features: ['tnum']
scale:
display-hero: { size: 86, weight: 500, lineHeight: 1.0, tracking: '-0.03em', family: display }
display-lg: { size: 64, weight: 500, lineHeight: 1.04, tracking: '-0.025em', family: display }
display-md: { size: 48, weight: 500, lineHeight: 1.08, tracking: '-0.02em', family: display }
h1: { size: 40, weight: 600, lineHeight: 1.1, tracking: '-0.018em', family: display }
h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display }
h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body }
title-sm: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: body }
body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-strong: { size: 16, weight: 600, lineHeight: 1.55, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body }
caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body }
eyebrow: { size: 12, weight: 600, lineHeight: 1.2, tracking: '0.08em', family: body }
button: { size: 16, weight: 600, lineHeight: 1.2, tracking: '0', family: body }
nav-link: { size: 15, weight: 500, lineHeight: 1.4, tracking: '0', family: body }
money: { size: 56, weight: 500, lineHeight: 1.05, tracking: '-0.02em', family: display, opentype: 'tnum' }
money-inline: { size: 16, weight: 500, lineHeight: 1.4, tracking: '0', family: body, opentype: 'tnum' }
legal: { size: 12, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
radius:
none: 0
micro: 2
sm: 4
md: 8
lg: 12
xl: 16
xxl: 24
pill: 9999
spacing:
base: 4
scale: { xxs: 4, xs: 8, sm: 12, base: 16, md: 24, lg: 32, xl: 48, xxl: 64, section: 96, hero: 120 }
layout:
page-width: 1280
prose-width: 720
header-height: 64
components:
button-primary: { bg: brand, text: on-brand, padding: '14px 28px', height: 48, radius: pill, font: button }
button-primary-on-dark: { bg: text-on-dark, text: on-brand-light, padding: '14px 28px', height: 48, radius: pill, font: button }
button-secondary: { bg: surface-muted, text: text, padding: '13px 27px', height: 48, radius: pill, font: button }
button-ghost: { bg: transparent, text: text, border: '1px solid border-strong', padding: '13px 27px', height: 48, radius: pill, font: button }
button-tertiary: { bg: transparent, text: brand, font: button }
card: { bg: surface, border: '1px solid border', radius: xl, padding: md }
card-subtle: { bg: surface-subtle, radius: xxl, padding: lg }
card-gradient: { bg: 'linear-gradient(135deg, accent, accent-blue)', text: text-on-dark, radius: xxl, padding: lg }
badge-pill: { bg: accent-soft, text: accent, radius: pill, padding: '4px 12px', font: caption }
input: { bg: surface-muted, border: '1px solid border-strong', text: text, radius: md, padding: '12px 16px', height: 48 }
top-nav: { bg: bg, text: text, height: 64, font: nav-link }
top-nav-dark: { bg: bg-dark, text: text-on-dark, height: 64, font: nav-link }
footer: { bg: bg-dark-deep, text: text-on-dark-muted, padding: '64px 0', font: body-sm }
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 320
duration-reveal: 600
reduced-motion: 'respects prefers-reduced-motion: reduce — gradient drift, parallax mockups, scroll-reveal fades, and number count-ups collapse to static end-states'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
ambient: 'rgba(16, 18, 21, 0.06) 0 1px 2px'
soft: 'rgba(16, 18, 21, 0.10) 0 4px 12px'
standard: 'rgba(16, 18, 21, 0.14) 0 12px 28px -6px'
elevated: 'rgba(16, 18, 21, 0.20) 0 28px 56px -12px'
ring: '0 0 0 3px rgba(95, 67, 255, 0.55)'
accessibility:
contrast-text-on-bg: 15.6
contrast-on-brand-on-brand: 15.6
contrast-body-on-bg: 9.6
contrast-text-on-dark: 14.9
focus-ring: '3px solid rgba(95, 67, 255, 0.55) with 2px offset'
reduced-motion-honored: true
min-target: 44
dark-mode: dual
---
## 1. Visual Theme & Atmosphere
Revolut's site runs on a **two-register contrast system**: a near-black hero (`#191c1f`) and white content (`#ffffff`), with the same near-black ink threading through both. The hero is the brand's loudest gesture — a deep, slightly-blue-warm near-black ground onto which a single white **Aeonik Pro** headline floats at roughly 86px and weight 500. That weight choice matters: 500 is medium, not bold, so the hero reads as *poised* rather than shouting. It is the typographic posture of a premium metal card, not a startup banner. Below the fold, the site resets to white sections where everything is built in **Inter** at body sizes on the same `#191c1f` ink, and the mood shifts from cinematic to clean-product-explainer.
The brand is the UK fintech **super-app** — current accounts, multi-currency exchange, crypto, stock trading, travel eSIMs, business banking, and the premium **Ultra** tier all live under one roof. A lesser design would fragment under that breadth; Revolut holds it together with **monochrome restraint plus gradient accent**. Near-black and white do all the structural work — backgrounds, type, dividers, the grid — and colour arrives only as luminous, intentional accent: electric **violet** (`#5f43ff`) bleeding into **blue** (`#2868ff`), occasionally warmed by pink (`#ff4d97`) on the most premium product art. These gradients bloom *behind* phone mockups and card renders; they never colour the type, and they never compete with the headline.
The signature shape is the **fully-pill CTA** (radius 9999px). Every primary button is a soft capsule — near-black fill with white label on light sections, white fill with near-black label on the dark hero. The pill geometry is friendly and unmistakably consumer-fintech, but Revolut keeps it disciplined: pills are for actions, while cards and surfaces use a calmer 16–24px radius family. The combination — sharp-ish cards, soft-round buttons — gives the surface its characteristic *expensive calm*.
Pacing alternates **dark cinematic moments** with **white explanatory bands**. The page opens dark (hero), drops to white (feature grid, comparison tables, FAQ), then occasionally returns to dark for a premium-tier showcase or the footer. The dark sections are where the gradient-accented product imagery lives — metal cards catching violet light, globe visualisations, currency tickers — and the white sections are where the rational, legible product argument is made in Inter. This dark/light rhythm is the brand's structural heartbeat.
The overall atmosphere is **sleek, global, and quietly expensive**. Where Monzo goes hot-coral and Cash App goes acid-green-on-black, Revolut deliberately under-saturates: it wants to look like the *grown-up* fintech, the one you'd trust with a salary and a stock portfolio, not just lunch-money splits. The Aeonik Pro / Inter pairing reinforces this — a slightly-humanist geometric display face for authority, a neutral workhorse for trust — and the gradient is the only place the brand lets itself glow.
**Key Characteristics:**
- Two-register layout: near-black hero (`#191c1f`) + white content (`#ffffff`), same ink in both
- White Aeonik Pro hero headline at ~86px / weight 500 — medium, poised, not bold
- Aeonik Pro (display) + Inter (body) pairing — authority split from legibility
- Near-black `#191c1f` as the structural brand colour; never neon
- Fully-pill CTAs at radius 9999px — soft capsules, inverted by section
- Gradient accents (violet `#5f43ff` → blue `#2868ff`) bloom behind imagery, never on type
- Cards use a calmer 16–24px radius — sharp-ish surfaces against round buttons
- Generous whitespace; headlines breathe, sections separated by 96px+
- Monochrome-plus-gradient discipline — colour is accent, never structure
- Premium "metal card rendered as a website" mood — global, expensive, calm
## 2. Color Palette & Roles
### Canvas
- **White** (`#ffffff` → `--bg`, `--surface`): Primary content canvas; the default ground for all explanatory sections.
- **Near-Black Hero** (`#191c1f` → `--bg-dark`): The dark hero / dark-section ground; warm-blue near-black, not pure black.
- **Deep Near-Black** (`#0e1013` → `--bg-dark-deep`): Deepest ground for footer and maximum-contrast bands.
- **Subtle Surface** (`#f7f7f8` → `--surface-subtle`): Faint grey for alternating section bands and quiet cards.
### Text
- **Ink** (`#191c1f` → `--text`): Primary near-black headline + heavy text on white.
- **Body** (`#3a3f44` → `--text-body`): Running paragraph grey-black on white.
- **Muted** (`#5f676e` → `--text-muted`): Captions, metadata, secondary labels.
- **Subtle** (`#8d969e` → `--text-subtle`): Disabled state and lowest hierarchy on white.
- **On-Dark Ink** (`#ffffff` → `--text-on-dark`): White headline + body on the dark hero.
- **On-Dark Body** (`rgba(255,255,255,0.72)` → `--text-on-dark-muted`): Running body on dark.
- **On-Dark Subtle** (`rgba(255,255,255,0.48)` → `--text-on-dark-subtle`): Captions on dark.
### Brand
- **Brand / Primary** (`#191c1f` → `--brand`): The structural brand colour — near-black ink. Drives the primary CTA fill on light, the hero ground, and all heavy type. Revolut's "brand colour" is not a hue; it is this near-black.
- **Brand on Dark** (`#ffffff` → `--brand-on-dark`): The brand inverted — white becomes the primary on dark grounds, where the CTA fills white.
### Accent (Gradient System)
Revolut's only chromatic voice. Accents appear as gradients behind imagery and as occasional link/highlight colour — never as background structure or body type.
- **Accent Violet** (`#5f43ff` → `--accent`): Primary accent and gradient start; focus ring, in-copy product links.
- **Accent Blue** (`#2868ff` → `--accent-blue`): Gradient terminus; informational semantic.
- **Accent Pink** (`#ff4d97` → `--accent-pink`): Warm bloom on premium / Ultra card art.
- **Accent Soft** (`rgba(95,67,255,0.10)` → `--accent-soft`): Violet at 10% — informational badge tint.
### Interactive
- **Link** = Ink `#191c1f`, underlined at rest in running copy; thicker underline on hover.
- **Accent Link** — `#5f43ff` for product/feature links inside marketing copy.
- **Link on Dark** — `#ffffff`, underlined on the dark hero.
- **CTA Hover (light)** — near-black fill lifts to `#23272b`; subtle soft shadow blooms.
- **CTA Hover (dark)** — white fill dims to `rgba(255,255,255,0.92)`.
- **Disabled** — `#eff0f1` fill, `#8d969e` text, no shadow.
- **Selected chip** — `accent-soft` bg with `#5f43ff` text.
### Neutral Scale (Light)
`#ffffff` (Canvas) → `#f7f7f8` (Subtle) → `#eff0f1` (Muted fill) → `#e2e4e6` (Border) → `#c9cdd1` (Border Strong) → `#8d969e` (Text Subtle) → `#5f676e` (Muted) → `#3a3f44` (Body) → `#191c1f` (Ink). On dark, the scale is `#0e1013` → `#191c1f` → `#23272b` → `#2d3237`.
### Surface & Borders
- **Surface** (`#ffffff` → `--surface`): Default card on white.
- **Subtle Surface** (`#f7f7f8` → `--surface-subtle`): Quiet card / alternating band.
- **Muted Surface** (`#eff0f1` → `--surface-muted`): Input rest fill, secondary button fill, chips.
- **Surface Dark** (`#23272b` → `--surface-dark`): +1 elevated surface on dark.
- **Surface Dark 2** (`#2d3237` → `--surface-dark-2`): +2 elevated surface on dark.
- **Border** (`#e2e4e6` → `--border`): Default 1px hairline on white.
- **Border Strong** (`#c9cdd1` → `--border-strong`): Input border, focused divider.
- **Border Soft** (`#f0f1f2` → `--border-soft`): Softest section divider.
- **Border on Dark** (`rgba(255,255,255,0.16)` → `--border-on-dark`): Hairline on dark grounds.
### Shadow Colors
Light-mode shadows are **low-opacity warm-black** — `rgba(16, 18, 21, 0.06–0.20)`, tuned to the near-black ink so shadows feel like a deepening of the brand colour rather than a generic grey. The accent gradient never casts a coloured shadow; the only "glow" in the system is the violet focus ring.
### Semantic
- **Success** (`#1f8f4e` → `--semantic-success`): Positive balance, transfer complete.
- **Warning** (`#c77700` → `--semantic-warning`): Caution amber.
- **Danger** (`#d92d20` → `--semantic-danger`): Error, declined, spend-alert red.
- **Info** (`#2868ff` → `--semantic-info`): Informational blue (shares the accent-blue hue).
## 3. Typography Rules
### Font Family
**Display: Aeonik Pro** — a slightly-humanist geometric grotesque (CoType Foundry), used for every headline tier from the 86px hero down to the 24px h3. Its medium-weight cuts give Revolut its poised authority; the brand favours **weight 500–600** for display rather than heavy 700, which keeps the dark hero looking premium rather than shouty. Weights deployed: 500, 600, 700.
**Body: Inter** — the neutral workhorse for all running text, labels, captions, and most UI chrome (h4 and below switch from Aeonik Pro to Inter). Inter's high x-height and broad legibility carry the dense explanatory copy of a super-app. The `cv11` stylistic set (single-storey lowercase a alternates) is occasionally enabled for a softer feel. Weights: 400, 500, 600.
**Fallback chains**: display `"Aeonik Pro", system-ui, -apple-system, sans-serif`; body `Inter, system-ui, -apple-system, sans-serif`. Both hand off to the platform UI font, which keeps the dark/light contrast intact even before webfonts load.
**Mono: system mono** — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`, reserved for the rare code reference or API snippet. Money figures do **not** use mono — Revolut renders balances in Aeonik Pro with `tnum` (tabular figures) so amounts feel like part of the brand voice, not a terminal. Weights: 400, 500.
**OpenType features**: `kern` + `liga` always on across both families; `tnum` on money figures so columns of amounts align; `cv11` optional on Inter.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---------------|------------|------|--------|-------------|----------------|-------------|---------------------------------------------|
| display-hero | Aeonik Pro | 86 | 500 | 1.0 | -0.03em | kern, liga | Dark-hero headline — white, poised, medium |
| display-lg | Aeonik Pro | 64 | 500 | 1.04 | -0.025em | kern, liga | Large section hero |
| display-md | Aeonik Pro | 48 | 500 | 1.08 | -0.02em | kern, liga | Product-section opener |
| h1 | Aeonik Pro | 40 | 600 | 1.1 | -0.018em | kern | Page title on white |
| h2 | Aeonik Pro | 32 | 600 | 1.2 | -0.012em | kern | Section heading |
| h3 | Aeonik Pro | 24 | 600 | 1.25 | -0.005em | kern | Card / subsection title |
| h4 | Inter | 20 | 600 | 1.3 | 0 | — | Inter takes over below 24px |
| title-sm | Inter | 18 | 600 | 1.35 | 0 | — | List heading |
| body-lg | Inter | 18 | 400 | 1.55 | 0 | — | Lead paragraph |
| body | Inter | 16 | 400 | 1.55 | 0 | — | Default running body |
| body-strong | Inter | 16 | 600 | 1.55 | 0 | — | Inline emphasis |
| body-sm | Inter | 14 | 400 | 1.5 | 0 | — | Secondary body |
| label | Inter | 13 | 500 | 1.4 | 0 | — | Form labels, table headers |
| caption | Inter | 12 | 500 | 1.4 | 0.02em | — | Metadata, footnotes |
| eyebrow | Inter | 12 | 600 | 1.2 | 0.08em | — | Section eyebrow — uppercase, wide tracking |
| button | Inter | 16 | 600 | 1.2 | 0 | — | All CTA labels |
| nav-link | Inter | 15 | 500 | 1.4 | 0 | — | Top navigation |
| money | Aeonik Pro | 56 | 500 | 1.05 | -0.02em | tnum | Balance / amount display |
| money-inline | Inter | 16 | 500 | 1.4 | 0 | tnum | Inline transaction amounts |
| legal | Inter | 12 | 400 | 1.5 | 0 | — | Footer disclosure |
### Principles
- **Display lives at weight 500–600, not 700**: the hero is medium-weight. The brand's premium calm comes from *not* shouting — Aeonik Pro at 500 reads as confident, not aggressive.
- **Aeonik Pro above 24px, Inter at and below 20px**: the family handoff happens around the h3/h4 boundary. Display authority is Aeonik Pro; UI legibility is Inter.
- **Negative tracking scales with size**: -0.03em on the 86px hero, tightening progressively, reaching 0 by body sizes. Large display compresses; body stays open.
- **Generous body line-height (1.55)**: Inter body runs loose for legibility in dense super-app copy — never tighter than 1.5.
- **Tabular figures on money** (`tnum`): balances and amounts use Aeonik Pro `tnum` so columns align and digits don't jitter. Money is brand-voiced, not mono-terminal.
- **Eyebrows are uppercase Inter at 0.08em tracking**: small (12px), wide-spaced, weight 600 — the only place the brand uppercases.
- **White on dark is pure `#ffffff`**: hero headlines are absolute white for maximum contrast; on-dark body steps down to 72% opacity, captions to 48%.
## 4. Component Stylings
### Buttons
**Primary CTA (light sections)** ("Get started", "Open account")
- Background: `#191c1f` (near-black brand)
- Text: `#ffffff`, Inter weight 600, 16px
- Padding: 14px / 28px · Height: 48px
- Radius: pill (9999)
- Hover: bg lifts to `#23272b`, soft shadow `rgba(16,18,21,0.10) 0 4px 12px`
- Active: bg `#0e1013`, shadow removed
- Use case: every primary action on white sections
**Primary CTA (dark hero)** ("Get the app")
- Background: `#ffffff` (inverted)
- Text: `#191c1f`, Inter weight 600
- Same pill geometry, 48px height
- Hover: bg dims to `rgba(255,255,255,0.92)`
- Use case: the hero CTA on the dark ground — the brand inverts rather than recolours
**Secondary** ("Learn more")
- Background: `#eff0f1` (muted surface) on light / `rgba(255,255,255,0.12)` on dark
- Text: `#191c1f` (light) / `#ffffff` (dark), weight 600
- Padding: 13px / 27px · Height: 48px · Radius: pill
- Hover: bg deepens one step
**Ghost / Outline** ("Compare plans")
- Background: transparent
- Text: `#191c1f`, weight 600
- Border: 1px solid `#c9cdd1` (light) / `rgba(255,255,255,0.16)` (dark)
- Padding: 13px / 27px · Height: 48px · Radius: pill
- Hover: border darkens, faint fill `#f7f7f8`
**Tertiary / Text** ("See all features")
- Background: transparent
- Text: `#191c1f` weight 600 with trailing chevron; accent `#5f43ff` variant for in-copy product links
- Underline grows on hover
### Cards
**Default Card**
- Background: `#ffffff` (surface)
- Border: 1px solid `#e2e4e6`
- Radius: 16px (xl)
- Padding: 24px
- Shadow: none at rest; `soft` on hover for interactive cards
- Use case: feature card, plan card
**Subtle Card**
- Background: `#f7f7f8` (subtle surface)
- Radius: 24px (xxl)
- Padding: 32px
- No border — the fill separates it from white
- Use case: quiet stat blocks, testimonial cards on white bands
**Gradient Card** (the premium product moment)
- Background: `linear-gradient(135deg, #5f43ff, #2868ff)` (sometimes warmed with `#ff4d97`)
- Text: `#ffffff`
- Radius: 24px (xxl)
- Padding: 32px
- Use case: Ultra / Metal tier showcase, card-art hero blocks — the one place colour fills a surface
### Badges, Tags, Pills
**Accent Badge**
- Background: `rgba(95,67,255,0.10)` (accent-soft)
- Text: `#5f43ff`, Inter weight 600, 12px
- Padding: 4px / 12px · Radius: pill
- Use case: "New", "Beta", "Popular"
**Neutral Chip**
- Background: `#eff0f1` (muted surface)
- Text: `#3a3f44`, weight 500, 13px
- Padding: 4px / 12px · Radius: pill
- Use case: filter chips, currency tags
**On-Dark Badge**
- Background: `rgba(255,255,255,0.12)`
- Text: `#ffffff`, weight 600, 12px
- Use case: badges over the dark hero / gradient cards
### Inputs / Forms
**Text Input**
- Background: `#eff0f1` (muted surface) — filled, not outlined-on-white
- Border: 1px solid `#c9cdd1`
- Radius: 8px (md)
- Height: 48px · Padding: 12px / 16px
- Text: `#191c1f`, placeholder `#8d969e`
- Focus: border `#5f43ff` 1.5px, ring `rgba(95,67,255,0.55)` 3px
- Use case: email capture, sign-up, search
**Select / Dropdown**
- Same fill + border as text input, 48px height, trailing chevron `#5f676e`
- Open menu: white surface, 12px radius, `standard` shadow, 8px item padding
**Money Field**
- Background: transparent or muted fill
- Large amount rendered in Aeonik Pro `money` (56px / 500 / `tnum`)
- Currency selector pill inline, accent-violet active state
### Navigation
**Top Nav (light)**
- Height: 64px · Background: `#ffffff`
- Bottom hairline `#e2e4e6` appears on scroll
- Logo left, nav links centre (15px / 500, `#191c1f`), "Log in" ghost + "Get started" pill right
- Nav link hover: underline grows, colour holds `#191c1f`
- Mega-menu: white panel, `standard` shadow, 16px radius, accent-violet category icons
**Top Nav (dark hero overlay)**
- Background: transparent over the dark hero, resolving to `#191c1f` on scroll
- Links + logo white; "Get started" pill is white-fill / near-black text
**Footer**
- Background: `#0e1013` (deep near-black)
- Link text `rgba(255,255,255,0.72)`, category headers `#ffffff`
- Padding: 64px vertical
- Regulatory disclosure block in `legal` (12px), `rgba(255,255,255,0.48)`
## 5. Layout Principles
### Spacing System
Base 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 120. Section spacer 96px; hero padding 120px. The scale is generous — Revolut leans toward breathing room over density, the opposite of a poster-dense fintech.
### Grid & Container
- Page max-width 1280px
- Prose width 720px
- 12-col grid, 24px gutters
- Hero: full-bleed dark ground, content constrained to 1280px, headline left or centre
- White sections: 12-col, often 2-up (copy + mockup) or 3-up (feature grid)
- Gradient showcase blocks frequently break to full-bleed with the gradient bleeding edge-to-edge
### Whitespace Philosophy
Whitespace is the brand's *luxury signal*. Headlines are surrounded by large margins; the 86px hero sits in 120px of vertical air. The premium calm depends on **emptiness around type** — Revolut would rather show one product clearly than crowd three. Gradient imagery is given room to glow rather than being cropped tight.
### Section Cadence
Dark hero → white feature band → white comparison/table band → dark or gradient premium showcase → white FAQ → deep-near-black footer. The dark↔white alternation is the structural rhythm; gradient blocks punctuate, never repeat back-to-back.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|-------------|-------|--------------------------------------------------|
| None | 0 | Full-bleed gradient edges, dividers |
| Micro | 2 | Status dots, tiny indicators |
| Small | 4 | Tags, inline chips |
| Medium | 8 | Inputs, selects, dropdowns |
| Comfortable | 12 | Mid-size cards, mega-menu panels |
| Large | 16 | Feature cards, plan cards |
| Featured | 24 | Subtle cards, gradient showcase cards, modals |
| Pill | 9999 | All CTAs, badges, chips, currency tags |
Revolut's signature pairing is **16–24px cards with fully-pill buttons** — the contrast between calm rectangular surfaces and soft round actions is the brand's geometric fingerprint. Pills are reserved for *actions and tags*; surfaces never go pill.
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------------------------------------------------------------|--------------------------------------|
| 0 | Flat (white canvas or dark ground) | Hero text, body, default sections |
| 1 | Surface jump to `#f7f7f8` or 1px `#e2e4e6` border, no shadow | Default card |
| 2 | Ambient `rgba(16,18,21,0.06) 0 1px 2px` | Sticky nav post-scroll |
| 3 | Soft `rgba(16,18,21,0.10) 0 4px 12px` | Card / CTA hover |
| 4 | Standard `rgba(16,18,21,0.14) 0 12px 28px -6px` | Mega-menu, dropdown, popover |
| 5 | Elevated `rgba(16,18,21,0.20) 0 28px 56px -12px` | Modal dialog |
### Shadow Philosophy
Light-mode shadows are **soft, warm, and restrained** — `rgba(16,18,21, 0.06–0.20)`, keyed to the brand's near-black ink so an elevated card looks like a deepening of the brand rather than a generic drop-shadow. There is no coloured glow in the elevation system; the accent gradient stays in imagery and the only chromatic emphasis is the violet focus ring. On the dark ground, elevation is communicated almost entirely by **surface lightening** (`#191c1f` → `#23272b` → `#2d3237`) rather than shadow, because low-opacity black is invisible on a dark background.
## 8. Interaction & Motion
### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — most state changes
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal/menu entrance, gradient reveals
- **Entrance**: `cubic-bezier(0, 0, 0.2, 1)` — scroll-reveal fade-ups
### Durations
- **Fast**: 150ms — hover colour/underline, chip select
- **Standard**: 240ms — most transitions, dropdown open
- **Slow**: 320ms — modal entrance, mega-menu
- **Reveal**: 600ms — scroll-triggered fade-up of section content
### Per-Component Recipes
- **Primary button hover**: bg `#191c1f` → `#23272b` over 150ms; soft shadow fades in over 240ms standard
- **Nav link hover**: underline grows left-to-right over 150ms; colour holds
- **Card hover**: `soft` shadow blooms over 240ms; optional 2px translate-up emphasised
- **Mega-menu open**: panel fades + scales 0.98 → 1.0 over 320ms ease-emphasized
- **Gradient drift** (decorative): the violet→blue wash slowly shifts hue/position over ~12s ease-linear behind hero mockups
- **Scroll reveal**: section copy fades up 16px over 600ms ease-entrance, staggered ~80ms per item
- **Number count-up**: balance/stat figures count from 0 to value over 1.2s ease-standard on first view
- **Modal entrance**: overlay fades 240ms; dialog scales 0.96 → 1.0 over 320ms
### Page-Transition Behavior
Soft cross-fade between routes (~240ms); the nav stays mounted. Dark→light section boundaries do not animate the background colour — the scroll itself reveals the change.
### Reduced Motion
Strictly honoured. Gradient drift freezes to a static wash. Scroll-reveal fades collapse to visible end-state. Number count-ups jump straight to the final value. Parallax mockups become static. Modal scale-up becomes an instant fade.
## 9. Accessibility & A11y
### Contrast Pairs
- `#191c1f` text on `#ffffff` bg: **15.6:1** — AAA
- `#ffffff` on-brand text on `#191c1f` CTA fill: **15.6:1** — AAA
- `#3a3f44` body on `#ffffff` bg: **9.6:1** — AAA
- `#ffffff` text on `#191c1f` dark hero: **14.9:1** — AAA (hero ground is marginally warmer than pure brand ink)
- `#5f676e` muted on `#ffffff`: **5.1:1** — AA for normal text
- `#5f43ff` accent link on `#ffffff`: **5.4:1** — AA (used for links, not body)
### Focus Indicators
3px solid `rgba(95,67,255,0.55)` violet ring with 2px offset on every interactive element. The violet ring is the system's single chromatic focus cue and reads clearly on both white and dark grounds.
### ARIA Patterns
- **Dialog**: modals use `role="dialog"`, `aria-modal="true"`, focus-trap, Escape-to-close
- **Mega-menu**: `role="menu"` with `aria-expanded` on the trigger
- **Tabs**: plan-comparison toggles use `role="tablist"` / `role="tab"` / `aria-selected`
- **Live region**: form validation + balance updates use `aria-live="polite"`
### Keyboard Nav
Tab order follows visual flow. Mega-menus open on Enter/Space and trap focus until Escape. Modals are focus-trapped. The dark/light section change requires no special handling — focus rings adapt via the single violet ring.
### Screen Reader Hints
- Logo: `role="img"` with `aria-label="Revolut"`
- Money figures: visible currency + numerals; `aria-label` spells out "1,250 pounds"
- Gradient decorative imagery: `aria-hidden="true"` (decorative only)
- Eyebrow uppercase text: rendered uppercase via CSS `text-transform`, source case preserved for screen readers
### Reduced Motion
All animations honoured per `prefers-reduced-motion: reduce` — see §8.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Use |
|---------|------------|------------------------------|
| mobile | <640 | Stacked single-column |
| tablet | 640–1024 | 2-col grid |
| desktop | 1024–1280 | Full multi-col layout |
| wide | ≥1280 | Max-width 1280px, centred |
### Touch Targets
Minimum 44×44px. CTAs at 48px height comfortably exceed it. Nav links and chips get expanded tap padding on touch viewports.
### Collapsing Strategy
- Top nav collapses to a hamburger + slide-in drawer below 1024px
- display-hero scales 86 → 64 → 44px (desktop → tablet → mobile)
- display-lg scales 64 → 48 → 36px
- 2-up copy+mockup blocks stack to single column on mobile (copy first)
- 3-up feature grid → 2-col (tablet) → 1-col (mobile)
- Gradient showcase cards retain full-bleed but reduce padding to 24px
### Image Behavior
- Phone-frame mockups at iOS-bezel radius (~36–40px), centred over gradient
- Gradient washes are CSS-rendered (not images) so they scale crisply
- Card-art renders `loading="lazy"` below the fold
- Hero retains the dark ground at all breakpoints — the two-register system never collapses to all-white
### Container Queries
Plan-comparison cards use container queries: below ~360px the feature list stacks under the price; above, price and features sit side-by-side.
## 11. Content & Voice
### Tone
**Confident, clear, globally-minded** — Revolut's voice is the assured-adult of fintech. Sentences are plain and benefit-led, never slangy. The brand speaks to ambition (travel, investing, premium tiers) without hype, and it leans on concrete numbers ("Spend in 150+ currencies", "Get up to 5% on savings"). It sounds like a competent friend who happens to manage money for a living — calm, specific, and a little aspirational.
### Microcopy Patterns
- **Button verbs**: "Get started", "Open account", "Get the app", "Compare plans", "Learn more"
- **Error recipe**: clear and corrective, never cute. "That email doesn't look right. Check and try again."
- **Success confirmation**: "Done — your transfer is on its way."
- **Loading state**: a calm spinner with "Just a moment…"; never jokes
### Empty States
- **No transactions**: "Nothing here yet. Your activity will show up once you start spending."
- **No saved cards**: "Add a card to get started."
- Empty states are reassuring and instructive — they tell you the next step, not apologise.
### CTA Verb Conventions
- **Acquisition**: "Get started", "Open account", "Sign up free"
- **App download**: "Get the app", "Download"
- **Sign-in**: "Log in"
- **Exploration**: "Learn more", "Compare plans", "See how it works"
- **Money**: "Send", "Exchange", "Add money", "Invest"
- **Premium**: "Go Premium", "Get Ultra"
The brand prefers **"Get"** as its acquisition verb ("Get started", "Get the app", "Get Ultra") — warm, low-friction, and consistent across the super-app's many products.
## 12. Dark Mode & Theming
Revolut is **dual-register by design** — not a single light theme with an optional dark toggle, but a layout where dark and light coexist on the same page. The hero and premium showcases are near-black (`#191c1f` / `#0e1013`); the explanatory content is white (`#ffffff`). The same near-black ink (`#191c1f`) reads as *text* on white and *ground* on dark, which is what makes the brand's monochrome system feel unified.
When implementing as a togglable theme, treat **light as the content default** and **dark as the hero/footer register**:
```yaml
colors-dark:
bg: '#191c1f' # hero / dark-section ground
bg-deep: '#0e1013' # footer / max-contrast
surface: '#23272b' # +1 elevated card on dark
surface-2: '#2d3237' # +2 elevated
text: '#ffffff' # white headline + body
text-body: 'rgba(255,255,255,0.72)'
text-muted: 'rgba(255,255,255,0.48)'
brand: '#ffffff' # brand inverts to white on dark
on-brand: '#191c1f' # near-black label on the white CTA fill
accent: '#7d63ff' # violet lifts slightly for dark legibility
border: 'rgba(255,255,255,0.16)'
link: '#ffffff'
```
On dark, the **CTA inverts rather than recolours** (white fill, near-black label), elevation is communicated by **surface lightening** rather than shadow, and the accent violet lifts a touch (`#5f43ff` → `#7d63ff`) to hold contrast on the dark ground. The gradient accent system is identical in both registers.
## 13. Lineage & Influences
Revolut's design lineage runs through the **European premium-fintech** tradition rather than the loud, youth-coded American one. Its monochrome-plus-gradient restraint, its medium-weight geometric display face, and its calm whitespace owe more to the visual language of premium hardware and challenger-bank minimalism than to consumer-money-app maximalism. The near-black-and-white structure with a single luminous accent is a direct descendant of the **Swiss/International-Style discipline** filtered through modern product design: type and grid do the work; colour is reward, not wallpaper. The Aeonik Pro choice — a contemporary geometric grotesque favoured across premium tech branding — places Revolut firmly in the post-2018 "neo-grotesque-with-a-warm-edge" cohort.
What it draws from contemporaries: the **dark-hero-into-light-content** pattern shared by premium product launch pages; the **gradient-behind-mockup** convention popularised across modern fintech and developer-tool marketing; and the **fully-pill CTA** that has become consumer-fintech shorthand for friendly, low-friction action. What it rejects is just as defining: it refuses the **neon loudness** of Cash App's acid-green-on-black, the **hot-coral playfulness** of Monzo, and the **flat corporate-blue trust signalling** of legacy banking. Revolut's bet is that *premium calm* — quiet near-black, expensive whitespace, gradient as jewellery — reads as more trustworthy to an ambitious, globally-mobile user than any amount of brand-colour shouting.
**Influences:**
- **Aeonik Pro / CoType Foundry** ([cotypefoundry.com](https://www.cotypefoundry.com)) — The geometric grotesque display face that anchors the premium, poised headline voice
- **Inter typeface** ([rsms.me](https://rsms.me/inter/)) — The neutral high-legibility workhorse for all body and UI text
- **Swiss / International Typographic Style** ([wikipedia.org](https://en.wikipedia.org/wiki/International_Typographic_Style)) — Grid discipline and type-led hierarchy where colour is accent, not structure
- **Apple product pages** ([apple.com](https://www.apple.com)) — Dark-hero-into-light-content rhythm and luxurious whitespace around a single hero object
- **Stripe** ([stripe.com](https://stripe.com)) — Gradient-as-accent and the premium-minimal fintech marketing template
- **Linear** ([linear.app](https://linear.app)) — Near-black grounds, restrained palette, and the gradient-bloom-behind-product convention
## 14. Do's and Don'ts
**Do:**
- Build on the two-register system: near-black hero (`#191c1f`) into white content (`#ffffff`)
- Render the hero headline in Aeonik Pro at weight 500 — medium, poised, never heavy-700
- Use near-black `#191c1f` as the structural brand colour; let it be ink on white and ground on dark
- Keep accents (violet `#5f43ff` → blue `#2868ff`) as gradients behind imagery, never on body type
- Fully-pill every CTA (radius 9999); invert fill by section (near-black on light, white on dark)
- Use 16–24px radius on cards — calm rectangular surfaces against round buttons
- Give the hero 120px of vertical air; let whitespace do the premium signalling
- Pair Aeonik Pro (display ≥24px) with Inter (UI ≤20px) and respect the handoff
- Use `tnum` Aeonik Pro for money figures so amounts read as brand voice, not terminal
- Communicate elevation on dark via surface lightening, not invisible black shadows
**Don't:**
- Don't make the hero light/white — the dark hero is the brand's loudest, most identifying gesture
- Don't colour the headline with the gradient — colour stays in imagery and focus rings
- Don't substitute the near-black ink with pure `#000000` — `#191c1f` is warmer and intentional
- Don't set display type at weight 700 — that breaks the premium-calm posture
- Don't pill the cards or square the buttons — the geometry contrast is the fingerprint
- Don't crowd sections — Revolut shows one product clearly, not three crammed together
- Don't recolour the CTA on dark — invert it to white-fill / near-black-label instead
- Don't add a coloured drop-shadow — shadows are warm-black; the only glow is the focus ring
- Don't use mono for money — balances are Aeonik Pro `tnum`, not terminal mono
- Don't oversaturate — the brand's discipline is monochrome structure plus one luminous accent
## 15. Agent Prompt Guide
### Quick Color Reference
```
Brand / Ink: #191c1f (near-black — primary)
Canvas: #ffffff
Hero Ground: #191c1f
Deep Ground: #0e1013
Body: #3a3f44
Muted: #5f676e
Accent Violet: #5f43ff
Accent Blue: #2868ff
Accent Pink: #ff4d97
Border: #e2e4e6
On-Brand: #ffffff
```
### Example Component Prompts
1. *"Create a Revolut hero: near-black `#191c1f` background, full-bleed. A single white Aeonik Pro headline at 86px weight 500 with -0.03em tracking, reading 'One app, all things money.'. Below, an 18px Inter body in `rgba(255,255,255,0.72)`. A fully-pill CTA (radius 9999) at 48px height, white fill `#ffffff` with near-black `#191c1f` label at Inter weight 600, reading 'Get the app'. Behind a phone mockup on the right, a slow-drifting violet→blue gradient `linear-gradient(135deg, #5f43ff, #2868ff)`."*
2. *"Design a Revolut feature card on a white section: bg `#ffffff`, 1px `#e2e4e6` border, 16px radius, 24px padding. Title in Aeonik Pro 24px weight 600 `#191c1f`. Body in Inter 16px `#3a3f44` line-height 1.55. A small accent-violet icon top-left. On hover, a soft warm-black shadow `rgba(16,18,21,0.10) 0 4px 12px` blooms over 240ms."*
3. *"Build a Revolut premium showcase card: 24px radius, 32px padding, filled with a `linear-gradient(135deg, #5f43ff, #2868ff)` warmed toward `#ff4d97` at one corner. White Aeonik Pro h2 (32px / 600) reading 'Revolut Ultra', white Inter body at 72% opacity, and a white-fill pill CTA with near-black label 'Get Ultra'. Centre a metal-card render catching the violet light."*
4. *"Compose a Revolut comparison section: white background, a 3-up grid of plan cards (24px gap). Each card bg `#f7f7f8`, 24px radius, no border, 32px padding. Plan name in Aeonik Pro 24px/600, price in Aeonik Pro 56px/500 with `tnum`, feature list in Inter 16px `#3a3f44`. The recommended plan gets an accent-soft `rgba(95,67,255,0.10)` badge reading 'Popular' in `#5f43ff`."*
5. *"Design a Revolut top nav: 64px tall, white `#ffffff` background with a `#e2e4e6` hairline. Logo left, centre nav links in Inter 15px/500 `#191c1f` (underline-grow on hover), and right side a ghost 'Log in' (transparent, `#c9cdd1` border, pill) beside a near-black-fill pill 'Get started' with white label."*
6. *"Create a Revolut money input: muted `#eff0f1` fill, 8px radius, 48px height, 1px `#c9cdd1` border. The amount renders in Aeonik Pro 56px weight 500 with `tnum`, near-black `#191c1f`. An inline currency-selector pill sits right, accent-violet `#5f43ff` when active. On focus, a 3px `rgba(95,67,255,0.55)` violet ring with 2px offset."*
### Iteration Guide
1. **Go dark in the hero**: if your hero is white, you're not Revolut. The identifying gesture is the near-black `#191c1f` hero with a single white headline.
2. **Drop the headline weight to 500**: Aeonik Pro at medium, not bold. The premium calm depends on *not* shouting.
3. **Keep colour in imagery only**: move every accent into gradients behind mockups and into focus rings. Body type and structure stay monochrome near-black/white.
4. **Pill the buttons, calm the cards**: CTAs at radius 9999; cards at 16–24px. The geometry contrast is the fingerprint.
5. **Invert, don't recolour, on dark**: on the dark hero, the CTA becomes white-fill / near-black-label — same brand, flipped.
6. **Replace pure black with `#191c1f`**: the warm near-black is intentional; pure `#000000` reads colder and off-brand.
7. **Add air**: widen section padding to 96px+ and give the hero 120px. Whitespace is the luxury signal.
8. **Split the type by size**: Aeonik Pro for display ≥24px, Inter for everything ≤20px, with `tnum` on any money figure.
1. Visual Theme & Atmosphere
Revolut’s site runs on a two-register contrast system: a near-black hero (#191c1f) and white content (#ffffff), with the same near-black ink threading through both. The hero is the brand’s loudest gesture — a deep, slightly-blue-warm near-black ground onto which a single white Aeonik Pro headline floats at roughly 86px and weight 500. That weight choice matters: 500 is medium, not bold, so the hero reads as poised rather than shouting. It is the typographic posture of a premium metal card, not a startup banner. Below the fold, the site resets to white sections where everything is built in Inter at body sizes on the same #191c1f ink, and the mood shifts from cinematic to clean-product-explainer.
The brand is the UK fintech super-app — current accounts, multi-currency exchange, crypto, stock trading, travel eSIMs, business banking, and the premium Ultra tier all live under one roof. A lesser design would fragment under that breadth; Revolut holds it together with monochrome restraint plus gradient accent. Near-black and white do all the structural work — backgrounds, type, dividers, the grid — and colour arrives only as luminous, intentional accent: electric violet (#5f43ff) bleeding into blue (#2868ff), occasionally warmed by pink (#ff4d97) on the most premium product art. These gradients bloom behind phone mockups and card renders; they never colour the type, and they never compete with the headline.
The signature shape is the fully-pill CTA (radius 9999px). Every primary button is a soft capsule — near-black fill with white label on light sections, white fill with near-black label on the dark hero. The pill geometry is friendly and unmistakably consumer-fintech, but Revolut keeps it disciplined: pills are for actions, while cards and surfaces use a calmer 16–24px radius family. The combination — sharp-ish cards, soft-round buttons — gives the surface its characteristic expensive calm.
Pacing alternates dark cinematic moments with white explanatory bands. The page opens dark (hero), drops to white (feature grid, comparison tables, FAQ), then occasionally returns to dark for a premium-tier showcase or the footer. The dark sections are where the gradient-accented product imagery lives — metal cards catching violet light, globe visualisations, currency tickers — and the white sections are where the rational, legible product argument is made in Inter. This dark/light rhythm is the brand’s structural heartbeat.
The overall atmosphere is sleek, global, and quietly expensive. Where Monzo goes hot-coral and Cash App goes acid-green-on-black, Revolut deliberately under-saturates: it wants to look like the grown-up fintech, the one you’d trust with a salary and a stock portfolio, not just lunch-money splits. The Aeonik Pro / Inter pairing reinforces this — a slightly-humanist geometric display face for authority, a neutral workhorse for trust — and the gradient is the only place the brand lets itself glow.
Key Characteristics:
- Two-register layout: near-black hero (
#191c1f) + white content (#ffffff), same ink in both - White Aeonik Pro hero headline at ~86px / weight 500 — medium, poised, not bold
- Aeonik Pro (display) + Inter (body) pairing — authority split from legibility
- Near-black
#191c1fas the structural brand colour; never neon - Fully-pill CTAs at radius 9999px — soft capsules, inverted by section
- Gradient accents (violet
#5f43ff→ blue#2868ff) bloom behind imagery, never on type - Cards use a calmer 16–24px radius — sharp-ish surfaces against round buttons
- Generous whitespace; headlines breathe, sections separated by 96px+
- Monochrome-plus-gradient discipline — colour is accent, never structure
- Premium “metal card rendered as a website” mood — global, expensive, calm
2. Color Palette & Roles
Canvas
- White (
#ffffff→--bg,--surface): Primary content canvas; the default ground for all explanatory sections. - Near-Black Hero (
#191c1f→--bg-dark): The dark hero / dark-section ground; warm-blue near-black, not pure black. - Deep Near-Black (
#0e1013→--bg-dark-deep): Deepest ground for footer and maximum-contrast bands. - Subtle Surface (
#f7f7f8→--surface-subtle): Faint grey for alternating section bands and quiet cards.
Text
- Ink (
#191c1f→--text): Primary near-black headline + heavy text on white. - Body (
#3a3f44→--text-body): Running paragraph grey-black on white. - Muted (
#5f676e→--text-muted): Captions, metadata, secondary labels. - Subtle (
#8d969e→--text-subtle): Disabled state and lowest hierarchy on white. - On-Dark Ink (
#ffffff→--text-on-dark): White headline + body on the dark hero. - On-Dark Body (
rgba(255,255,255,0.72)→--text-on-dark-muted): Running body on dark. - On-Dark Subtle (
rgba(255,255,255,0.48)→--text-on-dark-subtle): Captions on dark.
Brand
- Brand / Primary (
#191c1f→--brand): The structural brand colour — near-black ink. Drives the primary CTA fill on light, the hero ground, and all heavy type. Revolut’s “brand colour” is not a hue; it is this near-black. - Brand on Dark (
#ffffff→--brand-on-dark): The brand inverted — white becomes the primary on dark grounds, where the CTA fills white.
Accent (Gradient System)
Revolut’s only chromatic voice. Accents appear as gradients behind imagery and as occasional link/highlight colour — never as background structure or body type.
- Accent Violet (
#5f43ff→--accent): Primary accent and gradient start; focus ring, in-copy product links. - Accent Blue (
#2868ff→--accent-blue): Gradient terminus; informational semantic. - Accent Pink (
#ff4d97→--accent-pink): Warm bloom on premium / Ultra card art. - Accent Soft (
rgba(95,67,255,0.10)→--accent-soft): Violet at 10% — informational badge tint.
Interactive
- Link = Ink
#191c1f, underlined at rest in running copy; thicker underline on hover. - Accent Link —
#5f43fffor product/feature links inside marketing copy. - Link on Dark —
#ffffff, underlined on the dark hero. - CTA Hover (light) — near-black fill lifts to
#23272b; subtle soft shadow blooms. - CTA Hover (dark) — white fill dims to
rgba(255,255,255,0.92). - Disabled —
#eff0f1fill,#8d969etext, no shadow. - Selected chip —
accent-softbg with#5f43fftext.
Neutral Scale (Light)
#ffffff (Canvas) → #f7f7f8 (Subtle) → #eff0f1 (Muted fill) → #e2e4e6 (Border) → #c9cdd1 (Border Strong) → #8d969e (Text Subtle) → #5f676e (Muted) → #3a3f44 (Body) → #191c1f (Ink). On dark, the scale is #0e1013 → #191c1f → #23272b → #2d3237.
Surface & Borders
- Surface (
#ffffff→--surface): Default card on white. - Subtle Surface (
#f7f7f8→--surface-subtle): Quiet card / alternating band. - Muted Surface (
#eff0f1→--surface-muted): Input rest fill, secondary button fill, chips. - Surface Dark (
#23272b→--surface-dark): +1 elevated surface on dark. - Surface Dark 2 (
#2d3237→--surface-dark-2): +2 elevated surface on dark. - Border (
#e2e4e6→--border): Default 1px hairline on white. - Border Strong (
#c9cdd1→--border-strong): Input border, focused divider. - Border Soft (
#f0f1f2→--border-soft): Softest section divider. - Border on Dark (
rgba(255,255,255,0.16)→--border-on-dark): Hairline on dark grounds.
Shadow Colors
Light-mode shadows are low-opacity warm-black — rgba(16, 18, 21, 0.06–0.20), tuned to the near-black ink so shadows feel like a deepening of the brand colour rather than a generic grey. The accent gradient never casts a coloured shadow; the only “glow” in the system is the violet focus ring.
Semantic
- Success (
#1f8f4e→--semantic-success): Positive balance, transfer complete. - Warning (
#c77700→--semantic-warning): Caution amber. - Danger (
#d92d20→--semantic-danger): Error, declined, spend-alert red. - Info (
#2868ff→--semantic-info): Informational blue (shares the accent-blue hue).
3. Typography Rules
Font Family
Display: Aeonik Pro — a slightly-humanist geometric grotesque (CoType Foundry), used for every headline tier from the 86px hero down to the 24px h3. Its medium-weight cuts give Revolut its poised authority; the brand favours weight 500–600 for display rather than heavy 700, which keeps the dark hero looking premium rather than shouty. Weights deployed: 500, 600, 700.
Body: Inter — the neutral workhorse for all running text, labels, captions, and most UI chrome (h4 and below switch from Aeonik Pro to Inter). Inter’s high x-height and broad legibility carry the dense explanatory copy of a super-app. The cv11 stylistic set (single-storey lowercase a alternates) is occasionally enabled for a softer feel. Weights: 400, 500, 600.
Fallback chains: display "Aeonik Pro", system-ui, -apple-system, sans-serif; body Inter, system-ui, -apple-system, sans-serif. Both hand off to the platform UI font, which keeps the dark/light contrast intact even before webfonts load.
Mono: system mono — ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace, reserved for the rare code reference or API snippet. Money figures do not use mono — Revolut renders balances in Aeonik Pro with tnum (tabular figures) so amounts feel like part of the brand voice, not a terminal. Weights: 400, 500.
OpenType features: kern + liga always on across both families; tnum on money figures so columns of amounts align; cv11 optional on Inter.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Aeonik Pro | 86 | 500 | 1.0 | -0.03em | kern, liga | Dark-hero headline — white, poised, medium |
| display-lg | Aeonik Pro | 64 | 500 | 1.04 | -0.025em | kern, liga | Large section hero |
| display-md | Aeonik Pro | 48 | 500 | 1.08 | -0.02em | kern, liga | Product-section opener |
| h1 | Aeonik Pro | 40 | 600 | 1.1 | -0.018em | kern | Page title on white |
| h2 | Aeonik Pro | 32 | 600 | 1.2 | -0.012em | kern | Section heading |
| h3 | Aeonik Pro | 24 | 600 | 1.25 | -0.005em | kern | Card / subsection title |
| h4 | Inter | 20 | 600 | 1.3 | 0 | — | Inter takes over below 24px |
| title-sm | Inter | 18 | 600 | 1.35 | 0 | — | List heading |
| body-lg | Inter | 18 | 400 | 1.55 | 0 | — | Lead paragraph |
| body | Inter | 16 | 400 | 1.55 | 0 | — | Default running body |
| body-strong | Inter | 16 | 600 | 1.55 | 0 | — | Inline emphasis |
| body-sm | Inter | 14 | 400 | 1.5 | 0 | — | Secondary body |
| label | Inter | 13 | 500 | 1.4 | 0 | — | Form labels, table headers |
| caption | Inter | 12 | 500 | 1.4 | 0.02em | — | Metadata, footnotes |
| eyebrow | Inter | 12 | 600 | 1.2 | 0.08em | — | Section eyebrow — uppercase, wide tracking |
| button | Inter | 16 | 600 | 1.2 | 0 | — | All CTA labels |
| nav-link | Inter | 15 | 500 | 1.4 | 0 | — | Top navigation |
| money | Aeonik Pro | 56 | 500 | 1.05 | -0.02em | tnum | Balance / amount display |
| money-inline | Inter | 16 | 500 | 1.4 | 0 | tnum | Inline transaction amounts |
| legal | Inter | 12 | 400 | 1.5 | 0 | — | Footer disclosure |
Principles
- Display lives at weight 500–600, not 700: the hero is medium-weight. The brand’s premium calm comes from not shouting — Aeonik Pro at 500 reads as confident, not aggressive.
- Aeonik Pro above 24px, Inter at and below 20px: the family handoff happens around the h3/h4 boundary. Display authority is Aeonik Pro; UI legibility is Inter.
- Negative tracking scales with size: -0.03em on the 86px hero, tightening progressively, reaching 0 by body sizes. Large display compresses; body stays open.
- Generous body line-height (1.55): Inter body runs loose for legibility in dense super-app copy — never tighter than 1.5.
- Tabular figures on money (
tnum): balances and amounts use Aeonik Protnumso columns align and digits don’t jitter. Money is brand-voiced, not mono-terminal. - Eyebrows are uppercase Inter at 0.08em tracking: small (12px), wide-spaced, weight 600 — the only place the brand uppercases.
- White on dark is pure
#ffffff: hero headlines are absolute white for maximum contrast; on-dark body steps down to 72% opacity, captions to 48%.
4. Component Stylings
Buttons
Primary CTA (light sections) (“Get started”, “Open account”)
- Background:
#191c1f(near-black brand) - Text:
#ffffff, Inter weight 600, 16px - Padding: 14px / 28px · Height: 48px
- Radius: pill (9999)
- Hover: bg lifts to
#23272b, soft shadowrgba(16,18,21,0.10) 0 4px 12px - Active: bg
#0e1013, shadow removed - Use case: every primary action on white sections
Primary CTA (dark hero) (“Get the app”)
- Background:
#ffffff(inverted) - Text:
#191c1f, Inter weight 600 - Same pill geometry, 48px height
- Hover: bg dims to
rgba(255,255,255,0.92) - Use case: the hero CTA on the dark ground — the brand inverts rather than recolours
Secondary (“Learn more”)
- Background:
#eff0f1(muted surface) on light /rgba(255,255,255,0.12)on dark - Text:
#191c1f(light) /#ffffff(dark), weight 600 - Padding: 13px / 27px · Height: 48px · Radius: pill
- Hover: bg deepens one step
Ghost / Outline (“Compare plans”)
- Background: transparent
- Text:
#191c1f, weight 600 - Border: 1px solid
#c9cdd1(light) /rgba(255,255,255,0.16)(dark) - Padding: 13px / 27px · Height: 48px · Radius: pill
- Hover: border darkens, faint fill
#f7f7f8
Tertiary / Text (“See all features”)
- Background: transparent
- Text:
#191c1fweight 600 with trailing chevron; accent#5f43ffvariant for in-copy product links - Underline grows on hover
Cards
Default Card
- Background:
#ffffff(surface) - Border: 1px solid
#e2e4e6 - Radius: 16px (xl)
- Padding: 24px
- Shadow: none at rest;
softon hover for interactive cards - Use case: feature card, plan card
Subtle Card
- Background:
#f7f7f8(subtle surface) - Radius: 24px (xxl)
- Padding: 32px
- No border — the fill separates it from white
- Use case: quiet stat blocks, testimonial cards on white bands
Gradient Card (the premium product moment)
- Background:
linear-gradient(135deg, #5f43ff, #2868ff)(sometimes warmed with#ff4d97) - Text:
#ffffff - Radius: 24px (xxl)
- Padding: 32px
- Use case: Ultra / Metal tier showcase, card-art hero blocks — the one place colour fills a surface
Badges, Tags, Pills
Accent Badge
- Background:
rgba(95,67,255,0.10)(accent-soft) - Text:
#5f43ff, Inter weight 600, 12px - Padding: 4px / 12px · Radius: pill
- Use case: “New”, “Beta”, “Popular”
Neutral Chip
- Background:
#eff0f1(muted surface) - Text:
#3a3f44, weight 500, 13px - Padding: 4px / 12px · Radius: pill
- Use case: filter chips, currency tags
On-Dark Badge
- Background:
rgba(255,255,255,0.12) - Text:
#ffffff, weight 600, 12px - Use case: badges over the dark hero / gradient cards
Inputs / Forms
Text Input
- Background:
#eff0f1(muted surface) — filled, not outlined-on-white - Border: 1px solid
#c9cdd1 - Radius: 8px (md)
- Height: 48px · Padding: 12px / 16px
- Text:
#191c1f, placeholder#8d969e - Focus: border
#5f43ff1.5px, ringrgba(95,67,255,0.55)3px - Use case: email capture, sign-up, search
Select / Dropdown
- Same fill + border as text input, 48px height, trailing chevron
#5f676e - Open menu: white surface, 12px radius,
standardshadow, 8px item padding
Money Field
- Background: transparent or muted fill
- Large amount rendered in Aeonik Pro
money(56px / 500 /tnum) - Currency selector pill inline, accent-violet active state
Navigation
Top Nav (light)
- Height: 64px · Background:
#ffffff - Bottom hairline
#e2e4e6appears on scroll - Logo left, nav links centre (15px / 500,
#191c1f), “Log in” ghost + “Get started” pill right - Nav link hover: underline grows, colour holds
#191c1f - Mega-menu: white panel,
standardshadow, 16px radius, accent-violet category icons
Top Nav (dark hero overlay)
- Background: transparent over the dark hero, resolving to
#191c1fon scroll - Links + logo white; “Get started” pill is white-fill / near-black text
Footer
- Background:
#0e1013(deep near-black) - Link text
rgba(255,255,255,0.72), category headers#ffffff - Padding: 64px vertical
- Regulatory disclosure block in
legal(12px),rgba(255,255,255,0.48)
5. Layout Principles
Spacing System
Base 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 120. Section spacer 96px; hero padding 120px. The scale is generous — Revolut leans toward breathing room over density, the opposite of a poster-dense fintech.
Grid & Container
- Page max-width 1280px
- Prose width 720px
- 12-col grid, 24px gutters
- Hero: full-bleed dark ground, content constrained to 1280px, headline left or centre
- White sections: 12-col, often 2-up (copy + mockup) or 3-up (feature grid)
- Gradient showcase blocks frequently break to full-bleed with the gradient bleeding edge-to-edge
Whitespace Philosophy
Whitespace is the brand’s luxury signal. Headlines are surrounded by large margins; the 86px hero sits in 120px of vertical air. The premium calm depends on emptiness around type — Revolut would rather show one product clearly than crowd three. Gradient imagery is given room to glow rather than being cropped tight.
Section Cadence
Dark hero → white feature band → white comparison/table band → dark or gradient premium showcase → white FAQ → deep-near-black footer. The dark↔white alternation is the structural rhythm; gradient blocks punctuate, never repeat back-to-back.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| None | 0 | Full-bleed gradient edges, dividers |
| Micro | 2 | Status dots, tiny indicators |
| Small | 4 | Tags, inline chips |
| Medium | 8 | Inputs, selects, dropdowns |
| Comfortable | 12 | Mid-size cards, mega-menu panels |
| Large | 16 | Feature cards, plan cards |
| Featured | 24 | Subtle cards, gradient showcase cards, modals |
| Pill | 9999 | All CTAs, badges, chips, currency tags |
Revolut’s signature pairing is 16–24px cards with fully-pill buttons — the contrast between calm rectangular surfaces and soft round actions is the brand’s geometric fingerprint. Pills are reserved for actions and tags; surfaces never go pill.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat (white canvas or dark ground) | Hero text, body, default sections |
| 1 | Surface jump to #f7f7f8 or 1px #e2e4e6 border, no shadow | Default card |
| 2 | Ambient rgba(16,18,21,0.06) 0 1px 2px | Sticky nav post-scroll |
| 3 | Soft rgba(16,18,21,0.10) 0 4px 12px | Card / CTA hover |
| 4 | Standard rgba(16,18,21,0.14) 0 12px 28px -6px | Mega-menu, dropdown, popover |
| 5 | Elevated rgba(16,18,21,0.20) 0 28px 56px -12px | Modal dialog |
Shadow Philosophy
Light-mode shadows are soft, warm, and restrained — rgba(16,18,21, 0.06–0.20), keyed to the brand’s near-black ink so an elevated card looks like a deepening of the brand rather than a generic drop-shadow. There is no coloured glow in the elevation system; the accent gradient stays in imagery and the only chromatic emphasis is the violet focus ring. On the dark ground, elevation is communicated almost entirely by surface lightening (#191c1f → #23272b → #2d3237) rather than shadow, because low-opacity black is invisible on a dark background.
8. Interaction & Motion
Easing
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— most state changes - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— modal/menu entrance, gradient reveals - Entrance:
cubic-bezier(0, 0, 0.2, 1)— scroll-reveal fade-ups
Durations
- Fast: 150ms — hover colour/underline, chip select
- Standard: 240ms — most transitions, dropdown open
- Slow: 320ms — modal entrance, mega-menu
- Reveal: 600ms — scroll-triggered fade-up of section content
Per-Component Recipes
- Primary button hover: bg
#191c1f→#23272bover 150ms; soft shadow fades in over 240ms standard - Nav link hover: underline grows left-to-right over 150ms; colour holds
- Card hover:
softshadow blooms over 240ms; optional 2px translate-up emphasised - Mega-menu open: panel fades + scales 0.98 → 1.0 over 320ms ease-emphasized
- Gradient drift (decorative): the violet→blue wash slowly shifts hue/position over ~12s ease-linear behind hero mockups
- Scroll reveal: section copy fades up 16px over 600ms ease-entrance, staggered ~80ms per item
- Number count-up: balance/stat figures count from 0 to value over 1.2s ease-standard on first view
- Modal entrance: overlay fades 240ms; dialog scales 0.96 → 1.0 over 320ms
Page-Transition Behavior
Soft cross-fade between routes (~240ms); the nav stays mounted. Dark→light section boundaries do not animate the background colour — the scroll itself reveals the change.
Reduced Motion
Strictly honoured. Gradient drift freezes to a static wash. Scroll-reveal fades collapse to visible end-state. Number count-ups jump straight to the final value. Parallax mockups become static. Modal scale-up becomes an instant fade.
9. Accessibility & A11y
Contrast Pairs
#191c1ftext on#ffffffbg: 15.6:1 — AAA#ffffffon-brand text on#191c1fCTA fill: 15.6:1 — AAA#3a3f44body on#ffffffbg: 9.6:1 — AAA#fffffftext on#191c1fdark hero: 14.9:1 — AAA (hero ground is marginally warmer than pure brand ink)#5f676emuted on#ffffff: 5.1:1 — AA for normal text#5f43ffaccent link on#ffffff: 5.4:1 — AA (used for links, not body)
Focus Indicators
3px solid rgba(95,67,255,0.55) violet ring with 2px offset on every interactive element. The violet ring is the system’s single chromatic focus cue and reads clearly on both white and dark grounds.
ARIA Patterns
- Dialog: modals use
role="dialog",aria-modal="true", focus-trap, Escape-to-close - Mega-menu:
role="menu"witharia-expandedon the trigger - Tabs: plan-comparison toggles use
role="tablist"/role="tab"/aria-selected - Live region: form validation + balance updates use
aria-live="polite"
Keyboard Nav
Tab order follows visual flow. Mega-menus open on Enter/Space and trap focus until Escape. Modals are focus-trapped. The dark/light section change requires no special handling — focus rings adapt via the single violet ring.
Screen Reader Hints
- Logo:
role="img"witharia-label="Revolut" - Money figures: visible currency + numerals;
aria-labelspells out “1,250 pounds” - Gradient decorative imagery:
aria-hidden="true"(decorative only) - Eyebrow uppercase text: rendered uppercase via CSS
text-transform, source case preserved for screen readers
Reduced Motion
All animations honoured per prefers-reduced-motion: reduce — see §8.
10. Responsive Behavior
Breakpoints
| Name | Width | Use |
|---|---|---|
| mobile | <640 | Stacked single-column |
| tablet | 640–1024 | 2-col grid |
| desktop | 1024–1280 | Full multi-col layout |
| wide | ≥1280 | Max-width 1280px, centred |
Touch Targets
Minimum 44×44px. CTAs at 48px height comfortably exceed it. Nav links and chips get expanded tap padding on touch viewports.
Collapsing Strategy
- Top nav collapses to a hamburger + slide-in drawer below 1024px
- display-hero scales 86 → 64 → 44px (desktop → tablet → mobile)
- display-lg scales 64 → 48 → 36px
- 2-up copy+mockup blocks stack to single column on mobile (copy first)
- 3-up feature grid → 2-col (tablet) → 1-col (mobile)
- Gradient showcase cards retain full-bleed but reduce padding to 24px
Image Behavior
- Phone-frame mockups at iOS-bezel radius (~36–40px), centred over gradient
- Gradient washes are CSS-rendered (not images) so they scale crisply
- Card-art renders
loading="lazy"below the fold - Hero retains the dark ground at all breakpoints — the two-register system never collapses to all-white
Container Queries
Plan-comparison cards use container queries: below ~360px the feature list stacks under the price; above, price and features sit side-by-side.
11. Content & Voice
Tone
Confident, clear, globally-minded — Revolut’s voice is the assured-adult of fintech. Sentences are plain and benefit-led, never slangy. The brand speaks to ambition (travel, investing, premium tiers) without hype, and it leans on concrete numbers (“Spend in 150+ currencies”, “Get up to 5% on savings”). It sounds like a competent friend who happens to manage money for a living — calm, specific, and a little aspirational.
Microcopy Patterns
- Button verbs: “Get started”, “Open account”, “Get the app”, “Compare plans”, “Learn more”
- Error recipe: clear and corrective, never cute. “That email doesn’t look right. Check and try again.”
- Success confirmation: “Done — your transfer is on its way.”
- Loading state: a calm spinner with “Just a moment…”; never jokes
Empty States
- No transactions: “Nothing here yet. Your activity will show up once you start spending.”
- No saved cards: “Add a card to get started.”
- Empty states are reassuring and instructive — they tell you the next step, not apologise.
CTA Verb Conventions
- Acquisition: “Get started”, “Open account”, “Sign up free”
- App download: “Get the app”, “Download”
- Sign-in: “Log in”
- Exploration: “Learn more”, “Compare plans”, “See how it works”
- Money: “Send”, “Exchange”, “Add money”, “Invest”
- Premium: “Go Premium”, “Get Ultra”
The brand prefers “Get” as its acquisition verb (“Get started”, “Get the app”, “Get Ultra”) — warm, low-friction, and consistent across the super-app’s many products.
12. Dark Mode & Theming
Revolut is dual-register by design — not a single light theme with an optional dark toggle, but a layout where dark and light coexist on the same page. The hero and premium showcases are near-black (#191c1f / #0e1013); the explanatory content is white (#ffffff). The same near-black ink (#191c1f) reads as text on white and ground on dark, which is what makes the brand’s monochrome system feel unified.
When implementing as a togglable theme, treat light as the content default and dark as the hero/footer register:
colors-dark:
bg: '#191c1f' # hero / dark-section ground
bg-deep: '#0e1013' # footer / max-contrast
surface: '#23272b' # +1 elevated card on dark
surface-2: '#2d3237' # +2 elevated
text: '#ffffff' # white headline + body
text-body: 'rgba(255,255,255,0.72)'
text-muted: 'rgba(255,255,255,0.48)'
brand: '#ffffff' # brand inverts to white on dark
on-brand: '#191c1f' # near-black label on the white CTA fill
accent: '#7d63ff' # violet lifts slightly for dark legibility
border: 'rgba(255,255,255,0.16)'
link: '#ffffff'On dark, the CTA inverts rather than recolours (white fill, near-black label), elevation is communicated by surface lightening rather than shadow, and the accent violet lifts a touch (#5f43ff → #7d63ff) to hold contrast on the dark ground. The gradient accent system is identical in both registers.
13. Lineage & Influences
Revolut’s design lineage runs through the European premium-fintech tradition rather than the loud, youth-coded American one. Its monochrome-plus-gradient restraint, its medium-weight geometric display face, and its calm whitespace owe more to the visual language of premium hardware and challenger-bank minimalism than to consumer-money-app maximalism. The near-black-and-white structure with a single luminous accent is a direct descendant of the Swiss/International-Style discipline filtered through modern product design: type and grid do the work; colour is reward, not wallpaper. The Aeonik Pro choice — a contemporary geometric grotesque favoured across premium tech branding — places Revolut firmly in the post-2018 “neo-grotesque-with-a-warm-edge” cohort.
What it draws from contemporaries: the dark-hero-into-light-content pattern shared by premium product launch pages; the gradient-behind-mockup convention popularised across modern fintech and developer-tool marketing; and the fully-pill CTA that has become consumer-fintech shorthand for friendly, low-friction action. What it rejects is just as defining: it refuses the neon loudness of Cash App’s acid-green-on-black, the hot-coral playfulness of Monzo, and the flat corporate-blue trust signalling of legacy banking. Revolut’s bet is that premium calm — quiet near-black, expensive whitespace, gradient as jewellery — reads as more trustworthy to an ambitious, globally-mobile user than any amount of brand-colour shouting.
Influences:
- Aeonik Pro / CoType Foundry (cotypefoundry.com) — The geometric grotesque display face that anchors the premium, poised headline voice
- Inter typeface (rsms.me) — The neutral high-legibility workhorse for all body and UI text
- Swiss / International Typographic Style (wikipedia.org) — Grid discipline and type-led hierarchy where colour is accent, not structure
- Apple product pages (apple.com) — Dark-hero-into-light-content rhythm and luxurious whitespace around a single hero object
- Stripe (stripe.com) — Gradient-as-accent and the premium-minimal fintech marketing template
- Linear (linear.app) — Near-black grounds, restrained palette, and the gradient-bloom-behind-product convention
14. Do’s and Don’ts
Do:
- Build on the two-register system: near-black hero (
#191c1f) into white content (#ffffff) - Render the hero headline in Aeonik Pro at weight 500 — medium, poised, never heavy-700
- Use near-black
#191c1fas the structural brand colour; let it be ink on white and ground on dark - Keep accents (violet
#5f43ff→ blue#2868ff) as gradients behind imagery, never on body type - Fully-pill every CTA (radius 9999); invert fill by section (near-black on light, white on dark)
- Use 16–24px radius on cards — calm rectangular surfaces against round buttons
- Give the hero 120px of vertical air; let whitespace do the premium signalling
- Pair Aeonik Pro (display ≥24px) with Inter (UI ≤20px) and respect the handoff
- Use
tnumAeonik Pro for money figures so amounts read as brand voice, not terminal - Communicate elevation on dark via surface lightening, not invisible black shadows
Don’t:
- Don’t make the hero light/white — the dark hero is the brand’s loudest, most identifying gesture
- Don’t colour the headline with the gradient — colour stays in imagery and focus rings
- Don’t substitute the near-black ink with pure
#000000—#191c1fis warmer and intentional - Don’t set display type at weight 700 — that breaks the premium-calm posture
- Don’t pill the cards or square the buttons — the geometry contrast is the fingerprint
- Don’t crowd sections — Revolut shows one product clearly, not three crammed together
- Don’t recolour the CTA on dark — invert it to white-fill / near-black-label instead
- Don’t add a coloured drop-shadow — shadows are warm-black; the only glow is the focus ring
- Don’t use mono for money — balances are Aeonik Pro
tnum, not terminal mono - Don’t oversaturate — the brand’s discipline is monochrome structure plus one luminous accent
15. Agent Prompt Guide
Quick Color Reference
Brand / Ink: #191c1f (near-black — primary)
Canvas: #ffffff
Hero Ground: #191c1f
Deep Ground: #0e1013
Body: #3a3f44
Muted: #5f676e
Accent Violet: #5f43ff
Accent Blue: #2868ff
Accent Pink: #ff4d97
Border: #e2e4e6
On-Brand: #ffffffExample Component Prompts
-
“Create a Revolut hero: near-black
#191c1fbackground, full-bleed. A single white Aeonik Pro headline at 86px weight 500 with -0.03em tracking, reading ‘One app, all things money.’. Below, an 18px Inter body inrgba(255,255,255,0.72). A fully-pill CTA (radius 9999) at 48px height, white fill#ffffffwith near-black#191c1flabel at Inter weight 600, reading ‘Get the app’. Behind a phone mockup on the right, a slow-drifting violet→blue gradientlinear-gradient(135deg, #5f43ff, #2868ff).” -
“Design a Revolut feature card on a white section: bg
#ffffff, 1px#e2e4e6border, 16px radius, 24px padding. Title in Aeonik Pro 24px weight 600#191c1f. Body in Inter 16px#3a3f44line-height 1.55. A small accent-violet icon top-left. On hover, a soft warm-black shadowrgba(16,18,21,0.10) 0 4px 12pxblooms over 240ms.” -
“Build a Revolut premium showcase card: 24px radius, 32px padding, filled with a
linear-gradient(135deg, #5f43ff, #2868ff)warmed toward#ff4d97at one corner. White Aeonik Pro h2 (32px / 600) reading ‘Revolut Ultra’, white Inter body at 72% opacity, and a white-fill pill CTA with near-black label ‘Get Ultra’. Centre a metal-card render catching the violet light.” -
“Compose a Revolut comparison section: white background, a 3-up grid of plan cards (24px gap). Each card bg
#f7f7f8, 24px radius, no border, 32px padding. Plan name in Aeonik Pro 24px/600, price in Aeonik Pro 56px/500 withtnum, feature list in Inter 16px#3a3f44. The recommended plan gets an accent-softrgba(95,67,255,0.10)badge reading ‘Popular’ in#5f43ff.” -
“Design a Revolut top nav: 64px tall, white
#ffffffbackground with a#e2e4e6hairline. Logo left, centre nav links in Inter 15px/500#191c1f(underline-grow on hover), and right side a ghost ‘Log in’ (transparent,#c9cdd1border, pill) beside a near-black-fill pill ‘Get started’ with white label.” -
“Create a Revolut money input: muted
#eff0f1fill, 8px radius, 48px height, 1px#c9cdd1border. The amount renders in Aeonik Pro 56px weight 500 withtnum, near-black#191c1f. An inline currency-selector pill sits right, accent-violet#5f43ffwhen active. On focus, a 3pxrgba(95,67,255,0.55)violet ring with 2px offset.”
Iteration Guide
- Go dark in the hero: if your hero is white, you’re not Revolut. The identifying gesture is the near-black
#191c1fhero with a single white headline. - Drop the headline weight to 500: Aeonik Pro at medium, not bold. The premium calm depends on not shouting.
- Keep colour in imagery only: move every accent into gradients behind mockups and into focus rings. Body type and structure stay monochrome near-black/white.
- Pill the buttons, calm the cards: CTAs at radius 9999; cards at 16–24px. The geometry contrast is the fingerprint.
- Invert, don’t recolour, on dark: on the dark hero, the CTA becomes white-fill / near-black-label — same brand, flipped.
- Replace pure black with
#191c1f: the warm near-black is intentional; pure#000000reads colder and off-brand. - Add air: widen section padding to 96px+ and give the hero 120px. Whitespace is the luxury signal.
- Split the type by size: Aeonik Pro for display ≥24px, Inter for everything ≤20px, with
tnumon any money figure.
Drop revolut into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add revolut 2 · ship landing page
npx agentkit init --design revolut