Design analysis

The FAQ uses a two-column help-desk layout: context and contact guidance on the left, numbered accordion questions on the right. The dark bordered container gives the section a clear endpoint before the conversion area.

Prompt preview

## 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/kerno-1-0/454d79dc-d228-4b14-889b-ec4f181556d7-1792130642-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/kerno-1-0/454d79dc-d228-4b14-889b-ec4f181556d7-1792130514699-full.webp
- Component on Kage: https://kage.design/component/kerno-1-0-faq

## Before you start
Ask what questions users most often have about the user's product, what support channel is available, and whether answers should be concise or technical. Create original questions for that product.

Build a contained FAQ section styled like a technical help desk. Use a left column with a small label, heading, and short support sentence, and a right column with four to six accordion rows. Each row should have a small numbered identifier, a question, and a plus/minus control; opening a row should reveal an answer without shifting unrelated content awkwardly. Use #0c1119 background, #111720 container panels, 1px borders #252e38, white-gray headings #dce3e8, muted copy #84909b, and a restrained accent for identifiers and links. Use 26–32px heading text, 13–15px questions, and 11–12px answers. Keep row heights generous enough for touch, add visible keyboard focus, and stack the columns on mobile.

Never use the reference questions, product name, help links, logo, copy, or exact accordion styling.