## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789141942-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mercury-com/99bed992-0157-4d82-b4d6-a0016ce1a166-1789138980717-full.webp
- Component on Kage: https://kage.design/component/mercury-feature-grid

## Before you start
Ask what the user's product, audience, and brand are, then apply the following principles to that product rather than copying the reference.

Build a split product-feature band on a deep navy background (#171721). Put a concise eyebrow or heading and 3–5 benefit rows in one column, separated by thin low-contrast rules (#343543), and place a layered dashboard mockup in the other column with a soft shadow and slight overlap beyond the content frame. Use a 30–40px heading, 14–16px body text, and tiny interface labels inside the mockup. Keep the copy column vertically centered against the visual. On narrow screens, place the mockup below the copy and allow horizontal overflow only inside the mockup frame.

Never: use logos, product names, copy, illustrations, or imagery from the reference.