## 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-7.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-4

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, and typography are. Then apply the principles below to my product rather than reproducing the reference section or its wording.

## Build a split feature-grid section
Create a responsive marketing section that explains a product through a short introductory panel and a sequential list of feature or setup steps. The composition should feel quiet, editorial, and highly legible: one strong promise on the left, practical details on the right, followed by the next page section below.

### Layout and alignment
- Use a centred content container with a maximum width of approximately 1120–1200px and generous horizontal gutters, around 60px on desktop and 24px on mobile.
- On desktop, use a two-column grid: the left column is about 40–45% wide and the right column about 55–60%. Align both columns to the same top edge.
- Keep the left panel visually compact. Place a large headline, a supporting paragraph, and a text-style CTA in a vertical stack.
- Place the feature list in the right column. Each item should have a title followed by one or two lines of explanatory text. Separate items with thin horizontal rules rather than boxed cards.
- Use generous vertical whitespace around the section, approximately 120–150px above and below on desktop. Reduce this to 72–96px on mobile.
- On screens below roughly 760px, collapse to one column. Put the intro panel first, then the feature list; preserve clear spacing between them.
- If another section follows, leave a deliberate transition gap and allow its heading or cards to begin below the feature grid, creating a rhythm between sections.

### Typography hierarchy
- Use a modern sans-serif with a neutral, slightly humanist feel. Use the user’s brand font if available; otherwise choose a clean system or contemporary sans-serif.
- Set the main heading at approximately 40–48px on desktop, with a line height around 1.05–1.12 and modest negative letter spacing. On mobile use 32–38px.
- Make the feature titles approximately 20px with a 1.25 line height and medium-to-semibold weight.
- Set body copy around 16–17px, 1.55–1.7 line height, and a softer weight or colour than headings.
- Keep the CTA around 15–16px, medium weight, and avoid making it look like a large filled button unless that is clearly part of the user’s brand.
- Use sentence case and short line lengths. The left paragraph should be constrained to roughly 30–36 characters per line; feature descriptions can be wider but should remain comfortably readable.

### Colour
- Start with an off-white background near `#FAFAF8` or `#FBFBFA`, not stark pure white.
- Use near-black text around `#171717` or `#1C1C1B` for the headline and feature titles.
- Use a muted charcoal-grey around `#666663` for supporting copy.
- Use a very subtle divider around `#E2E2DE` or `#E7E7E3`.
- Treat these as approximate values and adapt them to the user’s brand palette while maintaining strong text contrast and a restrained overall feel.

### Borders, radius, and surfaces
- Keep the main feature list borderless except for the thin horizontal separators between rows.
- If the following section contains testimonial or content cards, use a 1px low-contrast border, a restrained radius around 16–18px, and the same quiet background rather than heavy shadows.
- Avoid gradients, glossy surfaces, excessive shadows, and decorative containers in the feature-grid itself.

### Interaction and responsive behaviour
- Make the CTA visibly interactive with a subtle colour shift, underline, or 2–4px horizontal movement on hover; include a clear keyboard focus state.
- If the CTA includes an arrow, keep it small and aligned with the text; animate it slightly on hover without distracting from the copy.
- Feature rows may receive a very subtle background tint or title-colour change on hover, but do not turn them into large animated cards.
- Ensure all links and interactive elements have accessible focus styles, sufficient contrast, and comfortable touch targets.
- Preserve the reading order in mobile and avoid staggered animations that delay access to the content.

### Content guidance
- Write a concise, outcome-oriented headline for the user’s product.
- Support it with one paragraph explaining the broader value or the simple workflow.
- Use three to five feature rows, ideally describing a progression such as setup, configuration, publishing, measurement, or improvement.
- Give each row a direct title and a specific explanation; avoid vague feature marketing.

## Never
- Never copy the reference’s logos, product names, brand identity, or exact wording.
- Never reuse the reference copy, including its headline, CTA, feature titles, testimonial text, or any distinctive phrases.
- Never include illustrations, screenshots, icons, or imagery from the reference.
- Never reproduce the reference as a pixel-perfect clone; adapt the structure and design principles to the user’s product and brand.
- Never sacrifice accessibility, responsive behaviour, or readable contrast for visual similarity.