# Mercury homepage design spec (free) - Site: mercury.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Mercury. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Mercury's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Full-bleed photographic hero Evidence provenance: desktop capture, 1440×900 at scrollY 0, and phone capture, 390×844 at scrollY 0. Coordinates below are viewport-relative. Measurements come from the supplied pixels and extracted element bounds; unmeasured details are not specified. CRAFT ARCHETYPE: photo-led ## The big idea Make a full-bleed landscape photograph the hero’s dominant surface, with a compact centered message and actions in the upper portion and the scene’s focal workspace lower down. Keep the image legible behind light text without obscuring its broad landscape-to-foreground composition. The announcement and navigation share the upper screen; they are not a separate hero band. ## Layers At desktop, the image element fills 1440×900 and uses cover. The headline bounds are x=384, y=144, w=672, h=54; supporting text is x=410, y=212, w=619, h=53. The two 40px-high actions start at x=702 and x=859, y=311, and measure 145×40 and 141×40. A compact email-entry control is visible in the desktop pixels, but its measured bounds are unavailable: do not prescribe its exact size or behavior. A small legal notice sits near the bottom, measured x=257, y=840, w=926, h=17. Keep it distinct from the main action group. ## Type Use a display face for the desktop headline at 49.35px/54.28px, weight 480; supporting text is 21.01px/28.36px, weight 360. Set both in pale text. The phone headline is 28px/30.8px; supporting text is 16px/21.6px. ## Colour The observed text is RGB 237,237,243. The primary action is RGB 82,102,235 with white text and a 32px radius; the translucent secondary action has a 40px radius. Let the photograph provide the variable background palette. ## States and motion The observed action transition is 0.3s. Image motion and hover results are unknown. ## Phone at 390px The announcement occupies y=0–63; the 390×844 cover-cropped hero begins at y=0 behind the header. Brand bounds are x=24, y=83, 139×32; menu control x=345, y=87, 21×24. Inline desktop links are hidden. Headline is x=24, y=128, 342×31; supporting text x=35, y=172, 320×41. Email entry moves below at x=24, y=246, 342×40. Actions move to one row at y=298: each is 167×40 with an 8px gap. The crop enlarges the foreground desk and chair, visible from about y=493; the legal notice is x=36, y=766, 318×42. Do not carry desktop crop or form placement across. ## Do NOT copy or add Do not reuse source wording, identity, image, legal claims, or unsupported form behavior. Do not invent a carousel or video. ## Checks you can run At 1440×900 verify image coverage, headline bounds, 40px action heights, and bottom notice placement. At 390×844 verify the 63px announcement, 24px brand inset, 342px headline and field widths, paired actions, and foreground crop. --- # Responsive overlaid navigation Evidence provenance: desktop capture, 1440×900 at scrollY 0 and 900; phone capture, 390×844 at scrollY 0. Coordinates are viewport-relative. Desktop link-group and control bounds come from extracted element measurements; mobile menu-panel bounds describe its reported offscreen position, not a visible open state. CRAFT ARCHETYPE: type-led ## The big idea Arrange desktop navigation as a transparent horizontal overlay on the hero: identity at left, a spacious link group near the center, and account actions at right. On scroll, the observed bar becomes a solid dark band. At phone width, retain the brand and a menu affordance while removing inline desktop links from view. The evidence does not establish a visible expanded-menu composition or exact open/close trigger. ## Layers The desktop bar spans 1440px and is 72px high, with 16px 32px padding. At scrollY 0 it begins at y=49, below the announcement; its brand link is x=32, y=69, 139×32. At scrollY 900 the bar is y=0–72 and the brand is x=32, y=20, 139×32. Four central buttons occupy x=414–927, each 40px high, with individual widths 125, 127, 135, and 103px; a separate 90×40 link follows. Right-side actions begin at x=1168 and x=1264; the latter is 145×40. The phone brand is x=24, y=83, 139×32; menu control x=345, y=87, 21×24. The reported mobile navigation panel begins at x=390, y=63 and is 390×844, so it is outside the visible viewport in this capture. ## Type Use a sans face, 16px desktop navigation text, weight 420, with pale RGB 237,237,243. Buttons use 40px pill radii and 20px horizontal padding. Preserve the measured spacing rather than compressing the center group. ## Colour Initial desktop bar background is transparent. At scrollY 900 it is RGB 23,23,33. The rightmost action is RGB 82,102,235 with white text and a 32px radius. Mobile panel background reports RGB 39,39,53, but its visible open state is unobserved. ## States and motion Bar color/background transition is 0.5s. Desktop navigation controls report 0.3s transitions; phone controls 0.15s. Panel transform transition is 0.3s. Hover appearance and trigger threshold are unknown. ## Do NOT copy or add Do not reproduce source identity, labels, announcement wording, or menu contents. Do not invent dropdowns or open-state visuals. ## Checks you can run At 1440px verify 72px height, 32px outer inset, 40px controls, transparent top state, and dark scrolled state. At 390px verify the brand and menu bounds and that inline desktop links are absent. Test keyboard access without prescribing unobserved styling. --- # Editorial product-feature panel Evidence provenance: desktop captures labelled below-1800 and below-2700, both 1440×900 at scrollY 949. These show a distinct feature section below the hero; the second frame shows different product-interface content and a different vertical composition. Measurements below use the below-1800 frame unless noted. Do not treat the different frames as proof of a particular interaction or animation. CRAFT ARCHETYPE: product-UI-led ## The big idea Pair a narrow explanatory column and stacked feature selectors with a large, dark product-interface image on the right. The visual weight is deliberately asymmetric: the text begins well inside the left margin, while the interface extends beyond the viewport’s right edge. Preserve the near-black field, fine separators, generous surrounding negative space, and visible crop. This is a signature editorial/product panel, not a footer or repeated hero. ## Layers In the below-1800 frame, the heading begins at x=152, y=229 and measures 334×58; the divider runs approximately x=108–438 near y=275. The feature controls occupy x=120–616 and are 35px high. The first begins at y=350; later rows begin at y=484, 531, and 577. Supporting descriptions begin at x=152 and measure 432px wide; the first is 67px tall. A text link sits at x=152, y=650. The product image element is reported at x=551, y=0, 1440×900 with cover, so its visible surface is cropped by the viewport; do not force it into a contained card. The below-2700 frame shifts heading to y=265 and the first selector to y=386, confirming that screen coordinates differ between captures. ## Type Use a display heading at 24px/28.8px, weight 480, letter spacing 0.48px. Feature labels are 16px/21.6px, weight 480; supporting text is 16px/22.4px, regular. Main text is pale RGB 237,237,243; secondary text is muted RGB 195,195,204. ## Colour Use a near-black field around RGB 23,23,33 with subtly differentiated dark interface surfaces and fine gray rules. Exact image colors and gradients are not established as reusable values. ## States and motion Feature controls report 0.15s color/background transitions. The captures differ, but do not establish user-triggered switching, timing, or hover behavior; label these unknown. ## Do NOT copy or add Do not reuse source interface text, branding, account details, balances, claims, or imagery. Do not fabricate product data or assert an interaction from differing captures. ## Checks you can run At 1440×900 confirm the left content begins around x=108–152, the visual begins near x=551, and the image remains partially cropped. Check 24px heading, 16px body, 35px selector heights, horizontal rules, and asymmetric layout. Ensure all interface content is original and non-sensitive.