## 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/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059862-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059824-full.webp
- Component on Kage: https://kage.design/component/uini-feature-grid-2

## Before you start
Ask the user what their product does, who it is for, and what visual brand direction it uses. Then apply the principles below to create an original version for that product—not a copy of the reference.

## Build a contextual feature-grid section
Create a responsive, two-column feature section that explains one product capability through a believable interface example and concise supporting copy. The section should feel like part of a polished SaaS landing page: spacious, restrained, useful, and easy to scan.

### Layout and alignment
- Use a centered container with a maximum width of approximately 1120–1200px and generous vertical padding, around 96–144px on desktop.
- Place the UI demonstration on the left and the explanatory content on the right on large screens. Use a roughly 58/42 or 60/40 split, with a 64–96px column gap.
- Align the top of the narrative with the main visual content rather than vertically centering it.
- Keep the feature visual self-contained: show a simplified product screen inside a browser or app frame, with one clearly visible moment where the capability helps the user.
- Add a small caption below the visual if useful. Keep it subtle and aligned to the visual’s left or inner content edge.
- On screens below approximately 800px, stack the visual above the copy, reduce the gap, and preserve comfortable side padding of 20–24px.

### Feature visual
- Recreate the *idea* of a product interface, not a literal screenshot: use a neutral application window with a slim top chrome, understated controls, a short list or table, and one contextual message, alert, or recommendation.
- Make the interaction legible at a glance. A small event or error state can lead to a helpful prompt, article, action, or next step.
- Use hierarchy to guide the eye from the primary interface state to the contextual assistance. Avoid filling the mockup with unnecessary controls.
- Keep the mockup’s proportions wide and practical, approximately 1.45–1.7:1. Give it a thin border and a very soft shadow so it appears elevated without looking glossy.

### Narrative hierarchy
- Above the heading, include a small abstract brand-neutral marker, status glyph, or decorative ring. It should be simple and geometric, around 28–40px, and use one accent colour from the product brand.
- Use a short, benefit-led heading in 40–48px desktop type, with a tight line-height around 1.05–1.15 and a maximum width of roughly 390–460px. On mobile, reduce it to around 32–38px.
- Follow with one or two paragraphs in 16–18px text, line-height 1.55–1.7, using a muted colour. Explain the user problem, when the feature appears, and how the user controls or dismisses it.
- Keep the copy column narrow enough to create a clear reading rhythm. Prefer specific, plain-language explanation over marketing slogans.

### Typography
- Use the product’s existing typeface when available. Otherwise use a modern sans-serif with clean proportions, such as Inter, Geist, or a comparable system sans.
- Use near-black for headings and primary UI text, approximately `#171717` or `#1C1C1C`.
- Use a warm medium grey for body copy, approximately `#666666` to `#737373`.
- Keep UI labels smaller and quieter than the surrounding marketing copy, generally 12–14px.

### Colour and surfaces
- Use a warm off-white page background, approximately `#FCFCFA` or `#FAFAF8`, rather than stark white.
- Use white or near-white for the interface surface, approximately `#FFFFFF`.
- Use a very pale neutral for browser chrome and secondary controls, approximately `#F4F4F2`.
- Use a single vivid accent for the contextual event or helper state. A warm orange/coral around `#E8754F` works as a starting point, but adapt it to the user’s brand.
- If showing an event or warning strip, give it a soft accent tint such as `#FFF1D6` and use dark text for readability. Keep contrast accessible.

### Borders, radius, and depth
- Use delicate 1px borders in approximately `#E5E5E2` or `rgba(0,0,0,.10)`.
- Keep the overall mockup radius restrained, around 8–12px. Use slightly smaller radii, around 6–10px, for internal cards and prompts.
- Use a broad, low-opacity shadow such as `0 14px 32px rgba(20,20,20,.06)`; avoid dramatic elevation.
- Make buttons compact and solid, with a dark neutral fill or the product’s primary action colour, white text, and a 6–8px radius.

### Interaction and accessibility
- If the mockup is interactive, support a clear hover/focus state for the primary action and contextual prompt. Focus rings should be visible and brand-consistent.
- If the real feature supports dismissal, show a small dismiss affordance and explain its behaviour in the copy or accessible label.
- Ensure the section remains understandable without animation. Any entrance or contextual reveal should be subtle, optional, and respect `prefers-reduced-motion`.
- Use semantic headings, descriptive labels, adequate colour contrast, and responsive text that does not overflow.

### Responsive behaviour
- At tablet widths, reduce the column gap and visual scale before stacking.
- At mobile widths, make the mockup full width, allow dense UI details to simplify, and keep the narrative heading and paragraphs left-aligned.
- Do not turn the feature into a carousel unless the user explicitly needs multiple examples; the strength of this pattern is the immediate side-by-side relationship between proof and explanation.

## Never
- Never copy the reference’s logos, product names, URLs, exact interface labels, wording, data, or brand marks.
- Never reuse the reference’s exact illustration, mockup composition, decorative symbol, or imagery.
- Never use the reference’s marketing copy or reproduce its sentence structure too closely.
- Never add unrelated stock photography, decorative illustrations, or visual noise.
- Never make the demo so detailed that it competes with the explanation; invent an interface and content appropriate to the user’s own product and brand.