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

## 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-grid section for that product—not a copy of the reference.

## Build this section
Create a responsive product feature showcase that explains how the product helps users accomplish a core job. The composition should feel editorial, friendly, and product-led:

- Start with a generous white or very light neutral section background.
- Use a two-part intro row: a large heading and short supporting paragraph aligned to the left, with a small abstract brand-accent visual or lightweight product cue offset to the right. Keep the visual secondary to the message.
- Place the main feature card directly below the intro. Make it full width on desktop and give it the strongest visual weight.
- Follow it with two equal-width supporting feature cards in a two-column layout.
- Finish with a compact three-column capability list beneath the cards. Each item should have a small accent icon, a bold label, and one or two concise lines of supporting text.
- On mobile, stack everything in reading order: intro, main card, supporting cards, then the capability list. Remove decorative elements if they create crowding.

## Layout and alignment
- Use a centered content container with a maximum width around 1120–1240px and horizontal gutters of 20–32px.
- Align all card content to a consistent left edge.
- Use a 12-column mental grid: the hero card spans all columns, the two secondary cards span six columns each, and the small capabilities use three columns.
- Use generous vertical rhythm: roughly 72–112px between the section intro and surrounding sections, 28–40px between the intro and main card, and 24–32px between cards.
- Give the main card a tall, browser-like product preview area. The supporting cards can use shorter cropped interface previews.
- Product previews should look like believable UI for the user’s product, but remain illustrative rather than fully functional.

## Typography
- Use a modern sans-serif with a warm, approachable feel.
- Set the section heading around 42–56px on desktop, 34–40px on mobile, with a tight line-height around 0.98–1.08 and strong weight.
- Set the supporting paragraph around 18–22px with a 1.35–1.5 line-height and a restrained dark-gray colour.
- Card titles should be 17–20px, bold, and visually distinct from descriptions.
- Card descriptions should be 16–18px with a 1.4–1.55 line-height.
- Capability labels should be 15–17px semibold; supporting text should be 14–16px.
- Keep copy short and scannable. Avoid dense paragraphs.

## Colour and accents
- Use a near-white page background such as `#FFFFFF` or `#FCFCFB`.
- Use near-black for headings, approximately `#111111` or `#171717`.
- Use a softer charcoal for body text, approximately `#4A4A4A`.
- Use a vivid but controlled brand accent for icons, small highlights, selected UI states, and decorative marks—approximately `#D83BC8`, unless the user’s brand calls for another colour.
- Use a pale accent wash such as `#FFF0FB` sparingly behind selected interface details.
- Keep the product preview mostly white and neutral so the accent colour has clear emphasis.

## Borders, radius, and depth
- Give cards a 1px light-gray border such as `#D9D9D9`.
- Use subtle corner rounding around 10–14px; keep the shape friendly but not overly soft.
- Avoid heavy shadows. If needed, use a very restrained shadow such as `0 2px 8px rgba(0,0,0,0.06)`.
- Product-preview windows may use a slightly smaller inner radius and a thin divider beneath their browser/header strip.
- Keep the overall visual language crisp, handmade-friendly, and lightly imperfect rather than glossy or enterprise-heavy.

## Feature card content
- Each card begins with a small line icon or abstract symbol in the brand accent colour.
- Put the title and description above the preview so the benefit is understood before the interface is inspected.
- The main preview should demonstrate a dynamic workflow, such as conditional logic, automation, personalization, analytics, or another core product capability relevant to the user’s product.
- Supporting previews should demonstrate complementary use cases with simple controls, form fields, tables, selections, or status states.
- Use realistic hierarchy inside previews: browser chrome, field labels, controls, selected states, helper text, and one clear focal interaction.
- Do not make the previews compete with the surrounding card copy.

## Interaction
- If cards are interactive, provide a subtle hover treatment: slightly darken the border, lift the card by 1–2px, or reveal a small accent transition.
- Keep hover motion short, around 150–220ms, and respect reduced-motion preferences.
- Ensure visible focus states for keyboard users.
- The product previews may be static, but any buttons, tabs, dropdowns, or links should have believable hover, focus, and selected states.

## Accessibility and responsiveness
- Maintain strong contrast for all text and controls.
- Use semantic headings and lists, and give decorative icons empty accessible labels.
- Do not rely on colour alone to communicate selected or successful states.
- At widths below roughly 760px, switch to one column, reduce heading size, and preserve comfortable card padding of at least 20px.

## Never
- Never use logos, product names, or branded copy from the reference.
- Never reuse the reference’s exact feature names, wording, UI labels, or testimonial text.
- Never copy the reference’s illustrations, people, hand-drawn artwork, or imagery.
- Never reproduce the exact card proportions, interface screenshots, icon artwork, or decorative marks.
- Never assume the user’s product is a form builder; adapt the features, previews, language, and accent treatment to the user’s product and brand.