{"id":"a3161c3c-26d4-425b-aaa3-4fc3f06b77ee","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/a3161c3c-26d4-425b-aaa3-4fc3f06b77ee","originalSiteUrl":"https://revolut.com","capturedAt":"2026-04-11T17:44:47.958Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Revolut","summary":"financial passport to the world","description":"The design feels like viewing an epic, cinematic world through the clean, clear interface of a premium device. Full-bleed, aspirational photography in hero sections sets a global, adventurous tone, suggesting the life the product enables. This cinematic feel is grounded by an incredibly strict, almost entirely achromatic color palette, where stark white content blocks sit against pure black or photo backgrounds. The display font, Aeonik Pro, is used with tight negative letter-spacing, giving headlines a precise, architectural quality. This tension between expansive human imagery and minimalist, geometric typography defines the system's identity: aspirational but controlled, powerful but simple.","tags":["cinematic","monochrome","aspirational","geometric","minimalist","tech-forward","high-contrast"],"industry":"fintech","colorScheme":"light","colors":[{"name":"Revolut Black","hex":"#191c1f","role":"Primary text, dark CTA backgrounds, footers, borders. Establishes a deep, serious foundation.","group":"neutral"},{"name":"Cloud White","hex":"#f4f4f4","role":"Primary light CTA backgrounds, some page sections. A soft off-white that feels less stark than pure white.","group":"neutral"},{"name":"Pure White","hex":"#ffffff","role":"Primary page background, text on dark surfaces.","group":"neutral"},{"name":"Onyx Black","hex":"#000000","role":"Text on light CTA buttons, some secondary CTA backgrounds.","group":"neutral"},{"name":"Slate Gray","hex":"#8d969","role":"Secondary body text, disabled states, helper text.","group":"neutral"},{"name":"Ash","hex":"#505a63","role":"Tertiary text, subtle UI elements.","group":"neutral"},{"name":"Pebble","hex":"#c9c9cd","role":"Borders and dividers.","group":"neutral"},{"name":"Light-Tint","hex":"#ebebf0","role":"Subtle button backgrounds and hover states.","group":"neutral"}],"typography":[{"role":"All major headings (H1-H4) and display text. Its slightly condensed and geometric form creates a modern, architectural feel. The signature use of tight negative letter-spacing at large sizes is critical to its identity.","sizes":"16px, 18px, 24px, 32px, 40px, 53px, 89px","family":"Aeonik Pro","weight":"400, 500","lineHeight":"1.00, 1.17, 1.19, 1.20, 1.33, 1.38","substitute":"Sohne, Neue Haas Grotesk","letterSpacing":"-2.05px at 89px, -0.58px at 53px, normal at smaller sizes"},{"role":"Body copy, button text, labels, captions, and legal text. A neutral, highly-legible workhorse font that recedes to let headings and imagery stand out.","sizes":"12px, 14px, 16px","family":"Inter","weight":"400, 600, 700","lineHeight":"1.20, 1.50, 1.57","substitute":"Inter, San Francisco, Roboto","letterSpacing":"Slightly negative for bold weights, slightly positive for regular weights."}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5},{"role":"body-sm","size":14,"lineHeight":1.57,"letterSpacing":-0.07},{"role":"body","size":16,"lineHeight":1.5},{"role":"subheading","size":18,"lineHeight":1.33,"letterSpacing":-0.18},{"role":"heading-sm","size":24,"lineHeight":1.2,"letterSpacing":-0.24},{"role":"heading","size":32,"lineHeight":1.19},{"role":"heading-lg","size":40,"lineHeight":1.2},{"role":"display","size":53,"lineHeight":1.17,"letterSpacing":-1.22},{"role":"display-xl","size":89,"lineHeight":1,"letterSpacing":-2.05}],"spacing":{"radius":{"cards":"20px","inputs":"12px","buttons":"9999px","ui-mockups":"22.5px"},"elementGap":"","sectionGap":"96px","cardPadding":"24px","pageMaxWidth":"1200px"},"radius":{"cards":"20px","inputs":"12px","buttons":"9999px","ui-mockups":"22.5px"},"shadows":{"philosophy":"The design is intentionally flat, avoiding box-shadows entirely. Depth and hierarchy are created through color (light on dark), scale (large typography), and layout (generous spacing), not simulated elevation. This reinforces the clean, graphic, and modern aesthetic."},"guidelines":{"do":["Use Aeonik Pro with significant negative letter-spacing for all display and headline text.","Restrict the palette almost exclusively to white (#ffffff), off-white (#f4f4f4), black (#000000), and near-black (#191c1f).","Employ full-bleed, cinematic photography for all hero sections.","Always use 9999px radius pill-shaped buttons for primary and secondary actions.","Center-align all headline and sub-headline text blocks within their sections.","Juxtapose full-bleed photo sections with stark, solid #ffffff background sections.","Maintain generous vertical whitespace (96px+) between major page sections."],"dont":["Do not introduce any saturated brand or accent colors. The photos provide the only color.","Do not use box-shadows for elevation. The design is intentionally flat.","Do not use traditional, sharp-cornered (e.g., 4px-8px radius) buttons.","Do not use system fonts like Arial or Helvetica for headlines; it will break the brand identity.","Do not left-align hero content. The centered stack is a core pattern.","Do not use complex card layouts. Keep content blocks simple and direct.","Do not make content containers full-width; use the 1200px max-width for readability."]},"components":[{"name":"Button Group — Primary Dark, Primary Light, Ghost","role":""},{"name":"Social Proof — Stats & Awards Block","role":""},{"name":"Savings Feature Card — Interest Rate CTA","role":""},{"name":"Primary CTA Button (Light)","role":"The main sign-up and affirmative action button."},{"name":"Primary CTA Button (Dark)","role":"The main action button for use on dark or photographic backgrounds."},{"name":"Ghost Button (On Dark)","role":"Secondary action on dark or photographic backgrounds, like 'Explore'."},{"name":"Navigation Link Button","role":"Top-level navigation items in the header."},{"name":"Language Selector Button","role":"Small utility button for selecting country/region."},{"name":"App UI Frame","role":"A container that visually represents the mobile app screen."},{"name":"Award Logo Card","role":"Container for displaying third-party award and partner logos."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n\n*   **Page Background:** `#ffffff` (Pure White)\n*   **Text (Primary):** `#191c1f` (Revolut Black)\n*   **Text (Secondary):** `#8d969e` (Slate Gray)\n*   **Text (On Dark):** `#ffffff` (Pure White)\n*   **Primary CTA (Light BG):** `#f4f4f4` background, `#000000` text\n*   **Primary CTA (Dark BG):** `#000000` background, `#ffffff` text\n\n### Example Component Prompts\n\n1.  **Hero Section:** \"Create a full-bleed hero section with a cinematic photo of a person on a mountain at sunrise as the background. Add a semi-transparent black overlay. Center-align the text. The main headline 'Banking & Beyond' uses Aeonik Pro, 89px, #ffffff, with -2.05px letter-spacing and 1.0 line height. The sub-headline below it says 'This is your bank, redefined...' and uses Inter, 18px, #ffffff, 400 weight. Below that, add a dark primary CTA button.\"\n\n2.  **Light Primary Button:** \"Create a button with the text 'Sign up'. It must be a pill shape with 9999px border-radius. The background is #f4f4f4, and the text color is #000000. Use Inter font at 16px, 600 weight. Padding is 10px top/bottom and 24px left/right.\"\n\n3.  **Content Section:** \"Create a content section with a #ffffff background. The section has a max-width of 1200px and is centered. Add a headline 'Join 70+ million customers' using Aeonik Pro, 53px, #191c1f, with -1.22px letter-spacing. The layout below is a 5-column grid for logos.\""}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775929429031-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775929429031-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a3161c3c-26d4-425b-aaa3-4fc3f06b77ee-1777555620982-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a3161c3c-26d4-425b-aaa3-4fc3f06b77ee-1777555620982-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a3161c3c-26d4-425b-aaa3-4fc3f06b77ee-1777555620982-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a3161c3c-26d4-425b-aaa3-4fc3f06b77ee-1777555620982-preview-detail-poster.jpg"},"similarStyleIds":["c25e8eb5-634d-4aca-b30b-d8ba5a50dc5a","48ba2283-13b5-423a-8742-390ea4e53c36","367c0c6e-73a7-441c-a8ff-91d139ac60dc","2c05cf8d-97c5-4f35-96ef-eb53fc03ea81","d703d9f7-4821-468e-8fe4-c8b5790b00ed","f1a2100a-7cda-4787-b8af-5c5edcfcdff0","e8a1d114-6924-4f03-acd2-996dd30f15a6","c60f05ff-2420-4a24-92db-80c4b6a74683","a0cb71ee-c2f2-4c37-a527-9e8ff0a0b312","e9f07a27-bdd4-4f6a-8132-329d014aa5f4","1f32d914-6fdd-4692-b4fc-fcee2c414766","29392960-0acf-4891-ad33-28a72f6a9b75","8d3dc65e-4443-4bb3-b1a9-b0fc98381db9","14389660-81ff-4ca0-957f-b0dcc8fbe120","680cf16b-0093-473b-854f-f1de9af5e698","964b9215-396b-492c-abec-7bd778d7b1c9","84b951e2-eaae-4f56-8f3f-d90407517a56","7ce6bd42-e498-47c0-ad02-7b3a0f5d94e0","76b0c23b-7a09-49f6-a53c-cc6fc6258d5f","a9dd8050-c03a-4901-b7fa-a9cc0ca54812"],"exports":{"designMdUrl":"/references/refero/a3161c3c-26d4-425b-aaa3-4fc3f06b77ee/design.md","tokensJsonUrl":"/references/refero/a3161c3c-26d4-425b-aaa3-4fc3f06b77ee/tokens.json","tailwindV4Url":"/references/refero/a3161c3c-26d4-425b-aaa3-4fc3f06b77ee/tailwind-v4.css","cssVariablesUrl":"/references/refero/a3161c3c-26d4-425b-aaa3-4fc3f06b77ee/tailwind-v4.css"}}