## 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/basedash-in-espanol-francais-portugues/b3381e01-f9b6-42c9-8798-975c026618b1-1789106702-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/basedash-in-espanol-francais-portugues/b3381e01-f9b6-42c9-8798-975c026618b1-1789106655341-full.webp
- Component on Kage: https://kage.design/component/basedash-in-espanol-francais-portugues-feature-grid-2

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

## Design the section
Build a spacious, centered feature section that communicates an AI-powered way to explore a product's data, workflows, or capabilities.

### Layout and alignment
- Use a full-width, very light warm-neutral section with a centered content column.
- Place a large headline at the top, centered, followed by one concise explanatory sentence with a comfortable measure of roughly 600–700px.
- Below the intro, create a two-row grid of compact feature cards. Use 3–4 visible columns on desktop, with additional cards allowed to extend beyond the main viewport or be softly clipped to suggest a broader library of examples.
- Keep cards aligned to a consistent grid, but let the central interaction layer overlap the cards slightly so it becomes the visual focal point.
- Add a centered floating prompt/input panel across the middle of the grid. It should feel like an active example query, not a conventional form: muted peach or cream fill, subtle border, generous padding, and a small text cursor or interaction cue.
- On narrower screens, switch to a one-column or two-column grid, remove awkward horizontal clipping, and place the prompt panel in normal flow or overlap it only when it remains readable.
- Give the section generous vertical whitespace before the next feature section. If a second section follows, preserve its own centered heading and supporting copy rather than merging the two compositions.

### Typography
- Use a modern sans-serif with a clean, slightly humanist feel.
- Set the primary heading large and light-to-regular in weight, approximately 46–56px on desktop with tight line-height around 1.05–1.15. Scale it down responsively to approximately 34–40px on mobile.
- Use medium-gray supporting text at roughly 17–19px with line-height around 1.45.
- Card labels should be small, quiet, and category-like, around 12–14px. Card descriptions should be 16–17px with relaxed line-height.
- The floating prompt should use darker, highly legible body text around 16–18px and may include a subtle caret to imply live input.

### Colour
- Start with a warm off-white background close to `#FAF8F5` or `#FBF9F6`, adapting it to the user's brand.
- Use near-black text such as `#171614` for headings and `#262421` for important interactive text.
- Use a softer neutral gray such as `#686560` for descriptions and labels.
- Use a very light gray-beige border around cards, approximately `#DDDAD4` with 70–90% opacity.
- Give the active prompt a restrained warm tint near `#FBEBDD` or `#F7E7D8`; keep the accent subtle rather than saturated.
- Ensure all text meets accessible contrast requirements, especially inside the low-contrast card examples.

### Cards, borders, and radius
- Use white or near-white card surfaces that are only slightly distinct from the section background.
- Apply 1px hairline borders and a medium rounded corner, approximately 10–14px.
- Keep card padding around 16–18px, with a clear separation between the category label and the example sentence.
- Avoid heavy shadows. If elevation is needed, use a very soft shadow such as `0 4px 18px rgba(30, 25, 20, 0.05)`.
- The floating prompt should have a slightly larger radius, around 10–14px, and a subtle shadow or border that helps it sit above the grid.

### Interaction and motion
- Treat each card as hoverable or selectable: on hover, slightly strengthen the border, raise contrast, or lift the card by 1–2px.
- The active prompt can show a blinking caret, a gentle focus ring, or a short type-in animation, but motion must remain restrained and respect reduced-motion preferences.
- If the cards are carousel content, provide intentional controls or accessible keyboard navigation instead of relying only on clipped content.
- Make the whole interaction understandable without animation: the cards must still read as useful examples when static.

### Content structure
- Use short, realistic examples relevant to the user's product: organize them by useful categories such as analytics, operations, marketing, finance, or support.
- Each card should contain a category label and one plain-language question or action.
- The active prompt should be a concise, specific question that demonstrates synthesis or decision support without pretending to be a real result.

## Never
- Never reuse logos, product names, brand names, or identifying copy from the reference.
- Never copy the exact headline, card questions, category labels, or active prompt.
- Never reuse illustrations, screenshots, imagery, icons, or decorative assets from the reference.
- Never reproduce the reference's exact card count, dimensions, spacing, or visual arrangement pixel-for-pixel.
- Never sacrifice readability for the clipped-carousel effect, and never make the component dependent on animation to communicate its purpose.