Kage Design logo kage
getinboxzero.com
Inbox Zero feature grid component

Design analysis

A centered section heading introduces three equal cards, each explaining one practical workflow with a small label and a lightweight UI illustration.

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/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389758-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389697138-full.webp
- Component on Kage: https://kage.design/component/inbox-zero-feature-grid

## Before you start
Ask what the user's product and brand are, then apply the principles below to that product rather than reproducing this reference.

Create a feature section for a productivity product. Center a concise heading and supporting sentence, then place three equal-width cards in a responsive grid. Each card should have a tiny uppercase category badge, a short benefit-focused title, muted explanatory text, and a simple abstract interface preview near the bottom. Use white cards on white or near-white background, 1px #f0f0f0 borders, 16px radius, soft shadows, 24px internal padding, and a 32–40px gap. Typography should use a 32–40px bold section heading, 18px card titles, and 14px gray descriptions. Keep card heights aligned and make the cards lift subtly on hover.

Never use the reference's logo, product name, copy, illustrations, or imagery.

More components