Kage Design logo kage
asksapien.ai
Sapien feature grid component

Design analysis

A high-whitespace transition introduces the use-case gallery with an oversized two-line statement and a short supporting sentence.

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/sapien/bf276bc9-8a7f-4325-84fe-38ac6dd29868-1791093738-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sapien/bf276bc9-8a7f-4325-84fe-38ac6dd29868-1791093700749-full.webp
- Component on Kage: https://kage.design/component/sapien-feature-grid-3

## Before you start
Ask which use cases matter most for the user's product and what single statement should make visitors want to explore them. Adapt the emphasis to that product.

Build an introduction band with generous top and bottom whitespace. Add a small uppercase section label, then an oversized two-line heading around 38–46px with tight leading, followed by a short muted description. Align everything to a centered max-width container but keep text left aligned. Use a calm white background, near-black #1b1b19 text, and secondary gray #777771. Avoid extra controls here so the heading has room to establish the next section. On mobile, reduce the heading to 32–38px while retaining the strong line break rhythm.

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

More components