## 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/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146185-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lu-ma/a4be0bf4-46ad-4066-8582-e9890f24d9e0-1789146157883-full.webp
- Component on Kage: https://kage.design/component/lu-ma-feature-grid-3

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Use the rules below to create categories that fit that product.

Build a category browsing section with a bold, compact section title and a 4-column by 3-row tile grid. Make each tile a low-height white rectangle with a very subtle gray border or shadow, 10–12px corner radius, and 16px padding. Place a small simple line icon in a distinct but soft accent color at the top, then a short category label near the bottom or beneath it. Keep all tiles equal height and align icon and label positions consistently. Use a restrained palette of pastel accents—lavender #8d78b5, gold #c1a642, teal #68aab0, coral #d88b9a, green #83a66e—against a white page; text should be #202020. Add a slight border-color change and translateY(-1px) hover state. Make the grid collapse responsively without changing the hierarchy.

Never: use the reference's logo, product name, category labels, icons, illustrations, imagery, or exact copy.