## 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/harmony/a96ec10f-a650-47bb-acaa-8bed3696d9f4-1790575330-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/harmony/a96ec10f-a650-47bb-acaa-8bed3696d9f4-1790575269319-full.webp
- Component on Kage: https://kage.design/component/harmony-logo-cloud

## Before you start
Ask which tools the user's product integrates with and how users should discover them. Use the same information architecture with a new visual identity.

Build a white integrations directory. Start with a large heading and a short sentence explaining that existing tools connect with little setup, followed by a small text link. Add rounded category filter chips with neutral borders and a clear selected state. Below, use a regular multi-column grid of equal-height tiles separated by fine vertical and horizontal rules; each tile contains an invented or user-provided integration icon and accessible name. Use dark text #171821, muted gray #6c6d78, violet #6257ef for links, 1px #e0e0e6 dividers, 8–12px chip radii, and 56–88px spacing. Make the grid searchable or filterable and collapse to two columns on mobile.

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