## 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/hypervibe/0f025394-2dff-4c9b-be5f-8e394ec4a30f-1791699115-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hypervibe/0f025394-2dff-4c9b-be5f-8e394ec4a30f-1791699070438-full.webp
- Component on Kage: https://kage.design/component/hypervibe-feature-grid-4

## Before you start
Ask what kinds of artifacts the user's product helps create and which outputs deserve emphasis. Then use the following layout logic with custom content.

Build an output-focused feature section with a small uppercase index, an editorial heading, and a supporting paragraph. Beneath it, use a 2x2 grid of equal feature cards, each containing a wide rounded product visual, a short title, and one explanatory sentence. Keep the grid visually calm: near-black background, warm off-white headings, muted gray descriptions, subtle 1px borders, and 14–16px radii. Use 24px column and row gaps, consistent image heights, and a single accent color for small status details. On narrow screens switch to one column while preserving the visual order.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the reference studio names or imagery.
- Never overload cards with feature lists; one outcome per card is clearer.