## 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/labs-winszn-xyz/4df5b54d-904b-4cf9-bf65-93181d626a5e-1789097621-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/labs-winszn-xyz/4df5b54d-904b-4cf9-bf65-93181d626a5e-1789097588315-full.webp
- Component on Kage: https://kage.design/component/labs-winszn-form

## Before you start
Ask the user what their product is, who it is for, and what brand personality, colours, and tone should shape the form. Then apply the principles below to that product rather than reproducing the reference.

## Design the component
Build a minimal contact or enquiry form for the user's product. It should feel like a quiet, high-end digital studio interface: typographic, spacious, direct, and slightly utilitarian.

### Layout and alignment
- Use a full-width section with a very dark warm background, approximately `#100D0D` to `#151111`.
- Establish a clear desktop grid with generous outer gutters of roughly 40–64px. Align the section heading, supporting copy, fields, and submit control to the same left edge.
- Keep the form relatively narrow—around 520–720px—while allowing the overall section to retain substantial negative space.
- On desktop, place a small eyebrow or section label above the form, followed by an oversized headline or prompt. On mobile, collapse to one column and reduce the outer padding to 20–24px.
- Let the form feel integrated into the page rather than enclosed in a card. Avoid floating panels, shadows, and unnecessary containers.

### Typography hierarchy
- Use a bold grotesk or contemporary sans-serif for the primary heading. Make it visually dominant, approximately 56–96px on desktop with tight line-height around `0.9–1.0`.
- Use small uppercase labels with generous letter spacing, around `0.14em–0.2em`, for the eyebrow, field labels, and metadata.
- Use a muted neutral for supporting text, approximately `#A7A19A`, and a warm off-white for primary text, approximately `#E9E5DC`.
- Keep labels concise and let typography create hierarchy instead of adding many decorative elements.

### Form styling
- Use simple, full-width text inputs, textarea, and optionally a select or project-type field.
- Make fields transparent or only lightly filled, with a thin bottom border around `#4A4039`; avoid boxed inputs unless they better fit the user's brand.
- Give fields generous vertical padding, around 14–18px, with 28–40px between field groups.
- Use warm off-white input text and a subdued placeholder around `#766F68`.
- The submit action should be visually clear but restrained: a text-and-arrow link or compact button using a muted rust accent around `#A94D32` / `#C35C3B`. Add a subtle underline or border rather than a large filled CTA.
- Use visible focus states: brighten the field border to the accent colour and provide an accessible focus ring.

### Colour, borders, and radius
- Prefer a limited palette: warm near-black background, off-white foreground, dusty taupe secondary text, and one burnt-orange/rust accent.
- Keep borders 1px and low contrast. Use little or no corner radius—0–4px—so the form feels editorial rather than like a SaaS dashboard.
- Do not use gradients, glassmorphism, prominent shadows, or decorative cards.

### Interaction and responsive behaviour
- Inputs should have clear labels, keyboard accessibility, appropriate autocomplete attributes, and validation feedback that does not shift the layout unexpectedly.
- Animate only small details: a 150–250ms colour or border transition on hover/focus and a slight arrow movement on submit hover.
- Preserve the generous rhythm at tablet and mobile widths, but reduce heading size to roughly 42–56px and stack all fields vertically.
- Ensure contrast, focus visibility, error messaging, and touch targets meet accessibility expectations.

## Never
- Never copy logos, product names, URLs, or branded wording from the reference.
- Never reuse the reference's exact form copy, labels, navigation text, or visual assets.
- Never include illustrations, photography, or imagery taken from the reference.
- Never make a pixel-for-pixel clone; translate the layout logic and design language into the user's own product and brand.