## 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/iris/650a6ac7-5b2c-4108-91e1-31520e600e3c-1790748229-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/iris/650a6ac7-5b2c-4108-91e1-31520e600e3c-1790748183746-full.webp
- Component on Kage: https://kage.design/component/iris-logo-cloud

## Before you start
Ask which tools, systems, or categories matter to the user's product and brand. Apply the pattern without copying the reference assets.

Create an integrations showcase on an off-white background. Place a centered content block with a small warm eyebrow, an editorial serif heading split across several lines, a concise explanation, and one black rounded CTA. Around it, arrange original integration badges or abstract category tokens in a loose orbital composition: vary scale, position, rotation, and distance from the center while preserving a calm visual balance. Use soft shadows, circular or rounded containers, and a restrained palette of blue, coral, yellow, green, black, and white; do not rely on actual third-party marks unless the user supplies permission and assets.

Use a responsive layout: on desktop the orbit occupies most of a 760–840px square area, while the content stays readable in the center; on mobile transform the orbit into a tidy 2–3 column badge grid or a slow, accessible horizontal scroller. Add subtle motion only on hover or when it does not harm performance, and include reduced-motion support. Maintain ample whitespace and a clear central reading path.

### Never
- Never copy the reference logos, logo arrangements, product name, or copy.
- Never imply unsupported integrations.
- Never sacrifice text contrast or accessibility for decorative motion.