Kage Design logo kage
peerspace.com
peerspace.com tabs & steps component

Design analysis

A warm off-white directory uses a large heading, horizontally scrolling category tabs, and a three-column list of location links with a search-oriented CTA.

Prompt preview
## 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/peerspace-com/2a6d29c3-21bf-4d34-8c1e-93824205de9d-1789146242-9.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/peerspace-com/2a6d29c3-21bf-4d34-8c1e-93824205de9d-1789146208431-full.webp
- Component on Kage: https://kage.design/component/peerspace-tabs

## Before you start
Ask what the user's product, audience, and brand are, then adapt this local discovery directory to their categories and markets.

Create a warm off-white (#F5F1E8) location directory with a bold two-line heading and small arrow controls. Add a single-line tab bar of categories with an active tab marked by a dark underline; allow horizontal scrolling when needed. Below, lay out location links in three balanced columns, each with a bold place name and tiny uppercase region metadata. Finish with a dark filled action button. Use 48–64px heading type, 14–16px tab labels, 8px vertical row gaps, subtle rules, and responsive one-column stacking.

Never: use the reference logo, product name, exact copy, illustrations, imagery, or distinctive brand assets.

More components