intercom.com
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.
kage