## 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-6.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-feature-grid-4

## Before you start
Ask the user what their product does, who it is for, and what their brand direction is. Then apply the principles below to create an original feature-grid or contact section for that product—not a copy of the reference.

## Design language

Build a high-contrast, editorial contact section that combines an informational feature column with a prominent enquiry form. The section should feel decisive, compact, and slightly industrial, with a clear reading order and generous negative space.

### Layout and alignment
- Use a full-width section with a saturated accent background and a large desktop container, approximately 92–94% of the viewport width, capped around 1440px.
- Give the section generous vertical padding, roughly 110–150px on desktop and 64–88px on mobile.
- On desktop, use a two-column grid: a left content column around 42% wide and a right form card around 48–52% wide. Align both columns near the upper third of the section rather than centering them vertically.
- Keep all content aligned to a consistent outer grid. Use a thin horizontal rule beneath the small section metadata and between rows of supporting information.
- Place a compact, full-width benefits strip near the bottom of the section. Divide it into three equal cells with vertical separators; allow the strip to stack vertically on narrow screens.
- On mobile, collapse to one column, put the form beneath the descriptive content, and preserve comfortable horizontal padding of 20–24px.

### Typography hierarchy
- Use a bold contemporary sans-serif for the main heading. Make it large and tightly set—approximately 56–72px on desktop, 42–52px on mobile—with a short two-line statement.
- Use a readable sans-serif for the supporting paragraph, around 18–21px with 1.5 line-height and a restrained measure of 28–34rem.
- Use a monospaced or technical uppercase style for labels, metadata, links, and field captions. Set these around 10–12px, with noticeable letter spacing of 0.14–0.2em.
- Make links and values visually distinct through underlines, weight, or a subtle contrast shift rather than decorative icons.
- Keep the form title and step indicator small and utilitarian so the primary heading remains dominant.

### Colour
- Use one bold warm accent as the section background, approximately `#F04405` to `#F45108`.
- Use near-black text on the accent field, approximately `#11100F`.
- Use a very dark neutral for the form card, approximately `#1B1B18`, with near-black input surfaces around `#0F0E0D`.
- Use warm grey secondary text, approximately `#9A9890`, on dark surfaces.
- Use low-contrast rules and borders: dark translucent lines on the accent field and muted grey-brown lines on the form card, such as `rgba(17,16,15,.2)` and `#393833`.
- Reserve the accent colour for the main section, primary action, and selected/focused states so the interaction hierarchy remains clear.

### Borders, radius, and surfaces
- Give the outer section a restrained large radius at its top corners or use a softly rounded container if it is visually separated from adjacent sections; use approximately 28–40px.
- Use a dark form card with a medium-large radius of approximately 20–24px and generous internal padding of 36–40px on desktop, 22–24px on mobile.
- Use input fields with 12–16px radius, thin borders, and a minimum height of roughly 50px. The textarea should be substantially taller, around 140px.
- Keep shadows minimal or absent. Let colour contrast, spacing, and rules establish the hierarchy.

### Interaction
- Make the form feel usable and calm: clear labels above every field, visible optional markers, and a select control with an obvious affordance.
- Use a two-column field layout for short fields such as name/email and company/budget; let the long response field span the full form width.
- On focus, brighten the border and add a subtle accent-coloured focus ring without changing the layout.
- Make the submit button full width, pill-shaped, and high contrast. Include a small directional cue such as an arrow, but keep it typographic and unobtrusive.
- Add hover and keyboard states to links, fields, and the submit button. Ensure all controls have accessible labels, visible focus states, and sufficient colour contrast.

### Content structure
- Start the left column with a small eyebrow containing a section name and optional index or colour metadata.
- Follow it with a direct, outcome-oriented heading and a short paragraph explaining what information the user should provide.
- Below the paragraph, include a stacked list of contact or trust details separated by horizontal rules.
- On the right, use a short form header, a compact progress/index marker, grouped inputs, a larger project-description field, and a single primary submit action.
- Keep supporting copy concise. The section should communicate confidence through structure rather than lots of explanatory text.

## Never
- Never reuse the reference's logos, product names, brand names, or exact copy.
- Never copy the reference's illustrations, imagery, icons, or decorative artwork; this direction should work without imagery.
- Never reproduce the exact layout, wording, colours, field labels, metadata, or identifying content from the reference.
- Never make the form visually noisy with gradients, excessive shadows, oversized iconography, or unnecessary controls.
- Never hide focus states, rely on colour alone for meaning, or sacrifice responsive behaviour for the desktop composition.