## 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/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073949-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073879-full.webp
- Component on Kage: https://kage.design/component/render-feature-grid

# Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original version for that product rather than reproducing the reference.

## Build a three-step feature grid
Create a wide, editorial product-explanation section that communicates a simple workflow in three sequential steps. The section should feel calm, premium, and easy to scan, with each step combining a number, concise text, and a lightweight product-interface preview.

### Layout and alignment
- Use a full-width section on a white or near-white background, with a subtle 1px horizontal divider at the top if it fits the surrounding page.
- Constrain the content to a centered max-width of approximately 1100–1180px.
- Place a large section heading above the grid, aligned with the left edge of the grid. Use a short, outcome-oriented phrase rather than a paragraph.
- Arrange three equal-width columns with generous gaps, approximately 56–80px depending on viewport width.
- Each column follows the same vertical rhythm: coloured square step marker, title, supporting description, then an interface preview or abstract product artifact.
- Keep all column content left-aligned. Align the step markers and text baselines consistently across columns.
- On smaller screens, collapse to one column or a carefully spaced vertical sequence; preserve the numbered progression and avoid cramped previews.
- Allow the bottom of the section to transition into the next section with a soft tint, subtle gradient, or clean whitespace—not a heavy container edge.

### Typography
- Use a modern sans-serif appropriate to the user's brand. Prioritize a clean grotesk or humanist sans with open counters.
- Section heading: approximately 56–68px desktop, 1.0–1.08 line-height, regular weight, with tight but natural letter spacing.
- Step titles: approximately 28–32px desktop, 1.15–1.25 line-height, regular or medium weight.
- Descriptions: approximately 17–19px, 1.45–1.6 line-height, using a muted neutral colour and a readable measure of about 24–30 characters per line.
- Step numbers should be bold and highly legible, centred inside compact square markers.
- Keep the writing concise: one short title and two or three lines of explanatory copy per step.

### Colour
- Use a predominantly white background, approximately #FFFFFF or #FCFCFC.
- Use near-black text, approximately #111111–#171717.
- Use a softer charcoal for supporting copy, approximately #5F5F63 or #66666A.
- Choose one vivid brand accent for the numbered markers, such as a saturated violet around #8B00E8, but derive the exact hue from the user's brand.
- Interface previews should use quiet neutrals—approximately #F3F3F3, #E9E9E9, #D8D8D8, and #FFFFFF—with only small touches of the brand accent or status colour.
- If adding a lower-section tint, use an extremely pale version of the accent, around #F5F0FF, so it remains atmospheric rather than decorative.

### Borders, radius, and depth
- Keep the overall section borderless apart from an optional subtle divider in #E5E5E5.
- Product previews may use 1px borders in #DCDCDC and a very small radius, approximately 0–4px, to suggest functional software UI.
- Avoid prominent shadows. If needed, use a diffuse shadow such as 0 8px 24px rgba(0,0,0,0.04).
- Step markers are compact squares, approximately 32px × 32px, with little or no radius; use a 0–2px radius unless the user's brand calls for softer geometry.

### Interface previews and interaction
- Build simple, non-functional miniature UI compositions that visually reinforce each step: for example, a selection list, a configuration form, a deployment/status panel, or an equivalent artifact for the user's product.
- Crop or fade the previews naturally near the lower edge so the section remains light and editorial rather than becoming a dashboard showcase.
- Use realistic visual hierarchy inside previews—labels, controls, rows, statuses—but keep details quiet and secondary to the text.
- If the previews are interactive, provide subtle hover/focus feedback such as a pale accent highlight, a 1px border change, or a small status transition. Do not add interaction merely for decoration.
- Respect reduced-motion preferences and keep any animation short, functional, and understated.

### Responsive behavior
- At tablet widths, reduce the heading size and column gap while maintaining three columns if each remains readable.
- At mobile widths, use a vertical stack with approximately 48–64px between steps. Keep previews at a comfortable width and avoid making text smaller than about 16px.
- Preserve the visual order: step marker, title, description, preview.

## Never
- Never copy logos, product names, branded UI, or product-specific terminology from the reference.
- Never reuse the reference's exact headline, step copy, screenshots, interface labels, or status messages.
- Never include illustrations or imagery from the reference; create neutral UI artifacts suited to the user's product instead.
- Never turn the section into a dense dashboard, card-heavy layout, or generic three-card marketing block.
- Never use oversized decorative effects that compete with the workflow or reduce readability.