## 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-6.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-3

## Before you start
Ask the user what their product does, who it is for, and what visual brand it should follow. Then apply the principles below to their product rather than reproducing the reference literally.

## Build a feature-grid section
Create a spacious, editorial two-column feature section that explains how the product turns an overlooked user signal into a useful, reviewable outcome. The left side should carry the narrative; the right side should contain a compact interface mockup that demonstrates the workflow.

### Layout and alignment
- Use a centered content container with a maximum width of roughly 1120–1200px and generous horizontal padding, around 56–72px on desktop.
- Arrange the section as a two-column grid, approximately 42% text and 58% visual, with a 72–104px gap.
- Vertically center the text column against the interface composition rather than aligning only to its top edge.
- Keep the text column narrow enough for readable line lengths, around 420–480px.
- On smaller screens, stack the columns with the narrative first and the interface mockup below it; reduce the gap while preserving generous vertical breathing room.
- Use whitespace as a primary structural element. The section should feel quiet, confident, and product-led.

### Narrative hierarchy
- Add a small, understated accent mark or abstract status glyph above the heading. It may use the product’s own visual language, but it must remain secondary.
- Use a large sans-serif heading around 40–48px on desktop, with a tight line height around 1.05–1.12 and a medium or regular weight. Allow it to wrap into three short lines when appropriate.
- Follow with two concise body paragraphs in a muted tone, around 16–18px with a 1.65 line height. The first explains the problem or signal; the second explains the product’s response and builds trust.
- Emphasize one important reassurance or outcome with a heavier weight rather than a bright colour.
- Add a small supporting note below the paragraphs, around 13–14px, with lower contrast. This can clarify availability, scope, or plan inclusion for the user’s product.

### Interface mockup
- Place the mockup inside a very pale warm-gray or off-white stage, approximately `#F8F8F6`, with generous internal padding of 28–32px.
- Build two stacked white cards with a 16–18px gap and subtle depth. The upper card should show a compact list of unresolved signals, activity, or requests; the lower card should show a generated result awaiting review.
- Use white surfaces around `#FFFFFF`, a fine border around `#E7E7E3`, and a soft shadow such as `0 18px 35px rgba(24, 24, 20, 0.08)`.
- Use card radii around 16–18px. Use smaller 8–10px radii for inline alerts, pills, or controls.
- The upper card should include: a concise title, a quiet date/filter label, several rows with short monospace or compact labels and right-aligned counts, then a tinted callout indicating that an issue has enough evidence to act on.
- The callout should include a small accent icon, a short status sentence, and a dark rounded action button. Keep the action visually clear but not oversized.
- Connect the upper and lower cards with a subtle label or dotted/vertical cue that communicates the workflow transition. This cue should be optional on small screens.
- The lower card should include a small coloured status icon, a title indicating that a result is ready, a muted status pill, a short generated-content preview, and two actions: one dark primary action and one light outlined secondary action.
- Add a tiny caption below the mockup explaining the general workflow in one sentence. Keep it centered or aligned to the visual composition.

### Colour and type
- Start with an off-white page background around `#FCFCFA` or `#FFFFFF`.
- Use near-black for headings and primary controls, approximately `#171716`.
- Use a warm gray for body copy, approximately `#5F5F5A`, and a lighter gray around `#969691` for metadata.
- Use a restrained peach, coral, amber, or product-specific accent for status icons and callouts, approximately `#F6D8C8`; use a pale green only if it supports the product’s brand.
- Keep accent colour sparse. The main visual hierarchy should come from scale, spacing, contrast, and card elevation.
- Use a clean modern sans-serif throughout. Reserve a neutral monospace face for compact search terms, identifiers, or tabular labels when useful.

### Interaction and responsive behaviour
- Make the primary mockup action appear clickable with a subtle hover lift or background darkening; maintain strong contrast and a visible focus state.
- Let secondary actions use a light border and transition to a slightly darker surface on hover.
- If the feature is interactive in the real product, allow rows or cards to reveal a detail state, but keep the default composition simple and immediately understandable.
- Ensure cards never overflow on mobile. Convert dense rows into flexible two-column rows or stacked metadata, and keep tap targets at least 44px high.
- Respect reduced-motion preferences and avoid decorative animation that competes with the feature message.

### Never
- Never copy the reference’s logos, product names, or brand-specific marks.
- Never reuse its exact headline, body copy, search terms, labels, counts, or button text.
- Never copy its illustrations, icons, screenshots, imagery, or exact interface content.
- Never make the mockup a pixel-for-pixel replica; invent equivalent content and adapt the layout to the user’s product and brand.
- Never add unnecessary gradients, loud colours, excessive shadows, or dense dashboard chrome that undermines the calm editorial feel.