Kage Design logo kage
capacity.so
capacity.so feature grid component

Design analysis

An integration-led feature band combines a small eyebrow, explanatory copy, action controls, a large media card, and three concise benefit columns.

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/capacity-so/08f2bf80-ea5b-4604-8f5e-193c94acfc56-1791551994-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/capacity-so/08f2bf80-ea5b-4604-8f5e-193c94acfc56-1791551914192-full.webp
- Component on Kage: https://kage.design/component/capacity-feature-grid

## Before you start
Ask what tools or integrations the user's product supports, what users need to understand, and which benefits are most credible. Then adapt this structure to the user's brand.

Build a dark integration feature section inside a centered max-width container. Start with a compact integration eyebrow, a strong heading with one italic/display emphasis, and two lines of muted supporting copy. Place one or two pill buttons beside or beneath the copy. Follow with a large bordered media/video card, then a three-column row of short benefits with checkmark or line icons. Use near-black #090909 backgrounds, white #f4f4f2 headings, muted #929292 body text, orange or brand-accent controls, 1px borders around #ffffff12, and 12–16px radii. Preserve clear hierarchy and responsive stacking; make tabs or integration buttons interactive if present.

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

More components