## 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/playground-by-google-labs/93d2afab-1def-4986-9178-dd9a071e412b-1791612309-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/playground-by-google-labs/93d2afab-1def-4986-9178-dd9a071e412b-1791612198337-full.webp
- Component on Kage: https://kage.design/component/playground-by-google-labs-hero

## Before you start
Ask what the user's product is, what action the hero should drive, and what visual language defines its brand. Apply the principles below to that product rather than copying the reference.

Create a full-viewport-width hero with a high-impact visual backdrop and a clear focal hierarchy. Place a readable headline over the visual, a one-line supporting promise below it, and one centered pill-shaped primary CTA. Use a strong display type treatment appropriate to the brand—possibly custom, pixelated, or expressive—but keep the supporting text simple and highly legible. Add a dark gradient or scrim where needed for contrast. Use a vivid sky-blue and deep navy palette as a starting point (approximately #48A9DF, #152C70, and white), but let the user's brand override it. Keep the CTA white or high-contrast, around 140px wide with a 999px radius, and provide hover, focus, and reduced-motion behavior. Preserve an intentional, cinematic crop across responsive sizes.

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