Kage Design logo kage
base44.com
Base Code feature grid component

Design analysis

A muted showcase band introduces a workflow with a small eyebrow, oversized title, explanatory copy, CTA, and a large interface capture placed beside it.

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/base-code/bec5af88-964e-4f0a-90b9-76aa2444b6f5-1791871470-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/base-code/bec5af88-964e-4f0a-90b9-76aa2444b6f5-1791871315791-full.webp
- Component on Kage: https://kage.design/component/base-code-feature-grid-2

## Before you start
Ask what workflow the user's product improves and what visual assets or brand palette are available. Use that information to create a distinct demonstration section.

Create a wide, muted showcase section with a small eyebrow label, a large left-aligned headline, brief supporting copy, and a secondary outlined CTA. Pair this content with a large product interface preview on the right or lower-right, maintaining a clear visual reading path from message to proof. Use a soft gray background around `#d9d9d7`, near-black typography, thin dark outlines, and restrained corner rounding. Give the preview enough scale to read as a real workflow without letting it overpower the headline. On mobile, stack copy above the preview and make the CTA full-width if needed.

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

More components