Kage Design logo kage
figma.com
Figma Agent feature grid component

Design analysis

A large whitespace-led introductory feature section presents a short statement about an AI-native shared canvas before transitioning into the product development story.

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/figma-agent/07db1d51-fc5a-42e3-8555-5aed12aa6731-1791439426-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/figma-agent/07db1d51-fc5a-42e3-8555-5aed12aa6731-1791439335233-full.webp
- Component on Kage: https://kage.design/component/figma-agent-feature-grid

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

Design an editorial feature-introduction section with substantial whitespace. Place a concise lead statement near the top-left within a centered content width, using a 22–26px heading and a muted 18–22px supporting sentence beneath it. Let the remaining space create anticipation for the product visual or feature grid that follows. Use a restrained white background, black primary text, cool gray secondary text, and a consistent 24–32px vertical rhythm. The section should work as a transition: it explains the product promise before showing detailed capabilities. On mobile, reduce the empty space while preserving a clear pause between hero and feature content.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- fill the whitespace with unrelated decorative content
- turn the introduction into a dense card grid

More components