## 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/idlen/09112380-17fc-499b-a8d2-71eed663a053-1789538553-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/idlen/09112380-17fc-499b-a8d2-71eed663a053-1789538482510-full.webp
- Component on Kage: https://kage.design/component/idlen-logo-cloud

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that product rather than copying this reference.

Create a low-key compatibility section with a centered uppercase eyebrow such as “Works with your favorite tools” and one horizontal row of evenly sized dark pills or bordered tabs. Each item contains a simple generic icon and a tool category or supported integration name supplied by the user.

Design rules:
- Use a max-width container and center the eyebrow above the row.
- Use 11px letter-spaced uppercase eyebrow text and 13px muted labels.
- Approximate colours: #171717 background, #858585 labels, #252525 borders, #aeb4bd icons, optional blue hover #4d9cff.
- Keep pills low contrast with 6–8px radius and 1px borders; do not use large colourful logos.
- Allow horizontal scrolling on mobile rather than wrapping into a tall block.
- Add a subtle hover state that raises contrast or reveals a small underline.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never imply integrations that the user's product does not support.
- Never turn the strip into a dense logo wall.