## 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/oku-club/e710a983-c1d6-4177-b014-2738acd07d09-1789146242-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/oku-club/e710a983-c1d6-4177-b014-2738acd07d09-1789146208773-full.webp
- Component on Kage: https://kage.design/component/oku-club-feature-grid

## Before you start
Ask what the user's product does, which three to five capabilities matter most, and what brand colours and imagery are available. Build an original feature narrative for that product.

Build a stacked feature showcase inside a centered, pale-gray canvas. Start with a centered heading and one-line explanation, then show a wide browser/product screenshot as the anchor visual. Follow it with a two-column grid of generous cards where text and product imagery alternate sides; each card should communicate one user outcome, not just a feature name. Use consistent card proportions, cropped device mockups, and enough overflow/negative space for the visuals to feel editorial. Preserve a calm rhythm between rows.

Use background `#f4f4f4`, white or near-white card surfaces, text `#090909`, muted copy `#646464`, 10–14px radius, 24–40px internal padding, 56–96px row gaps, and serif headings around 28–34px. Let screenshots be the strongest visual and keep captions short. On mobile, convert to one column while preserving the text-before-image relationship.

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