## 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/framefields/70450159-6614-49a5-a5e2-7c6c30c81571-1792476187-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/framefields/70450159-6614-49a5-a5e2-7c6c30c81571-1792476110643-full.webp
- Component on Kage: https://kage.design/component/framefields-hero

## Before you start
Ask what the user's product does, who the target developer is, and what brand style and primary action they want. Apply the principles below to that product rather than copying the reference.

Create a two-column hero on a pale cool-gray canvas around `#eef1ef`. Use a very large, tightly set, black sans-serif headline with an assertive editorial rhythm; constrain it to the left side and let it occupy multiple lines. Place one short paragraph below in dark gray (`#424542`) with a comfortable readable measure. Under it, provide two stacked install-command rows: bordered white or near-white command fields, monospace command text, small contextual labels, and a black rectangular Copy button on the right. Make copy actions visibly interactive with hover, focus, and copied feedback.

Align a large bordered media panel on the right, using a restrained monochrome or product-specific visual treatment rather than stock imagery. Keep the hero generous vertically, with a clear baseline between text and media, and collapse to one column on smaller screens. Use minimal radius (0–4px), thin black borders, and spacing driven by a 16px grid.

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