{"id":"3172cd4d-118a-4a16-a259-6b634d32322e","name":"Mercury","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","colors":[{"name":"Mercury Blue","hex":"#5266eb","role":"Primary CTA buttons — the single, vivid accent in a muted palette, focusing user action.","group":"brand","cssVariable":"--color-mercury-blue"},{"name":"Ghost Blue","hex":"#cdddff","role":"Secondary button backgrounds, hover states — a desaturated, ethereal blue suggesting interaction.","group":"accent","cssVariable":"--color-ghost-blue"},{"name":"Deep Space","hex":"#171721","role":"Outermost page background layer, providing depth.","group":"neutral","cssVariable":"--color-deep-space"},{"name":"Midnight Slate","hex":"#1e1e2a","role":"Primary page and section backgrounds.","group":"neutral","cssVariable":"--color-midnight-slate"},{"name":"Graphite","hex":"#272735","role":"Subtle button backgrounds and interactive surfaces.","group":"neutral","cssVariable":"--color-graphite"},{"name":"Lead","hex":"#70707d","role":"Borders, dividers, subtle UI accents.","group":"neutral","cssVariable":"--color-lead"},{"name":"Starlight","hex":"#ededf3","role":"Primary text color for headlines, body, and navigation.","group":"neutral","cssVariable":"--color-starlight"},{"name":"Silver","hex":"#c3c3cc","role":"Secondary text, footer copy, disabled states.","group":"neutral","cssVariable":"--color-silver"},{"name":"Pure White","hex":"#ffffff","role":"Text on primary CTA buttons (#5266eb).","group":"neutral","cssVariable":"--color-pure-white"}],"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"}],"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."]}}