## 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-1789060952-3.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-2

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

## Build this section
Create a responsive feature-grid section for a modern SaaS or software product. The section should communicate that the product is approachable while still offering substantial capability.

### Structure and layout
- Use a centered, spacious page container with a maximum width of approximately 1120–1240px and responsive horizontal padding of 24–32px.
- Begin with an introductory row: place a large headline and supporting paragraph on the left, with generous empty space or a light abstract brand treatment on the right. Keep the text block around 480–560px wide.
- Use a short, confident two-line headline followed by a concise paragraph of two to three lines. The heading should explain the product promise; the paragraph should clarify the breadth of functionality.
- Below the introduction, place one dominant showcase card spanning the full container width. It should visually demonstrate a representative workflow, interface, or product capability relevant to the user's product.
- Under the showcase, add a six-item feature grid in three columns on desktop, two columns on tablet, and one column on mobile. Each item contains a small accent icon, a bold feature label, and a short explanatory sentence.
- Keep the showcase and feature grid visually connected, but leave clear vertical breathing room between them.

### Typography hierarchy
- Use the user's brand typeface where available; otherwise choose a clean contemporary sans-serif.
- Main heading: approximately 36–46px, 700–800 weight, tight line-height around 0.98–1.08, with slightly negative tracking.
- Supporting paragraph: approximately 20–24px, 400–500 weight, line-height around 1.25–1.4, in a softened dark gray.
- Showcase heading: approximately 18–20px, 700 weight.
- Feature labels: approximately 16–18px, 700 weight.
- Feature descriptions: approximately 15–17px, 400–500 weight, line-height around 1.45–1.55.
- Maintain strong contrast between headings and body copy, while avoiding overly dense text blocks.

### Colour and visual language
- Start with a mostly white or near-white canvas, approximately #FFFFFF or #FCFCFC.
- Use near-black text around #171717 and body text around #454545 or #555555.
- Choose one vivid brand accent for icons and small decorative marks; a suitable reference-inspired range is magenta/purple around #C83BC7 to #D94BD2, but adapt it to the user's brand.
- Keep decorative elements sparse and low-contrast so the content remains primary.
- If the product preview contains coloured labels or controls, use a restrained, softly desaturated palette rather than competing saturated colours.

### Borders, cards, and spacing
- Use a thin neutral border around the showcase card, approximately #D7D7D7, with a 1px stroke.
- Give the showcase card a large radius around 12–16px and a very subtle shadow, if any.
- Use generous section spacing: approximately 64–96px between the introduction and showcase, and 32–56px between the showcase and feature grid.
- Use 24–32px internal padding for the showcase header area, reducing to 20–24px on small screens.
- Separate feature-grid rows using consistent vertical spacing rather than heavy dividers.
- Keep icons optically small—roughly 20–24px—with a simple line style and the accent colour.

### Showcase treatment
- Build an original product-preview composition that supports the user's product rather than using a generic screenshot.
- The preview may combine a soft background field, a browser-like panel, cards, controls, or a workflow illustration made from HTML/CSS.
- Let the preview extend or crop naturally inside the showcase card so it feels like a glimpse into a larger product. Use a subtle fade or masked lower edge if useful.
- Ensure the showcase remains understandable without relying on tiny unreadable UI text. Use abstracted controls and a few legible labels instead.
- On mobile, simplify the preview, preserve its most important visual cue, and prevent horizontal overflow.

### Interaction and responsiveness
- If the feature items are interactive, use a subtle hover state: slightly darker text, a small icon shift, or a faint accent background. Do not use dramatic animation.
- Use keyboard-visible focus states with a clear accent outline.
- Stack the introduction and reduce heading size on mobile; keep the text left-aligned unless the user's brand calls for a different treatment.
- Collapse the feature grid cleanly at tablet and mobile breakpoints, preserving equal spacing and readable line lengths.
- Use short, gentle entrance or hover transitions of roughly 150–250ms only when they improve orientation.

## Never
- Never reuse the reference's logos, product names, brand marks, or exact copy.
- Never reproduce the reference's illustrations, doodles, screenshots, imagery, or distinctive decorative compositions.
- Never hard-code the reference product's feature labels or interface content.
- Never make a pixel-for-pixel clone; reinterpret the layout and visual principles for the user's product and brand.
- Never sacrifice accessibility, responsive behaviour, semantic HTML, or readable contrast for visual similarity.