## 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/meetpaw/a0a465d2-81ef-4df0-b440-a946faf696c8-1792389687-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/meetpaw/a0a465d2-81ef-4df0-b440-a946faf696c8-1792389630481-full.webp
- Component on Kage: https://kage.design/component/meetpaw-hero

## Before you start
Ask what the user's product does, who the primary user is, what the main conversion action should be, and what brand colors they want. Then use these principles to design an original hero.

Create a centered hero beneath the navigation with generous white space and a compact product/category visual above the headline. Use a very large two-line headline with a dark first line and a softer gray or tinted second line to establish a clear visual rhythm. Set the headline around 52–64px on desktop with tight line-height around 0.95–1.05, reducing responsively on mobile. Add a concise two-line value proposition in muted gray, followed by a smaller reassurance line about setup, pricing, privacy, or compatibility.

Place two horizontally aligned actions below: a warm accent-filled primary button and a quiet white secondary button with a light border. Use approximate colors #111111, #777777, #f36b18, and #ffffff. Buttons should be 40–44px tall, 8–10px radius, bold enough to feel actionable, with clear hover and focus states. Add a small compatibility note beneath the actions in 11–12px muted text. Keep the hero vertically balanced, with the visual, headline, copy, actions, and note treated as one cohesive stack.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the exact headline structure or button labels.
- Never add decorative effects that compete with the primary action.