## 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/resurf/ff64fde5-ed9d-4c90-b5a1-3641329afaa7-1789365706-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/resurf/ff64fde5-ed9d-4c90-b5a1-3641329afaa7-1789365667481-full.webp
- Component on Kage: https://kage.design/component/resurf-hero

## Before you start
Ask what the user's product is, what problem it solves, who the audience is, and which action matters most. Apply the following system to that product and its brand.

Create a spacious hero for a premium productivity-software landing page. Stack a small credibility badge or eyebrow, a large centered editorial serif headline, one or two lines of supporting copy, and two horizontally aligned actions with one dark primary button and one quiet secondary button. Add a small muted compatibility/support line beneath the actions. Place a large rounded application screenshot below the copy, centered within a max-width container; let it be the visual anchor without overpowering the headline. Use a warm off-white background (`#fafafa`), near-black text (`#171717`), muted gray copy (`#777777`), dark CTA (`#202020`), soft gray secondary button (`#f0f0f0`), and very subtle borders (`#e7e7e7`). Use a high-contrast serif display face around 48–64px with tight line-height and a neutral sans-serif for UI text. Use 24–32px gaps between groups, 72–112px top breathing room, 16–24px corner radius on the screenshot, and responsive scaling below 768px. Buttons should have clear hover contrast and a small lift or opacity transition.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the reference screenshot; create a product-specific preview or abstract UI mockup.
- Never add unnecessary hero claims or more than two competing actions.