## 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/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106639-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106570706-full.webp
- Component on Kage: https://kage.design/component/thousand-cta

## Before you start
Ask the user what their product does, who it is for, and what visual brand they want to express. Then apply the principles below to create an original FAQ or reassurance section for that product—not a copy of the reference.

## Design the section
Build a quiet, editorial FAQ section that helps visitors resolve common objections before they take the primary action. Use the user's own questions, answers, terminology, and brand voice.

### Layout and alignment
- Place the section on a warm, near-white canvas with a wide horizontal container, approximately 1180–1240px maximum width.
- Add generous vertical breathing room above and below the component, roughly 120–160px on desktop.
- Center a short eyebrow above the content grid. Use it as a compact section label, not a large headline.
- Arrange FAQ cards in a two-column grid on desktop with an even gap of approximately 14–18px.
- Keep all cards aligned to a consistent grid and give each row equal visual weight where possible.
- Collapse to one column on narrow screens, preserving comfortable side padding of roughly 20–24px.
- Let card height follow its content, but maintain a consistent minimum height so the grid feels orderly.

### Typography hierarchy
- Use a clean sans-serif for questions and answers, with a subtle technical or monospace face only for the eyebrow if it suits the product brand.
- Set the eyebrow in small uppercase lettering with generous tracking, approximately 11–12px and 0.22–0.3em letter spacing.
- Set questions in a semibold 16–18px size with a compact line height.
- Set answers in a softer 15–16px regular weight with a 1.45–1.6 line height for easy scanning.
- Keep text left-aligned inside every card and avoid oversized display typography.

### Colour and surfaces
- Start with a warm ivory background, approximately #F5F1E7 or a brand-appropriate equivalent.
- Use very light cream card surfaces, approximately #FFFDF8, creating only a subtle contrast with the page background.
- Use near-black charcoal for questions, approximately #25241F.
- Use muted olive-gray or warm gray for answers, approximately #77766C.
- Keep contrast accessible; the muted answer colour should still meet readable contrast requirements.

### Borders, radius, and spacing
- Give each card a thin, low-contrast border around #DEDACF or an equivalent brand-neutral tone.
- Use a restrained corner radius of approximately 14–16px—soft, but not pill-shaped.
- Pad cards generously: around 26–28px horizontally and 24–26px vertically on desktop; reduce slightly on mobile.
- Keep 8–12px between the question and its answer.
- Avoid shadows or use only an almost imperceptible shadow; the structure should come from spacing and borders.

### Interaction
- If the FAQ is static, preserve the calm card layout and do not add unnecessary controls.
- If answers need to be expandable, use the same card styling for an accordion: make the full question row keyboard-accessible, add a discreet plus/minus indicator, and animate height and opacity gently.
- On hover or focus, use a very subtle border-colour shift or surface change rather than a dramatic lift.
- Ensure visible keyboard focus states and semantic headings/buttons for accessibility.

## Never
- Never reuse the reference's logos, product names, brand copy, questions, answers, or exact wording.
- Never reproduce the reference page as a pixel-for-pixel clone.
- Never include illustrations, decorative imagery, or invented screenshots from the reference.
- Never use the reference product's distinctive text snippets or technical terms unless they genuinely belong to the user's product.
- Never sacrifice readability for an overly sparse or purely aesthetic layout.