Kage Design logo kage
mailwell.app
Mailwell feature grid component

Design analysis

Two related benefits are presented as sequential editorial blocks: a text-led speed explanation followed by a quiet reading-focused message-list visual. The repeated narrow column creates a strong, calm rhythm.

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/mailwell/88191a7a-ee36-4079-ad0c-b8c821ee63e0-1791525982-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mailwell/88191a7a-ee36-4079-ad0c-b8c821ee63e0-1791525844093-full.webp
- Component on Kage: https://kage.design/component/mailwell-feature-grid-2

## Before you start
Ask what performance, focus, or workflow benefits are central to the user's product. Ask whether they have a UI visual that can prove those benefits. Apply the principles to that product.

Create a vertically stacked feature section with a narrow reading column around 380–440px wide, aligned consistently across both blocks. The first block has a bold 22–26px heading and two short paragraphs; the second repeats the pattern with a new heading and concise explanation. Keep the copy left aligned and use 15–16px neutral sans-serif text with 1.55–1.7 line height. Between the blocks, include enough whitespace to make them feel like separate ideas rather than a dense list. Below the second block, center a wide product UI card showing a simplified list or conversation view. Use #fff or a very light gray surface, thin #d7d7d7 border, 10–14px radius, and a soft shadow; keep details low contrast so the section remains editorial rather than dashboard-heavy. Add a small muted caption under the visual.

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

More components