## 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/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060644-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mintlify-com/71224961-d985-451b-9e35-e02eddcee178-1789060616-full.webp
- Component on Kage: https://kage.design/component/mintlify-feature-grid

## Before you start
Ask the user what their product is, who it is for, and what their brand personality, colours, typography, and key features are. Then apply the principles below to create an original feature-grid section for that product rather than reproducing the reference literally.

## Build this section
Create a responsive feature section for a modern software product. It should combine a concise editorial heading row with an asymmetric bento grid of feature cards.

### Layout and alignment
- Place the section inside a centered content container with a maximum width of approximately 1060–1180px.
- Use generous vertical whitespace above and below the section, with a desktop top padding of roughly 140–170px.
- Add a slim vertical accent rule at the left edge of the heading block. Keep it subtle and align it with the heading’s first line.
- Use a two-part heading row: a large text block on the left and one compact primary CTA on the right, vertically aligned around the middle of the heading.
- Keep the heading block to a readable width of about 560–650px. Use a two-line primary statement followed by a lighter, muted supporting line.
- Under the heading, create a 3-column bento grid with approximately 14–18px gaps.
- On desktop, use this card arrangement:
  - Row 1: one card spanning two columns, plus one card spanning one column.
  - Row 2: three equal-width cards.
  - Row 3: one card spanning all three columns.
- Give the first row cards a shorter height, the middle row cards a taller height, and the final full-width card a similarly generous height. The exact proportions should adapt to the product’s content.
- On tablet, reduce the grid to two columns while preserving visual emphasis. On mobile, stack cards in one column and keep the lead card and final card visually prominent.
- Keep all card labels anchored to the lower-left corner rather than placing them immediately below the visual content.

### Typography hierarchy
- Use a clean contemporary sans-serif with a neutral, highly legible appearance. Use the product’s own font if available.
- Main heading: approximately 34–42px on desktop, 1.03–1.08 line-height, medium or semibold weight, tight tracking.
- Supporting heading line: the same or slightly smaller size, muted colour, and regular weight so it reads as a continuation rather than a separate title.
- CTA text: approximately 13–14px, medium weight.
- Card labels: approximately 15–16px, medium weight, with compact line-height.
- Avoid excessive all-caps, decorative display fonts, or dense paragraphs inside the cards.

### Colour and surfaces
- Use a clean white or near-white page background, approximately `#FFFFFF` or `#FCFCFB`.
- Use a very slightly warm card surface, approximately `#F8F7F4` or `#F7F5F2`, so the cards separate without heavy contrast.
- Use near-black text such as `#101211` for primary content and a cool grey such as `#737978` for secondary heading text.
- Use a restrained brand accent for the vertical rule, approximately a muted green `#3DA77D`, but derive the exact accent from the user’s brand.
- Keep contrast accessible and do not rely on the accent colour alone to communicate meaning.

### Borders and radius
- Give every card a thin, low-contrast border around `1px solid #E2E2DE`.
- Use a moderate corner radius of approximately 11–14px. Keep the radius consistent across cards and the CTA.
- Avoid strong shadows. If depth is needed, use only a very subtle shadow such as `0 1px 2px rgba(16,18,17,0.03)`.
- Keep the grid edges and heading alignment visually precise; the overall effect should feel architectural and calm.

### Card content and interaction
- Each card should have a distinct feature title and a large open area for a product-specific visual, interface preview, diagram, or animated treatment.
- Do not fill every card with equal visual density. Vary the content scale and composition so the lead card and full-width card feel more important.
- Keep card titles visible by default at the bottom edge with consistent horizontal and bottom padding of about 30–34px.
- If cards are interactive, make the entire card a keyboard-accessible link or button. Add a restrained hover state: slightly deepen the border, lift the card by 1–2px, or reveal a subtle product preview transition.
- Preserve clear focus-visible outlines for keyboard users.
- The primary CTA should have a dark filled surface, light text, compact horizontal padding, and a small directional affordance. On hover, lighten or shift the surface slightly without becoming flashy.
- Respect reduced-motion preferences and ensure the section remains fully understandable without animation.

### Responsive behaviour
- At widths below approximately 900px, let the heading stack and move the CTA beneath it or align it to the start.
- At widths below approximately 640px, use a single-column card stack, reduce heading size to roughly 30–34px, and reduce section padding while retaining generous breathing room.
- Ensure labels never overlap visuals, and allow card heights to expand when titles or product-specific content need more room.

## Never
- Never copy the reference’s logos, product names, feature names, or marketing copy.
- Never reuse the reference’s illustrations, interface screenshots, animations, icons, or imagery.
- Never make the implementation dependent on the reference brand or its assets.
- Never reproduce the exact text, visual artwork, or product-specific demonstrations from the reference.
- Never sacrifice accessibility, responsive behaviour, or the user’s existing brand system in order to imitate the source.