## 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/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152083-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tryobra-com/5ed8a808-d125-4341-bc8a-0a69442cb995-1789152039794-full.webp
- Component on Kage: https://kage.design/component/tryobra-hero

## Before you start
Ask what the user's product is, what problem it solves, who the audience is, and what action should dominate the hero. Then adapt these rules to that product and brand.

Create a high-impact dark hero section with generous left alignment and a two-line display headline. Mix solid off-white lettering (#f4f3ec) with outlined lettering and a single orange emphasis (#ff5425); use a very heavy condensed sans-serif or grotesk for the headline and a tiny monospace supporting label. Place the explanatory copy below the headline, with primary and secondary buttons aligned nearby. Add a subtle technical/ticker strip along the bottom using 1px orange rules, tiny uppercase text, and restrained motion if appropriate. Use a 36–48px side gutter, 72–110px vertical padding, tight headline line-height around .86, and buttons with square corners or a 1–2px radius.

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