Kage Design logo kage
illusions.app
illusions feature grid component

Design analysis

This block presents a long-form organization capability with explanatory copy on the left and a dark navigation/workspace preview on the right.

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/illusions/1ba887fc-c00e-45d6-baad-b5fdc0d1f7c3-1789797656-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/illusions/1ba887fc-c00e-45d6-baad-b5fdc0d1f7c3-1789797632145-full.webp
- Component on Kage: https://kage.design/component/illusions-feature-grid-3

## Before you start
Ask what the user's product is, who it serves, and what their brand voice and visual identity are. Apply the principles below to that product rather than reproducing this reference.

Design an alternating feature section for organizing complex work. Use a left text column with an eyebrow, large editorial heading, concise description, and 3–5 rounded capability tags; place a tall, narrow dark workspace mockup on the right. The preview should show hierarchy through a search field, nested rows, section labels, and a selected item, using #0b0b0b, #202020, #383838, and muted text. Align the visual vertically near the center of the copy rather than forcing identical heights. Maintain a 12px radius, 1px borders, and restrained contrast. Use responsive stacking and preserve the generous black margins that make the section feel premium.

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

More components