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

Design analysis

A left-aligned section introduction leads into two large feature cards, each pairing a product UI glimpse with a concise explanation and learn-more link.

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-4.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-2

## 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 two-column developer-feature section on a dark background. Put a large two-line heading and short intro above the grid, then use equal-width cards with rounded 14px borders, subtle internal product previews, a small icon, title, description, and text link. Keep card surfaces near-black with #202124 borders and low-contrast gradients. Use a clear hierarchy: 40–52px section heading, 16px copy, 14px card title, and 13px body. Preserve generous gaps and stack cards vertically below 720px. Use hover elevation or border glow sparingly.

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

More components