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

## 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 comprehensive two-column form-control catalogue. Use a numbered heading followed by bordered specimen cards, each with a small ID row, live control preview, and a concise usage note. Cover text input, textarea, select, checkbox, radio, toggle, range slider, search, password, file dropzone, date fields, segmented controls, payment fields, validation, progress, and quantity controls. Establish a clear form language: 10–11px uppercase labels, 13–15px values, 1px neutral borders, 2px radius, 10–14px control padding, warm off-white surfaces, charcoal text, and an accent red/orange for focus, errors, and primary actions. Show accessible focus rings, error/help text, disabled states, and keyboard-friendly behavior. Ensure contrast and responsive stacking.

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