## 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/shiui/3111a107-5e9b-4487-9176-525a4b4c448a-1789365766-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/shiui/3111a107-5e9b-4487-9176-525a4b4c448a-1789365716423-full.webp
- Component on Kage: https://kage.design/component/shiui-feature-grid-5

## Before you start
Ask what the user's product and brand are, then apply the principles below to their context rather than reproducing this reference.

Build a navigation-pattern catalogue as a numbered section with a responsive two-column grid. Each bordered card contains a component label, a live pattern, and a usage note. Include filter tabs, segmented navigation, breadcrumbs, pagination, step indicators, utility menus, accordion/side navigation, tabs, and carousel dots. Use a restrained editorial system: paper #e8e7e1, charcoal #292926, hairline gray #aaa9a1, and one accent #e94d2f. Use compact 9–11px uppercase labels, 1px rules, square corners, 12–16px card padding, and strong active/selected states. Add keyboard focus, hover, current-page semantics, and responsive overflow handling.

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