{"id":"3172cd4d-118a-4a16-a259-6b634d32322e","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/3172cd4d-118a-4a16-a259-6b634d32322e","originalSiteUrl":"https://mercury.com","capturedAt":"2026-04-11T17:45:14.206Z","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":"Mercury","summary":"Mountain Top Command Center","description":"The design feels like a command center at twilight, expansive and focused. A deep, near-black neutral palette (#1e1e2a, #171721) creates an immersive, cinematic canvas where glowing off-white text (#ededf3) provides crisp clarity. All energy is channeled into a single, vibrant violet-blue accent (#5266eb) reserved strictly for primary calls-to-action, like indicator lights on a high-tech console. The typography is a defining feature, with custom fonts used at light weights for headlines, creating an authoritative yet approachable voice. The contrast between spacious, atmospheric hero imagery and the stark, text-driven UI below creates a journey from aspiration to action.","tags":["dark-mode","fintech","spacious","single-accent","atmospheric","custom-typography","minimalist","professional"],"industry":"fintech","colorScheme":"dark","colors":[{"name":"Mercury Blue","hex":"#5266eb","role":"Primary CTA buttons — the single, vivid accent in a muted palette, focusing user action.","group":"brand"},{"name":"Ghost Blue","hex":"#cdddff","role":"Secondary button backgrounds, hover states — a desaturated, ethereal blue suggesting interaction.","group":"accent"},{"name":"Deep Space","hex":"#171721","role":"Outermost page background layer, providing depth.","group":"neutral"},{"name":"Midnight Slate","hex":"#1e1e2a","role":"Primary page and section backgrounds.","group":"neutral"},{"name":"Graphite","hex":"#272735","role":"Subtle button backgrounds and interactive surfaces.","group":"neutral"},{"name":"Lead","hex":"#70707d","role":"Borders, dividers, subtle UI accents.","group":"neutral"},{"name":"Starlight","hex":"#ededf3","role":"Primary text color for headlines, body, and navigation.","group":"neutral"},{"name":"Silver","hex":"#c3c3cc","role":"Secondary text, footer copy, disabled states.","group":"neutral"},{"name":"Pure White","hex":"#ffffff","role":"Text on primary CTA buttons (#5266eb).","group":"neutral"}],"typography":[{"role":"All major headlines. Use of the light 360 weight at large sizes is a signature choice creating authority through restraint, not volume.","sizes":"21px, 24px, 28px, 32px, 42px, 49px, 65px","family":"arcadiaDisplay","weight":"360, 480, 530","lineHeight":"1.10-1.20","substitute":"Inter, Manrope","letterSpacing":"Subtle positive tracking (0.01-0.02em) for an open feel.","fontFeatureSettings":"\"ss01\" on"},{"role":"Body copy, UI labels, navigation, legal text, and smaller headings. The workhorse font for all content and interface text.","sizes":"12px, 14px, 16px, 18px, 21px","family":"arcadia","weight":"360, 400, 420, 480","lineHeight":"1.20-1.50","substitute":"Inter, Manrope","letterSpacing":"Subtle positive tracking (0.005-0.02em) for readability.","fontFeatureSettings":"\"ss01\" on"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5,"letterSpacing":0.24},{"role":"body-sm","size":14,"lineHeight":1.5,"letterSpacing":0.28},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":0.16},{"role":"subheading","size":18,"lineHeight":1.4},{"role":"heading-sm","size":21,"lineHeight":1.35},{"role":"heading","size":32,"lineHeight":1.2},{"role":"heading-lg","size":49,"lineHeight":1.15},{"role":"display","size":65,"lineHeight":1.1,"letterSpacing":0.65}],"spacing":{"radius":{"cards":"0px","inputs":"32px","buttons":"32px, 40px","containers":"4px"},"elementGap":"12-32px","sectionGap":"80-120px","cardPadding":"","pageMaxWidth":"1200px"},"radius":{"cards":"0px","inputs":"32px","buttons":"32px, 40px","containers":"4px"},"shadows":{"philosophy":"Elevation is achieved through light and color, not shadow. Interactive elements brighten or adopt the brand accent color on hover or focus, appearing to 'light up' from within the dark interface. Layered surfaces are differentiated by subtle shifts in the neutral gray palette (e.g., Midnight Slate #1e1e2a on Deep Space #171721).","surfaces":[{"hex":"#171721","name":"Abyss","level":0,"purpose":"Outermost page background layer."},{"hex":"#1e1e2a","name":"Surface","level":1,"purpose":"Main content section background."},{"hex":"#272735","name":"Interactive","level":2,"purpose":"Hover states or contained interactive elements."}]},"guidelines":{"do":["Use 'arcadiaDisplay' at a light weight (360) for all major headlines to maintain an airy, sophisticated tone.","Reserve the 'Mercury Blue' (#5266eb) accent exclusively for primary, action-oriented CTAs.","Employ the deep neutral palette (#171721, #1e1e2a) for all backgrounds to create a focused, immersive environment.","Utilize extreme corner radii (32px, 40px) for all primary and secondary buttons, creating a signature 'pill' shape.","Maintain high contrast with 'Starlight' (#ededf3) text on dark backgrounds for all primary content.","Use generous vertical spacing (80px+) between content sections.","Differentiate interactive list items with a simple 1px bottom border in 'Lead' (#70707d)."],"dont":["Don't use 'Mercury Blue' (#5266eb) for text, backgrounds, or decorative elements.","Don't use heavy font weights (>530) for any typography.","Don't apply shadows for elevation. Use color and opacity shifts instead.","Don't introduce new saturated colors. The palette is monochrome plus one blue accent.","Don't use small corner radii on buttons. They should always be pills.","Don't use 'Pure White' (#ffffff) for body text; reserve it for text on the primary blue CTA.","Don't create dense, cluttered layouts. Prioritize breathing room."]},"components":[{"name":"Hero Email CTA","role":""},{"name":"Feature List — Everything in one place","role":""},{"name":"Button Group — Primary + Secondary + Ghost","role":""},{"name":"Primary Pill Button","role":"The main call-to-action on the page."},{"name":"Header Pill Button","role":"The secondary call-to-action in the navigation bar."},{"name":"Ghost Nav Link","role":"Navigation items and non-primary links in the header."},{"name":"Hero Email Input","role":"The email capture field in the hero section."},{"name":"Interactive Feature Link","role":"Selectable items in a feature list."},{"name":"Footer Link","role":"Tertiary links in the page footer."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- **Page Background:** Midnight Slate (#1e1e2a)\n- **Primary Text:** Starlight (#ededf3)\n- **Secondary Text:** Silver (#c3c3cc)\n- **Primary CTA:** Mercury Blue (#5266eb)\n- **Border/Divider:** Lead (#70707d)\n\n### Example Component Prompts\n1. `Create a hero section with a full-bleed atmospheric mountain photo background. Center a display headline: 65px arcadiaDisplay weight 360, color Starlight (#ededf3). Below it, add a sub-headline: 21px arcadia weight 400, color Starlight. Finally, add a CTA button group: an email input with a 32px left radius joined to a primary pill button with a 32px radius.`\n\n2. `Build a primary action button with the text 'Open account'. The button should have a 'Mercury Blue' (#5266eb) background, 'Pure White' (#ffffff) text, a 32px corner radius, and 16px 24px padding. Font is 16px arcadia weight 480.`\n\n3. `Design a feature list section on a 'Midnight Slate' (#1e1e2a) background. Each item is a link with heading text at 28px arcadiaDisplay weight 480 in 'Starlight' (#ededf3), with a 1px solid bottom border in 'Lead' (#70707d) with 24px of bottom padding.`"}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775929449693-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775929449693-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3172cd4d-118a-4a16-a259-6b634d32322e-1777556598107-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3172cd4d-118a-4a16-a259-6b634d32322e-1777556598107-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3172cd4d-118a-4a16-a259-6b634d32322e-1777556598107-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3172cd4d-118a-4a16-a259-6b634d32322e-1777556598107-preview-detail-poster.jpg"},"similarStyleIds":["62e8e59e-17a5-4eba-a6c6-1c7f67ded518","7b083729-e694-4b66-82a3-befb08451722","4d4772a3-e1da-415f-a6d7-658dcefdcecd","8d3dc65e-4443-4bb3-b1a9-b0fc98381db9","c81d2be0-05b7-4755-8046-f2d19fbc448c","c3ceca5c-d329-4559-b947-016172941ba2","e81d4724-9615-4159-8678-cef35f986cab","3f2b79c1-d980-4380-a903-29856975fc37","4ce66adb-ed8b-4e71-8066-15d92c4d2be0","7f70ee10-123b-43cc-bd04-498cfc5b5ac0","91b110da-902b-4d09-8bf0-26bd1f25f8b2","a76ec6ba-20b3-495c-9d89-1e58281e79e7","21cfe0c1-778d-4613-9f47-a5718eb929b3","65b30976-3663-40b2-8751-7a360ba74539","834ce97f-61f2-4b12-bf5c-e9fad2544456","350b1557-56f0-4361-8c8b-b7a88081982b","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","733e6475-892a-4138-8835-bf40344df317","b38702a0-75ab-474c-9106-00b624535825","964b9215-396b-492c-abec-7bd778d7b1c9"],"exports":{"designMdUrl":"/references/refero/3172cd4d-118a-4a16-a259-6b634d32322e/design.md","tokensJsonUrl":"/references/refero/3172cd4d-118a-4a16-a259-6b634d32322e/tokens.json","tailwindV4Url":"/references/refero/3172cd4d-118a-4a16-a259-6b634d32322e/tailwind-v4.css","cssVariablesUrl":"/references/refero/3172cd4d-118a-4a16-a259-6b634d32322e/tailwind-v4.css"}}