## 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/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060914-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ramp-com/ad2900d9-6fba-4f32-a572-3ba7a6ce9831-1789060875-full.webp
- Component on Kage: https://kage.design/component/ramp-form

## Before you start
Ask me what my product does, who it is for, and what brand personality, colours, and typography it uses. Then apply the principles below to create an original version for my product—not a copy of the reference.

## Build this component
Create a self-contained recommendation-request form section for a modern software website. The form should invite visitors to describe their business context and receive tailored suggestions. Use the user's product, voice, and conversion goal for the actual copy.

### Layout and alignment
- Create a wide, horizontally centered section with a generous fixed or responsive height, approximately 680–720px on desktop and 520–640px on mobile.
- Use a rounded outer container with a radius around 12–16px and an atmospheric, very light background that transitions vertically from warm white at the top to cool grey near the bottom.
- Add a subtle abstract background treatment—such as blurred tonal shapes, a soft radial gradient, or restrained curved line texture—but keep it decorative and low contrast. Do not let it compete with the form.
- Center the content both horizontally and visually within the upper-middle portion of the section. Use a content max-width of about 760px.
- Stack the heading, supporting text, and input with clear vertical rhythm. Keep the heading and description centered.
- Place a small legal or consent note near the bottom edge of the section, centered and visually separated from the primary form.

### Typography hierarchy
- Use the product's brand typeface if available; otherwise use a clean contemporary sans-serif.
- Make the main heading large and compact: approximately 40–44px on desktop, 30–34px on mobile, with a tight line-height around 0.98–1.08 and medium-to-bold weight.
- Limit the heading to roughly two lines on desktop. Use a clear, benefit-led message rather than a generic form label.
- Set supporting copy at approximately 16px with 1.35–1.5 line-height, using a muted charcoal-grey. Keep it to one or two short lines.
- Use input placeholder text around 16px, with a soft medium-grey colour and comfortable line-height.
- Make the legal note small, around 12px, with reduced contrast; links should be underlined or otherwise clearly identifiable.

### Form and spacing
- Use a large multiline textarea or message field, roughly 330–370px wide on mobile and 100% of the desktop content width, with a height of about 160px.
- Give the field a white or near-white fill, a 1px border in a light neutral grey, a subtle shadow, and a radius around 5–8px.
- Align placeholder text to the top-left with approximately 20–24px internal padding.
- Position the submit action as a compact square or near-square button inside the lower-right corner of the field. Make it large enough to tap, at least 40–44px, with a pale neutral fill and a simple arrow or equivalent directional icon.
- Leave enough bottom padding inside the textarea so the action control never overlaps typed content.
- Use a restrained gap of about 16–20px between heading and supporting copy, and 20–24px between supporting copy and the field.
- On mobile, preserve the visual hierarchy, reduce horizontal padding, and make the field full width. Ensure the action remains easy to reach and does not obscure text.

### Colour and surface treatment
- Approximate palette: top background `#FAF9F6`, lower background `#9A9B99`, field `#FFFFFF`, primary text `#0B0B0B`, secondary text `#646463`, border `#D7D7D2`, action button `#F0F0EC`.
- Use a gentle neutral gradient rather than a saturated brand gradient unless the user's brand requires otherwise.
- Keep contrast strong for the heading and typed input. The legal note may be lower contrast, but it must remain readable.
- Use shadows sparingly: a soft, broad shadow beneath the field is enough to lift it from the background.

### Interaction and accessibility
- The whole field should have a clear hover and focus state. On focus, strengthen the border or add a subtle accessible focus ring without changing layout.
- The submit control should have hover, pressed, disabled, and loading states. An arrow may shift slightly on hover, but the interaction should remain subtle.
- Support keyboard navigation, visible focus indicators, labels or accessible naming, multiline input, validation, and a helpful error state.
- Disable submission until the minimum required content is present, or explain clearly what is missing. Preserve entered text after validation errors.
- Make the legal note explicit about how submitted content is used, with an accessible link to the relevant policy.
- Respect reduced-motion preferences and ensure the background treatment does not animate distractingly.

### Never
- Never use the reference product's logo, product name, brand name, or exact copy.
- Never copy the reference placeholder text, heading, consent language, or any other wording verbatim.
- Never reuse the reference's distinctive background artwork, illustrations, line patterns, or imagery; create a new restrained treatment suited to the user's brand.
- Never make the field, gradients, or decorative effects more visually dominant than the value proposition and form action.
- Never omit responsive behaviour, keyboard access, visible focus states, validation, or a readable consent explanation.