## 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-1789060951-2.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

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

## Build this section
Create a responsive product-feature section with an editorial heading followed by a card-based grid. The section should communicate several product benefits while making one primary benefit feel more important than the others.

### Layout and alignment
- Use a wide, centered content container with a maximum width of approximately 980–1200px and responsive horizontal padding of 20–32px.
- Place a left-aligned section heading and supporting paragraph above the cards. Keep the text block relatively narrow so the introduction remains readable rather than spanning the full viewport.
- Under the introduction, use a 12-column or equivalent responsive grid.
- Make the first feature a full-width, prominent card. Give it a taller visual area and reserve space for a lightweight product-related visual treatment, pattern, diagram, or abstract UI detail chosen for the user’s product.
- Place two supporting feature cards beneath it on desktop, with the first supporting card wider than or equal to the second depending on the content. On smaller screens, stack all cards vertically while preserving the primary feature first.
- Keep card content aligned to a consistent inset. Let the featured card’s visual area extend toward the bottom or edge of the card, but do not allow decoration to interfere with readability.
- Use generous vertical space between the section intro and grid, and a smaller, consistent gap between cards.

### Typography hierarchy
- Use a bold, modern sans-serif or the user’s brand typeface.
- Section heading: large and confident, approximately 40–56px on desktop and 32–40px on mobile; tight line-height around 0.98–1.08.
- Supporting paragraph: 18–22px with a relaxed 1.35–1.5 line-height and a muted dark colour.
- Feature titles: bold, approximately 22–28px for the primary card and 18–22px for supporting cards.
- Feature descriptions: 16–18px, with 1.45–1.6 line-height for comfortable scanning.
- Use occasional bold inline phrases or understated text links to highlight an important promise, but avoid turning every sentence into a callout.

### Colour and visual tone
- Start with a warm near-white page background, approximately `#FDFDFC` or `#FFFFFF`.
- Use near-black for headings, approximately `#111111`.
- Use a softer charcoal for body copy, approximately `#454545`.
- Choose one vivid brand accent for feature titles, icons, focus states, or small decorative marks. For a similarly energetic feel, use a magenta-to-violet range such as `#D946EF` to `#8B3DDB`, but adapt it to the user’s brand.
- Keep card interiors mostly white or subtly tinted so the content remains calm and legible.
- If adding a decorative visual, use a restrained accent palette and high contrast only where it helps establish hierarchy.

### Borders, radius, and surfaces
- Give cards a thin neutral border, approximately `1px solid #D9D9D9`, with a slightly stronger accent border on the featured card if appropriate.
- Use medium rounded corners, approximately 12–16px. Avoid excessive pill-shaped containers for the main cards.
- Use little or no shadow; the design should feel crisp and paper-like. If needed, use a very subtle shadow such as `0 2px 8px rgba(0,0,0,0.05)`.
- Provide generous card padding, approximately 28–36px on desktop and 22–26px on mobile.

### Feature-card composition
- Each card should have a concise benefit-oriented title and a short explanatory paragraph.
- The primary card should combine its text with a distinctive but simple visual system: for example, an abstract flow, interface fragment, grid, data pattern, or hand-drawn-style accent relevant to the product.
- Supporting cards should be more text-led, optionally beginning with a small line icon or symbol in the brand accent colour.
- Keep visual details subordinate to the message. They should add personality and help users remember the feature, not become an illustration-heavy hero.
- Maintain a consistent minimum height for cards on desktop so the grid feels deliberate, while allowing content to determine height on mobile.

### Interaction and accessibility
- If cards are clickable, make the entire card an obvious interactive target with a clear hover, focus, and active state. Use a subtle border-colour shift, background tint, or 2–4px lift—never rely on colour alone.
- Preserve a visible keyboard focus ring using the brand accent.
- Respect reduced-motion preferences and keep transitions short, around 160–220ms.
- Use semantic headings, readable contrast, meaningful link labels, and decorative visuals marked as hidden from assistive technology when they convey no information.

### Responsive behaviour
- At widths below approximately 760px, switch to a single-column stack.
- Reduce heading size and card padding without making the section feel compressed.
- Keep the primary feature visually prominent through order, accent treatment, or a taller visual area—not through excessive decoration.
- Ensure long titles and descriptions wrap naturally without horizontal overflow.

## Never
- Never reuse logos, product names, product-specific copy, or claims from the reference.
- Never reproduce the reference’s exact card proportions, decorative artwork, iconography, wording, or layout measurements.
- Never use illustrations or imagery from the reference; create an original visual treatment suited to the user’s product, or omit imagery entirely.
- Never make every card equally prominent when the section is intended to have a clear primary feature.
- Never sacrifice legibility, responsive behaviour, accessibility, or semantic structure for visual similarity.