Kage Design logo kage
resend.com
resend.com hero component

Design analysis

The hero uses an oversized editorial headline, short supporting copy, two clear actions, and a nearly black atmospheric background to establish a developer-first position.

Prompt preview
## 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/resend-com/a5fe426a-0829-45e6-9969-dd938a799528-1789141640-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/resend-com/a5fe426a-0829-45e6-9969-dd938a799528-1789137406155-full.webp
- Component on Kage: https://kage.design/component/resend-hero

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Apply the following principles to that product rather than reproducing the reference.

Create a dark, spacious hero directly below navigation. Align content to a centered max-width column or slightly offset editorial grid, with an optional small announcement pill above the headline. Use a large high-contrast display heading around 56–72px with tight line-height, a restrained sans/serif contrast if appropriate to the brand, muted supporting copy at 15–17px, and a primary plus secondary CTA. Use #050505 or #080808 as the base, white text, gray copy (#9a9a9a), and a barely visible radial/diagonal glow rather than a busy illustration. Reserve generous vertical whitespace and make the first CTA immediately scannable. Stack actions and reduce type scale on mobile.

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

More components