## 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-1789060954-7.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-6

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

## Build this section
Create a responsive feature/use-case grid that helps visitors quickly recognize how the product can be used across different audiences, teams, or jobs to be done. The section should feel editorial and approachable: a short introductory heading and supporting sentence sit above a large, lightly bordered container holding six category items and a single browse/discovery CTA.

### Layout and alignment
- Place the section inside a centered page wrapper with a comfortable maximum width of approximately 1100–1200px.
- Above the grid, use a left-aligned heading and one short explanatory line. Keep the heading compact and allow a subtle brand accent, such as a hand-drawn underline or restrained highlight, only if it fits the user's brand.
- Use one large rounded rectangular panel for the categories. Give the panel generous internal padding, approximately 32–40px on desktop.
- Arrange six items in a 3-column by 2-row grid on desktop. Keep equal column widths and align each item to the same left edge. Use a consistent vertical gap of roughly 36–48px between rows.
- Each item contains, in order: a small accent icon, a bold category title, and three concise example lines. Place the CTA beneath the grid, aligned to the left within the panel.
- Collapse to two columns on medium screens and one column on small screens. Preserve clear grouping and avoid overly dense rows.
- Ensure the panel's height is driven by content, with enough breathing room below the final row and around the CTA.

### Typography hierarchy
- Use a friendly modern sans-serif, or the product's existing typeface.
- Intro heading: bold, approximately 36–48px on desktop, with tight line-height around 1.05–1.15.
- Supporting text: 18–22px, medium or regular weight, with a relaxed line-height.
- Category titles: 18–20px, bold or semibold.
- Example lines: 16–17px, regular weight, with a 1.55–1.7 line-height. Keep each line short and benefit-oriented.
- The category title must be visually stronger than the examples, while icons remain secondary to the text.

### Spacing and shape
- Use 8px-based spacing tokens where possible.
- Leave approximately 20–24px between an icon and its category title, and 8–12px between the title and the example list.
- Use a panel radius of 12–16px and a subtle 1px border.
- Use a compact pill-like or softly rounded rectangular CTA with horizontal padding around 16–20px and vertical padding around 10–12px.

### Colour
- Keep the primary background near white, approximately `#FFFFFF` or `#FCFCFB`.
- Use near-black for headings and CTA text, approximately `#111111`.
- Use a softer charcoal for supporting copy, approximately `#3F3F3F` or `#4A4A4A`.
- Use a very light neutral border, approximately `#D8D8D8` to `#E2E2E2`.
- Choose one vivid brand accent for icons and optional decorative marks; a magenta/pink reference value would be around `#D83CC8`, but adapt this to the user's brand.
- The CTA should use the product's strongest dark or primary colour with high-contrast text.

### Icons and interaction
- Use simple, lightweight line icons with a consistent stroke weight and size around 22–24px. Choose icons that suggest the category without overpowering the copy.
- The grid can remain static, but make the CTA clearly actionable and keyboard accessible.
- If category items are interactive in the user's product, add a subtle hover state: a small background tint, accent border, or 1–2px upward translation. Do not introduce large animations.
- Add visible focus styles and preserve sufficient colour contrast.
- On touch devices, maintain generous tap targets and avoid relying on hover to communicate meaning.

### Content guidance
- Use six genuinely distinct audiences, workflows, or use cases relevant to the user's product.
- Give each category three short examples that explain outcomes or tasks, not generic feature names.
- Keep the CTA label action-oriented, such as browsing templates, exploring use cases, or viewing solutions, based on the user's product.

## Never
- Never copy the reference's logos, product names, exact copy, category labels, CTA wording, or brand-specific claims.
- Never reuse the reference's illustrations, decorative artwork, photography, or imagery.
- Never make the grid a pixel-for-pixel recreation; adapt the number of categories, content, accent treatment, and visual personality to the user's product.
- Never use icons as substitutes for accessible text, and never hide essential information behind hover interactions.