## 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/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060953-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060926-full.webp
- Component on Kage: https://kage.design/component/tally-feature-grid-4

## Before you start
Ask the user what their product does, who it is for, and what visual brand system they want to use. Then apply the principles below to create an original feature section for that product—not a copy of the reference.

## Build this section
Create a responsive feature-grid section that explains how a product can be customized and extended. It should feel polished, friendly, editorial, and lightweight, with one prominent demonstration panel followed by a six-item capability grid.

### Structure and layout
- Use a full-width section on a warm white or pure white canvas, with a centered content wrapper approximately 1100–1280px wide.
- Begin with a two-column introductory row: a left-aligned heading and supporting paragraph, and an abstract decorative visual area on the right. On small screens, stack these with the text first.
- Follow the intro with one large, rounded showcase card. The card should have a thin neutral border, a very soft shadow, and generous internal padding.
- Inside the showcase card, place a small accent icon, a bold feature title, and one concise explanatory sentence. Below that, render a browser/app-like product preview with a slim chrome bar and a large, calm colour field containing a realistic but generic interface example.
- Below the showcase, place six supporting features in a three-column grid on desktop and two or one columns at narrower widths. Keep every item aligned to a shared left edge.
- Each grid item consists of a small accent icon, a short bold title, and one or two lines of descriptive text. Do not use separate cards for these items; let whitespace provide grouping.
- Maintain generous vertical whitespace before the next section so the feature block feels like a distinct chapter.

### Alignment and spacing
- Use a 12-column or equivalent grid for the intro and showcase; align the showcase and feature grid to the same wrapper edges.
- Suggested spacing: 24px between icon, title, and description; 48–72px between intro and showcase; 28–40px between showcase and the grid; 40–56px between grid rows.
- Use roughly 24–32px card padding on mobile and 32–48px on desktop.
- Keep text measure controlled: the intro paragraph should be no wider than about 520px, and feature descriptions should remain comfortably scannable.

### Typography
- Use the product’s brand sans-serif or a clean geometric/system sans-serif.
- Make the main heading large, heavy, and compact: approximately 44–64px desktop, 34–42px mobile, with tight line-height around 0.98–1.08.
- Use a 20–24px bold title for the showcase and 15–17px semibold titles for grid items.
- Use 18–22px supporting text in the intro and 15–16px body text in feature descriptions, with line-height around 1.4–1.55.
- Use strong weight contrast rather than excessive font sizes. Keep letter spacing close to normal.

### Colour
- Start with a mostly white background, approximately `#FFFFFF` or `#FCFCFB`.
- Use near-black text such as `#151515` for headings and `#3F3F3F` for supporting copy.
- Use a vivid product-specific accent for icons and tiny decorative marks; a hot pink/magenta around `#D92CCB` is a useful starting point, but adapt it to the user’s brand.
- Give the inner product preview a soft, low-saturation brand tint such as pale sage `#C5D8CC`, pale blue, sand, or lavender. Ensure all text and controls inside it remain accessible.
- Use muted grey browser chrome, approximately `#E5E5E5`, and subtle shadow tones with low opacity.

### Borders, surfaces, and radius
- Use a 1px border around the showcase card in a light grey such as `#D9D9D9`.
- Give the outer showcase card a 12–16px radius; give the inner preview a 6–10px radius.
- Browser controls can be represented by three small muted circles, but keep the treatment minimal.
- Avoid heavy shadows: use a diffuse shadow such as `0 2px 10px rgba(0,0,0,.08)`.
- Do not put borders around each feature-grid item unless the user’s product language specifically calls for it.

### Icons and interaction
- Use a consistent set of small outline or duotone icons with the same stroke weight. Icons should communicate concepts such as layout, code, media, embed, navigation, and language.
- Give icons the accent colour and keep them optically aligned above each feature title.
- If the showcase is interactive, support a subtle hover or focus state on controls inside the preview, but do not turn the whole section into a carousel.
- Add visible keyboard focus states and preserve readable contrast. The grid may remain static; its purpose is quick comprehension rather than exploration.
- Make the layout responsive: the preview should scale or crop gracefully, the grid should collapse cleanly, and decorative elements should be hidden or simplified on small screens.

### Content guidance
- Write original, product-specific headings and feature descriptions after learning the user’s product and brand.
- Keep the showcase example concrete enough to demonstrate the product’s value, but generic enough to fit the user’s domain.
- Use short, benefit-led feature labels and avoid paragraphs inside the grid.

## Never
- Never reuse logos, product names, exact copy, or brand-specific claims from the reference.
- Never copy the reference illustration, doodles, decorative shapes, or imagery.
- Never reproduce the exact interface mockup, sample content, colours, icon artwork, or layout proportions as a direct replica.
- Never rely on imagery to explain the section when a simple, original product preview will do.
- Never sacrifice accessibility, responsive behaviour, or the user’s brand identity in order to imitate the reference.