## 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/pine-computer/b47ce26e-68eb-4b09-b29e-15beff007c2f-1791612327-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pine-computer/b47ce26e-68eb-4b09-b29e-15beff007c2f-1791612242987-full.webp
- Component on Kage: https://kage.design/component/pine-computer-hero

## Before you start
Ask the user what their product does, its audience, and the desired brand voice. Then adapt this typographic strategy to their product instead of copying the reference.

Create a spacious landing-page hero beneath the navigation. Use a very large, heavy, condensed-looking sans-serif headline arranged over several lines and centred horizontally. Make the statement communicate a strong product belief; use one muted or struck-through phrase to show a shift in thinking, and highlight the key outcome in a vivid mint-green rectangular label. Add one concise supporting sentence below, then a dark filled primary button and an underlined secondary text link with an arrow. Preserve a large quiet area below the actions so the hero feels editorial and confident.

Use a pale grey-green background #DDE2DC, near-black #07110D typography, and mint #16E7A7 for emphasis. Keep headline line-height tight (around .82–.9), supporting text small and calm, buttons nearly square with 1px borders and tiny corner radii. Use responsive type scaling so the headline remains dominant without overflowing.

Never:
- use the reference headline, product name, or wording
- reuse the reference crossed-out phrase or exact composition
- use logos, copied illustrations, or reference imagery
- turn the hero into a generic rounded SaaS card