## 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-3.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-2

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Then create an original directory using the same information hierarchy.

Create a section heading followed by a responsive 4-column grid on desktop and 1–2 columns on smaller screens. Each community card should be a shallow rounded rectangle with a subtle border (#eeeeee), faint shadow, 16px internal padding, a small square or circular avatar/icon, a concise semibold name, and a one- or two-line muted description. Use a clean white background, 12–16px column and row gaps, 10–12px radius, and a content max-width around 676px or the product's equivalent. Keep descriptions intentionally truncated so the grid remains scannable. Use near-black #202020 for names and #9b9b9b for descriptions. On hover, lift the card by 1–2px, strengthen the border, and preserve a calm, editorial feel.

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