## 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/codeaf/74fffb9e-aea6-4193-af2d-c8a5b19c270c-1791007527-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/codeaf/74fffb9e-aea6-4193-af2d-c8a5b19c270c-1791007420738-full.webp
- Component on Kage: https://kage.design/component/codeaf-hero

## Before you start
Ask what the user's product does, who it serves, and what brand voice and proof points should lead the page. Apply the following structure to that product, not the reference content.

Create a spacious dark hero directly below the navigation. Use a two-column layout inside a centered max-width container: the left column contains a large two-line headline, a short supporting sentence, an install command field with copy affordance, one documentation link, and small trust metadata; the right column contains a compact highlighted prompt/label and three stacked quantitative proof statements. Keep the visual hierarchy calm and editorial rather than marketing-heavy.

Design language: background #08090a; headline #e1e3e0 at roughly 30–34px with tight line-height; supporting text #777b7d at 12–14px; monospace command text #a7aaa7 at 11–12px. Use hairline borders #30312d, a muted olive/amber accent #b99643, and near-black inset surfaces #0d0f10. Use 8–12px corner radii only for controls, with mostly square panels. Provide a compact copy button, subtle hover state, and responsive stacking below tablet width. Leave broad whitespace around the content and align both columns to the same top rhythm.

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