## 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/bolt-new/4e91875d-336e-4c47-bec8-8771acd62040-1789073974-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bolt-new/4e91875d-336e-4c47-bec8-8771acd62040-1789073921-full.webp
- Component on Kage: https://kage.design/component/bolt-new-feature-grid-3

## Before you start
Ask the user what their product is, who it serves, and what visual brand language it uses. Then apply the principles below to create an original feature-grid section tailored to that product—not a reproduction of the reference.

## Design language

Build a full-width, dark feature section that explains how the product helps different audience types or roles. Treat it as a visual proof section: concise positioning copy sits above a grid of cards, while each card pairs a role with a believable product scenario or UI preview.

### Layout and alignment
- Use a near-black page background, approximately `#101011`, with a centered content container capped around `1200–1280px`.
- Begin with a compact, centered introductory statement near the top. Use a short two-line value proposition with a maximum width of roughly `620px`.
- Create a second centered section heading with two visual levels: a muted introductory line above a brighter, heavier primary line. Keep the heading width around `700–800px`.
- Add a short supporting paragraph beneath the heading, centered and limited to approximately `680px`.
- Place the feature cards in a three-column grid on desktop with equal widths and a generous gap of about `8–12px`. On smaller screens, collapse to one column; use two columns only where the viewport comfortably supports readable card content.
- Give each card a consistent outer frame and a tall lower preview region. The role label and description should align to the same top padding across all cards.
- Let preview panels extend close to the bottom edge of each card, creating the impression that the interface continues below the fold. Keep the grid visually dense but orderly.
- Use a subtle stagger or additional cards below the first row if the product has more audiences, while preserving a clear column rhythm.

### Typography hierarchy
- Use a clean modern sans-serif with a slightly tight heading fit.
- Set the main section heading large and bold, approximately `48–64px` on desktop and `36–44px` on mobile, with line-height around `0.98–1.08`.
- Style the muted heading line in a soft gray, approximately `#858589`; style the primary line in `#f4f4f5`.
- Use role titles around `18–20px`, semibold, in near-white.
- Use descriptions around `16–17px`, with a `1.4–1.55` line-height and a muted gray such as `#a1a1a6`.
- Keep interface-preview labels smaller, around `14–16px`; secondary metadata can be `12–14px`.
- Use sentence case and short copy. Avoid making each card read like a paragraph-heavy marketing block.

### Colour and visual treatment
- Use a restrained monochrome palette: page background `#101011`, card background `#171718`, inner panel background `#19191b`, primary text `#f5f5f5`, secondary text `#a2a2a7`, and tertiary text `#717176`.
- Add a single product-specific accent for statuses, charts, buttons, or highlights. A vivid blue around `#2774ff` works well, but replace it with the user’s brand accent when appropriate.
- Use green around `#22c55e` only for positive states such as published, synced, or complete.
- Keep gradients and glow effects extremely subtle. The main visual interest should come from layered interface previews, not decorative effects.

### Borders, radius, and depth
- Give outer cards a `1px` border around `#303033` and a radius of approximately `14–16px`.
- Use nested preview panels with a slightly lighter or darker border, approximately `#29292c`, and a radius around `12–16px`.
- Separate card header and preview areas with a faint horizontal divider.
- Use a soft shadow or inset highlight sparingly; the section should feel polished and premium rather than glossy.
- Maintain generous internal padding in card headers, around `28–32px`, and approximately `22–28px` inside preview panels.

### Interface-preview content
- Make every preview directly reinforce the card’s role: examples might include version history, publishing status, analytics, a gallery of created work, or a structured task plan.
- Use realistic but generic UI primitives such as search fields, tabs, status dots, metrics, line or area charts, thumbnails, checklists, timestamps, and compact action buttons.
- Keep previews partially cropped or visually continued at the card’s lower edge to create depth, but ensure the important information remains legible.
- Use low-contrast separators and quiet metadata so the preview supports the headline instead of competing with it.
- If charts or thumbnails are used, keep them abstract and product-relevant; do not rely on decorative stock imagery.

### Interaction
- If the cards are interactive, add a subtle hover treatment: slightly brighten the border, lift the card by `2–4px`, or increase the preview contrast. Keep transitions around `180–240ms` with an ease-out curve.
- Do not make the entire section dependent on hover to communicate meaning. All role labels, descriptions, and core preview information must remain visible.
- On mobile, prioritize readable card content and allow previews to retain a useful minimum height rather than shrinking into tiny screenshots.
- Ensure focus states are clearly visible for keyboard users, using the brand accent or a light outline.

## Never
- Never copy the reference’s logos, product names, role names, interface labels, URLs, social icons, or marketing copy.
- Never reproduce the exact screenshots, charts, thumbnails, illustrations, or imagery from the reference.
- Never use the reference product’s distinctive visual assets or branded accent treatment as-is.
- Never make the section a pixel-for-pixel clone; preserve the information architecture and design principles while inventing new content for the user’s product.
- Never use inaccessible low-contrast text, tiny controls, or hover-only information.