Kage Design logo kage
asksapien.ai
Sapien feature grid component

Design analysis

A process section pairs a strong heading with four vertically sequenced explanatory rows, each balancing a diagrammatic layer against concise text.

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-3.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-2

## Before you start
Ask what the user's product workflow is, how many meaningful stages it has, and what each stage helps the user accomplish. Apply the same clarity-first structure to that workflow.

Create a spacious process section with a heading at the top and four vertically ordered rows. Use a two-column grid: a light technical diagram or abstract system illustration on the left and a text block on the right. Each row should have a concise 20–22px title and a 15–16px muted description. Let the rows breathe with 72–110px vertical spacing and subtle alignment guides or dividers where useful. Use white #ffffff, near-black #1d1d1b, gray #6d6d68, and very pale gray linework #e2e2dc. Preserve a sense of progression through repeated visual framing, not loud colors. On mobile, stack each visual above its text and reduce row spacing.

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

More components