## 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/mastra-factory/e98dc23c-cafd-4086-ae60-932f10b41f0f-1789106665-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mastra-factory/e98dc23c-cafd-4086-ae60-932f10b41f0f-1789106606408-full.webp
- Component on Kage: https://kage.design/component/mastra-factory-faq

## Before you start
Ask what the user's product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an FAQ section tailored to that product rather than reproducing this reference.

## Build this section
Create a dark, editorial FAQ section for a modern software product. The section should feel calm, high-contrast, spacious, and trustworthy, with a simple question list that is easy to scan.

### Layout and alignment
- Use a full-width near-black section with a centered content column and generous horizontal gutters.
- Place a small, left-aligned section heading above the FAQ list; keep it visually quieter than a hero headline.
- Put all questions inside one large rounded panel that spans the available content width.
- Use a single vertical list. Each row should align its question text to the left and its disclosure control to the far right.
- Keep the panel width responsive: wide and roomy on desktop, with reduced outer padding and full-width behavior on mobile.
- Use consistent row heights and internal padding so the list reads as a deliberate rhythm rather than a collection of cards.

### Typography hierarchy
- Use a clean contemporary sans-serif, or the product's existing brand font.
- Set the section heading in a compact medium weight, approximately 20–24px on desktop.
- Set questions larger than the heading, approximately 21–24px on desktop and 17–19px on mobile, with regular-to-medium weight and comfortable line height.
- Avoid excessive text styling; the question itself should carry the hierarchy.

### Spacing
- Give the section substantial top and bottom whitespace.
- Leave approximately 28–40px between the heading and the panel.
- Use approximately 32–40px horizontal padding inside the panel on desktop and 18–24px on mobile.
- Give each row approximately 24–28px of vertical padding, with enough space for long questions to wrap cleanly.

### Colour and surfaces
- Use a near-black page background around `#070707` to `#0A0A0A`.
- Use a subtly lighter FAQ panel, approximately `#101010` to `#141414`.
- Use primary text around `#F2F2F2` and secondary or heading text around `#C8C8C8`.
- Use low-contrast dividers around `#292929` to `#343434`.
- Keep the palette monochrome unless the user's brand requires an accent; if an accent is introduced, reserve it for focus or expanded-state feedback rather than decorating every row.

### Borders and radius
- Give the outer panel a 1px solid border in a subtle charcoal, approximately `#292929`.
- Use a large radius, approximately 28–34px on desktop and 20–24px on mobile.
- Use 1px horizontal separators between rows, but not above the first or below the last row unless needed for visual balance.
- Avoid individual row cards, heavy shadows, or strong gradients. A barely perceptible dark shadow is acceptable if the panel needs separation from the page.

### Interaction
- Make each entire row clickable or keyboard-activatable, not only the chevron.
- Show a small right-facing chevron for collapsed rows, aligned consistently with the text baseline or centered vertically in the row.
- On hover, slightly brighten the question text or divider without shifting layout.
- On focus, show a clear accessible focus ring or high-contrast outline around the interactive row.
- On expansion, rotate the chevron smoothly and reveal the answer beneath the question with a restrained height/opacity transition.
- Allow one or multiple items to be open according to the product's content needs, but keep the interaction predictable.
- Use semantic disclosure elements where possible, support keyboard navigation, and expose expanded state to assistive technology.

### Content
- Use 6–8 practical questions that address the product's core concerns, such as what it does, availability, deployment, use cases, collaboration, compatibility, and user control.
- Write concise answers that are genuinely useful when a row is opened.
- Use the user's own product terminology and tone; do not invent a generic brand voice if one already exists.

## Never
- Never copy the reference's logos, product names, or branded terminology.
- Never reuse the reference's exact question copy or answer copy.
- Never copy illustrations, imagery, icons, or decorative assets from the reference; use a neutral chevron or the user's icon system.
- Never make the FAQ a pixel-for-pixel replica; adapt proportions, typography, content, and colours to the user's product and brand.
- Never sacrifice contrast, keyboard access, responsive behavior, or visible focus states for visual similarity.