## 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/quiethint-r/a06c27ca-94cd-4cb7-8750-fd2be8cedd1f-1789711423-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/quiethint-r/a06c27ca-94cd-4cb7-8750-fd2be8cedd1f-1789711327026-full.webp
- Component on Kage: https://kage.design/component/quiethint-r-hero

## Before you start
Ask me what my product does, who the ideal customer is, and what brand tone I want. Apply the following design principles to my product and write original copy and visuals.

Create a spacious two-column hero on a white or very pale gray background. Align everything to a narrow centered rail, with a large left-side headline and a compact right-side explanation plus primary and secondary actions. Use a bold, clean sans-serif headline with three short lines and one highlighted phrase in orange #ed5b16; use black #171817 for the main type. Add a thin technical divider and a low-contrast compatibility strip beneath the hero, showing abstract category labels or neutral interface symbols rather than brand logos. Use a tiny mono metadata label above the headline and generous whitespace around the content. Buttons should be black with white uppercase condensed text, rectangular corners, and a small square marker; secondary actions should be text with an underline or hairline rule. Keep the hero visual-free or use a very subtle paper/grid texture so the message remains dominant. Ensure mobile behavior stacks the copy and actions cleanly.

Never use the reference's logos, product names, copy, illustrations, imagery, or recognizable partner marks.