## 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-1789365767-7.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-6

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

Create a feedback-and-state component catalogue in a two-column card grid. Include inline alerts, dismissible toasts, announcement bars, loading indicators, progress rings/bars, empty states, tooltips, ratings, confirmation prompts, and destructive confirmation. Keep each specimen framed with a compact identifier and a usage note. Use warm neutral surfaces, charcoal text, hairline borders, and semantic accents for success, warning, error, and information while maintaining a calm editorial appearance. Use 10px utility labels, 13–16px body text, 1–2px borders, 2–4px radii, and 12–20px spacing. Specify accessible live regions, dismiss behavior, focus management, and reduced-motion behavior.

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