## 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/agentscore/bf3a39fb-f256-40cb-bcdd-3b9ee37cde16-1790229736-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/agentscore/bf3a39fb-f256-40cb-bcdd-3b9ee37cde16-1790229689528-full.webp
- Component on Kage: https://kage.design/component/agentscore-hero

## Before you start
Ask what the user's product does, what users should understand immediately, and which action is most important. Apply the principles below to that product rather than recreating the reference.

Create a tall centered hero for a technical product. Begin with a small pill-shaped eyebrow, then a very large two-line headline, a concise explanation, two adjacent CTAs, and a quiet supporting link. Below the text, place a large rounded product UI preview with a thin light border and restrained shadow; the preview should visually demonstrate the product's value rather than be decorative. Use a near-black top background (#050505) that transitions into deep navy and electric blue near the lower visual area (#071b32 to #0874d1), with a soft glow behind the preview. Constrain text to roughly 620px and the dashboard to about 800px, centered within a 50px horizontal gutter. Use bold white 52–58px headline type, 15px supporting copy in #c5cbd3, 14px buttons, 10–12px interface text, 16px rounded corners, and generous vertical spacing. Make the primary button white with black text and the secondary button translucent blue-gray with a border. On mobile, reduce headline size, stack actions, and crop or scale the preview without losing its key signal.

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