Kage Design logo kage
resend.com
resend.com feature grid component

Design analysis

The section introduces capabilities beyond editing through two visual cards followed by a two-column explanation row with compact feature details.

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-1789141642-6.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-feature-grid-4

## 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 feature section titled around extending the core workflow. Use a two-column row of tall bordered visual cards first, then a matching two-column row of compact feature descriptions with small line icons, short titles, body text, and learn-more links. Keep the visuals intentionally understated with empty dark preview areas, subtle border gradients, and no decorative clutter. Use 1px #222 borders, 14px radii, 24–32px gutters, 14–16px copy, and a clear vertical rhythm. Collapse to one column on mobile while preserving the order of visual then explanatory content.

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

More components