## 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/mylens/1ccd9fd0-0589-4047-afdb-6c3bf2f362f8-1792389755-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mylens/1ccd9fd0-0589-4047-afdb-6c3bf2f362f8-1792389647544-full.webp
- Component on Kage: https://kage.design/component/mylens-feature-grid-4

## Before you start
Ask which tools, APIs, agents, or systems the user's product connects to and which relationship matters most. Build an original ecosystem visualization around those answers.

Create a split integrations section. On the left, place a concise editorial headline and explanatory paragraph. On the right, show several generic tool/input nodes converging into a central product node and then branching toward output or audience nodes. Use text labels and abstract symbols instead of brand marks when the product does not own those brands.

Design rules:
- Use off-white background, near-black type, pale gray connector lines, and one blue or green accent for the central node.
- Use 42–52px serif heading and 13–15px sans-serif body copy; keep labels at 10–12px.
- Make the diagram airy, with thin curved or dotted lines and generous node spacing.
- Nodes should be 28–44px circles or rounded squares with 1px borders and restrained active states.
- On mobile, convert the radial diagram into a vertical flow with connectors.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the exact tool names, radial geometry, or central icon.
- Never imply an integration exists unless the user's product actually supports it.