## 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-1789059861-2.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-5

## Before you start
Ask what the user's product is, who it serves, and what its brand language, colours, and typography are. Then apply the principles below to create a version that fits their product rather than reproducing the reference.

## Build this section
Create a calm, editorial three-column feature grid that explains a sequential product journey, workflow, or set of capabilities. The section should feel informative and premium without relying on cards, illustrations, or heavy decoration.

### Layout and alignment
- Use a wide content container with a maximum width of approximately `1160–1240px`, centred on the page.
- Give the section generous vertical padding, roughly `96–128px` on desktop and `64–80px` on mobile.
- Start with a two-column introductory row: a large heading on the left and a concise supporting paragraph on the right. Align both to the top.
- Place the feature items below in three equal columns with consistent horizontal gaps of approximately `48–64px`.
- Keep every column left-aligned. The numbered label, title, body copy, and link should share the same vertical axis.
- On smaller screens, collapse the intro into one column and stack the features vertically with `40–56px` between items.
- Avoid enclosing each item in a card; let whitespace and alignment create the structure.

### Typography hierarchy
- Use a clean contemporary sans-serif, or the product's equivalent brand typeface.
- Make the main heading large and compact: approximately `40–48px`, `1.05–1.12` line-height, medium or regular weight. Allow it to wrap naturally over two lines.
- Set the supporting paragraph around `16–18px` with a relaxed `1.65–1.8` line-height and a muted weight or colour.
- Use feature titles around `20–22px`, with a regular or medium weight and approximately `1.3` line-height.
- Use body text around `16px`, `1.65–1.8` line-height, with a softer contrast than headings.
- Make the numbered labels small but distinctive, around `18–20px`, medium or semibold, with a slightly expressive brand accent.
- Keep link labels compact, around `14–16px`, with enough contrast to remain clearly actionable.

### Colour and surface
- Use a warm near-white page background, approximately `#FAFAF7` or `#FBFBF9`, rather than stark white.
- Use a deep charcoal or near-black for the heading, approximately `#171717`.
- Use a neutral grey for supporting and body copy, approximately `#66645F` or `#706E68`.
- Use a muted terracotta, rust, or warm copper accent for the numbered labels, approximately `#A64D2E` to `#B45B37`.
- Keep the palette restrained: the accent should be limited to numbering and any related micro-interaction.

### Borders, radius, and decoration
- Do not use visible card borders, drop shadows, or large-radius containers around the feature items.
- If the broader page needs a separator, use a subtle warm-grey line such as `#E7E5DF` with a 1px thickness.
- Keep the section visually open and rely on whitespace rather than panels.
- Use no decorative imagery; the hierarchy and copy are the visual focus.

### Interaction
- Make each feature link visibly clickable with a small downward or directional arrow placed after the label.
- Use a restrained hover state: darken the text, shift the arrow a few pixels in the direction it points, or reveal a very subtle accent colour.
- Preserve accessible focus states with a visible outline or underline.
- Ensure the entire link has a comfortable hit area and that keyboard users can reach each action in logical order.
- If the items represent a sequence, make the numerical order semantically meaningful and expose it to screen readers.

## Never
- Never copy logos, product names, or brand-specific identifiers from the reference.
- Never reuse the reference's exact feature copy, headings, link labels, or wording.
- Never reproduce the reference's illustrations, imagery, or any other source-specific visual assets.
- Never force the user's product into a three-step workflow if its content needs a different number of items; preserve the grid's clarity and rhythm instead.
- Never add dense UI chrome, excessive cards, gradients, or decorative effects that undermine the quiet editorial character.