Kage Design logo kage
intercom.com
intercom.com feature grid component

Design analysis

This section pairs an editorial heading and CTA with a large product image, then explains three capabilities in equal columns. The visual hierarchy moves from promise to proof to scannable feature detail.

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/intercom-com/1643b347-46d4-4b8f-b100-4d586237bab2-1789906751-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/intercom-com/1643b347-46d4-4b8f-b100-4d586237bab2-1789906717325-full.webp
- Component on Kage: https://kage.design/component/intercom-feature-grid

## Before you start
Ask what the user's product and brand are, then apply the following structure to that product.

Create a feature section with a small category eyebrow, a large two-line editorial heading, supporting paragraph, and paired CTAs in the upper portion. Place a wide product visual beneath it. Finish with a three-column explanatory grid where each item has a tiny colored square marker, concise heading, short paragraph, and optional text link.

Use a warm paper background #f8f8f4, #111111 headings, #555752 body text, and a deep blue accent around #1717a8. Keep the content max-width near 732px with 48–64px internal padding. The headline should be 38–48px desktop, light weight, and tight leading; feature headings 15–17px with body text 13–14px. Use 24px column gaps and a very light #e5e5de divider or card tint only where it improves grouping. The image should have a 1px border and subtle radius. Make cards stack vertically on mobile.

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

More components