{"id":"a3161c3c-26d4-425b-aaa3-4fc3f06b77ee","name":"Revolut","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","colors":[{"name":"Revolut Black","hex":"#191c1f","role":"Primary text, dark CTA backgrounds, footers, borders. Establishes a deep, serious foundation.","group":"neutral","cssVariable":"--color-revolut-black"},{"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","cssVariable":"--color-cloud-white"},{"name":"Pure White","hex":"#ffffff","role":"Primary page background, text on dark surfaces.","group":"neutral","cssVariable":"--color-pure-white"},{"name":"Onyx Black","hex":"#000000","role":"Text on light CTA buttons, some secondary CTA backgrounds.","group":"neutral","cssVariable":"--color-onyx-black"},{"name":"Slate Gray","hex":"#8d969","role":"Secondary body text, disabled states, helper text.","group":"neutral","cssVariable":"--color-slate-gray"},{"name":"Ash","hex":"#505a63","role":"Tertiary text, subtle UI elements.","group":"neutral","cssVariable":"--color-ash"},{"name":"Pebble","hex":"#c9c9cd","role":"Borders and dividers.","group":"neutral","cssVariable":"--color-pebble"},{"name":"Light-Tint","hex":"#ebebf0","role":"Subtle button backgrounds and hover states.","group":"neutral","cssVariable":"--color-light-tint"}],"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."}],"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."]}}