## 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/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073739-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073707-full.webp
- Component on Kage: https://kage.design/component/turso-feature-grid-2

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and type system they want to use. Then apply the principles below to create an original version for that product rather than reproducing this reference.

## Build this section
Create a responsive feature-grid section for a software product website. The component should communicate a short set of foundational product principles, architectural qualities, or differentiated capabilities—not a list of generic marketing features.

### Layout and alignment
- Use a full-width section with generous horizontal padding: approximately 56–72px on desktop, reducing to 24px on mobile.
- Keep the content inside a centered max-width container of roughly 1160–1240px.
- Place a strong section heading above the grid, aligned to the left. Constrain its width so it forms a compact two-line statement rather than spanning the entire viewport.
- Arrange five equal-width cards in one row on wide screens, with a small consistent gap of approximately 14–18px.
- On medium screens, allow the cards to wrap into two or three columns; on small screens, stack them vertically while preserving their internal hierarchy.
- Each card should be a flex column so its call-to-action remains anchored near the bottom, even when descriptions have different lengths.
- Give cards a generous, consistent height on desktop, around 440px, with responsive adjustment as content and viewport width require.
- Use generous internal padding, approximately 20px, and maintain a clear vertical rhythm between index, accent rule, title, body, and link.

### Typography hierarchy
- Use a modern sans-serif with a technical, confident feel. Use a heavy or bold weight for the section heading, around 34–38px desktop with tight line-height around 1.05–1.12.
- Card indexes should be small, muted, and easy to scan, around 14px.
- Add a short accent rule below each index, approximately 46px wide and 1px high.
- Card titles should be bold and compact, around 17–19px with roughly 1.45 line-height. Let them wrap naturally; do not force every title to the same number of lines.
- Descriptions should be visibly quieter than titles: around 15–16px, regular weight, and line-height around 1.55–1.7.
- Links should be medium or semibold, around 14–15px, and may wrap across two lines. Include a small right-pointing arrow at the end.

### Colour and contrast
- Use a near-black charcoal background, approximately `#0c1012` or `#0d1113`, rather than pure black.
- Use a warm off-white for the heading and card titles, approximately `#f2f3f1`.
- Use a low-contrast cool grey for body copy and indexes, approximately `#7f8585` to `#949a99`.
- Use a restrained mint or turquoise accent for rules and links, approximately `#55e0c0` or `#63e1c4`.
- Keep the overall palette sparse. Accent colour should identify actionable or structural details, not fill large surfaces.

### Borders, radius, and surfaces
- Give every card a very subtle 1px border in a blue-grey charcoal such as `#263033` or `#293337`.
- Use a modest corner radius, approximately 14–16px. The cards should feel technical and precise, not playful or pill-shaped.
- Keep card interiors the same colour as the section background or only imperceptibly lighter; avoid shadows, gradients, glass effects, and decorative fills.
- If the design includes a section divider, use the same restrained border colour and a 1px rule.

### Interaction and responsive behaviour
- Make the entire link area comfortably tappable and preserve a clear hover/focus state.
- On hover, shift the card border slightly toward the accent colour and brighten the link; do not introduce a large transform or distracting animation.
- Animate colour and border changes subtly, around 150–200ms ease-out.
- Provide a visible keyboard focus ring using the accent colour with enough contrast against the dark background.
- Ensure the arrow remains aligned with the final line of the link and does not break awkwardly on narrow screens.
- On mobile, keep the heading left-aligned and maintain the same order: index, rule, title, description, link.
- Use semantic markup: a section with a heading, an ordered or grouped list of cards, and real links or buttons for actions.

### Content guidance
- Use the user’s own product language and write concise, specific copy.
- Give each card one clear principle or capability, a short explanatory paragraph, and an action that leads to a relevant destination.
- Keep the number of cards small enough to scan—ideally four to six—and make the cards comparable in structure without making their copy repetitive.

## Never
- Never copy the reference’s logos, product names, brand names, or proprietary terminology.
- Never reuse the reference’s exact heading, card titles, body copy, link labels, or wording.
- Never use illustrations, screenshots, icons, or imagery from the reference.
- Never reproduce the reference as a pixel-for-pixel clone; adapt the grid logic, hierarchy, and visual principles to the user’s product and brand.
- Never use low-contrast text that fails accessibility checks, excessive decoration, or hover effects that obscure the content.