Kage Design logo kage
resend.com
resend.com code block component

Design analysis

A framework-oriented feature uses a centered title, supporting copy, paired CTAs, and a large code/editor preview to make the developer path tangible.

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-1789141643-7.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-code-block

## 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.

Build a framework integration section with a centered abstract accent, headline, supporting copy, and two actions. Below the copy, show a wide dark IDE-style preview: a top window bar, narrow file rail, syntax-highlighted source pane, and a rendered email/result pane. Use #050505 surroundings, #090a0b editor chrome, #202224 borders, small monospace text, 14px radius, and a restrained blue/green accent only for syntax and the primary button. Keep the preview readable at desktop width and horizontally scrollable or vertically stacked on mobile. Include a clear focus style for the CTAs and tabs if interactive.

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

More components