## 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/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073963-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mistral-ai/b4bd1aa3-e31c-42a6-8066-6d42fc3e7f45-1789073922-full.webp
- Component on Kage: https://kage.design/component/mistral-feature-grid

## Before you start
Ask what the user's product does, who it is for, and what visual brand it uses. Then apply the principles below to create an original feature-grid section for that product—not a copy of the reference.

## Goal
Build a premium, editorial feature-grid section that presents several related product capabilities as a unified suite. The section should feel calm and spacious at first glance, then reveal a deliberately irregular composition of feature tiles with clear hierarchy and concise supporting text.

## Design language

### Layout and alignment
- Use a full-width, mostly off-white section with generous vertical breathing room.
- Start with a large, centered section heading positioned well above the grid; keep the heading width narrow enough to feel intentional.
- Place the feature grid inside a wide container, using a structured column system rather than a conventional equal-card grid.
- Combine tile sizes: include one prominent wide tile, a pair of smaller adjacent tiles, and one or two taller side tiles. Allow some tiles to begin or end at different vertical positions to create an architectural, asymmetric rhythm.
- Keep all major tile edges aligned to an underlying column and row system, even when the overall composition appears irregular.
- Include restrained negative-space or decorative geometric blocks around the grid only if they support the product's brand; these should never compete with the feature content.
- On smaller screens, collapse into a single-column or two-column flow while preserving feature priority and readable spacing. Avoid horizontal overflow.

### Typography hierarchy
- Use a modern sans-serif with a clean, neutral character and slightly tight headline tracking.
- Set the section heading in a large, bold display size, approximately 48–64px on desktop and 36–44px on mobile.
- Set tile titles in a strong 24–30px size, with larger tiles allowed a slightly larger title.
- Supporting descriptions should be 14–16px, with relaxed line-height and a muted but highly legible colour.
- Keep copy short: one title and one sentence per tile. Use sentence case and avoid dense feature lists.
- Anchor labels and descriptions toward the lower portion of each tile when the tile has generous empty space, creating an editorial rather than dashboard-like feel.

### Colour
- Use a warm near-white background, approximately `#FAFAF8` or `#F8F8F6`.
- Use near-black text, approximately `#111111`.
- Use very light neutral borders and dividers, approximately `#DCDCD8`.
- Give each capability a small, simple colour accent—such as a square badge, glyph, or top marker—in a restrained palette of coral red (`#F05A43`), vivid blue (`#168AD8`), pale cyan (`#62C4E8`), warm orange (`#F28A16`), or another brand-appropriate set.
- Keep most tile surfaces the same as the page background. If contrast is needed, use a subtle warm grey panel around `#EEEDE7` rather than shadows or gradients.
- Maintain strong contrast for text and do not let decorative accents become the primary visual focus.

### Borders, radius, and surfaces
- Use thin, precise 1px borders around tiles and key grid divisions.
- Prefer square corners or a very small radius, approximately 0–2px, to preserve the engineered, modular quality.
- Avoid drop shadows, glass effects, heavy cards, and excessive rounding.
- Let adjacent tile borders meet cleanly so the composition reads as one connected system rather than a collection of floating cards.
- Use generous internal padding, approximately 24–32px on desktop and 18–22px on mobile.

### Tile content and interaction
- Give every tile a small visual identifier near its upper-left corner, using a simple abstract glyph or coloured block that is original to the user's product.
- Use the available empty space intentionally; do not fill every area with imagery or controls.
- If tiles are interactive, make the whole tile a clear link or button with a visible hover state: slightly darken the surface, shift the accent, or reveal a small arrow. Keep the transition subtle, around 150–200ms.
- Add keyboard focus states with a clear outline and ensure the entire interactive tile is accessible.
- Use semantic headings and descriptive links. The visual order and DOM order should remain logical on mobile.
- If the section continues into another content area, separate it with a thin horizontal rule and preserve the same left alignment system.

## Never
- Never copy the reference's logos, product names, wording, icons, glyphs, or brand marks.
- Never use the reference product's exact feature labels or descriptions; write new copy for the user's product.
- Never reproduce the exact tile arrangement if a different composition better fits the user's content.
- Never use illustrations, photography, or imagery from the reference.
- Never add gradients, glossy effects, heavy shadows, excessive rounded corners, or a generic equal-card dashboard layout.
- Never sacrifice responsive behaviour, text contrast, keyboard accessibility, or semantic structure for visual similarity.