## 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/loqui/a3dfb9eb-3572-4db1-a73a-a6d0266fe180-1793081140-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loqui/a3dfb9eb-3572-4db1-a73a-a6d0266fe180-1793080985787-full.webp
- Component on Kage: https://kage.design/component/loqui-feature-grid

## Before you start
Ask what kinds of tools, workflows, or environments the user's product connects with. Use those answers to create an original product-in-context section.

Build a visual collage section showing a software product working across several everyday contexts. Arrange 6–9 cards in a responsive masonry-like grid with a small uppercase section label, varied card heights, and realistic but invented interface snippets. Mix white cards, one dark code-like card, one vivid colour card, and one media/timeline card.

Design rules:
- Use a wide max-width grid with 12–18px gaps and asymmetrical card heights.
- Cards should have warm-white or #f4f3ef surfaces, 1px #e6e4df borders, and 16–22px corner radii.
- Use near-black #151515 for text, muted #77736d metadata, and accents such as #3158f5, #8b3dff, #ff2f91, and #c7fa22.
- Include believable hierarchy: app label, metadata, primary content, and occasional status chips.
- Keep the collage readable at a glance; reserve the strongest colour for one or two cards.
- Add subtle hover elevation or a 2–4px translate effect to cards, but avoid distracting animation.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never reproduce the exact app names, card arrangement, screenshots, or text.