## 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/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146825-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146766657-full.webp
- Component on Kage: https://kage.design/component/bilt-gallery

## Before you start
Ask what the user's product, audience, and brand are. Apply the spatial storytelling technique to their product's ecosystem.

Build an immersive ecosystem section with a subtle abstract map or network background and a short heading plus paragraph anchored on one side. Scatter 5–7 original benefit cards across the visual field at varied sizes and angles, while keeping them aligned to an invisible grid. Place a prominent category filter pill near the bottom or center so users can switch between types of benefits. Cards should combine imagery, a label, and a short value statement.

Design language: use #020b15 as the base, a low-contrast line texture around #162634, white text #f3f6f7, muted text #a5b1ba, and translucent cards around rgba(25,39,49,.92). Use 12px radii, 1px rgba(255,255,255,.14) borders, small shadows, and 12–16px internal padding. The selector should be a high-contrast capsule with 999px radius and compact icon-label items. Provide hover/focus elevation and a non-spatial stacked fallback on mobile; do not rely on absolute positioning for essential content.

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