Kage Design logo kage
alexishida.com
Moji feature grid component

Design analysis

A light split section explains one differentiated workflow beside overlapping application screenshots. The checklist on the right makes the value proposition scannable and concrete.

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/moji/682da163-2f11-4698-8415-78d5458fc05f-1789193061-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/moji/682da163-2f11-4698-8415-78d5458fc05f-1789192951631-full.webp
- Component on Kage: https://kage.design/component/moji-feature-grid-3

## Before you start
Ask what the user's most distinctive workflow is, what visual proof best demonstrates it, and which three outcomes should be listed. Then adapt this pattern to the product.

Build a two-column feature section on a warm white background. Put two slightly overlapping, angled product panels or screenshots in the left half and an eyebrow, large serif headline, concise paragraph, and three checkmarked benefits in the right half. Keep the imagery dominant but bounded, with a max-width container and generous vertical whitespace. Use #faf9f5 background, #202124 text, #74716a body copy, #b52d27 checkmarks, #e2dfd7 borders, and 12–16px image radii. Use a subtle ground shadow and very restrained overlap; ensure all content remains accessible and readable without the images. Stack image above text on mobile.

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

More components