## 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/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106479-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106444891-full.webp
- Component on Kage: https://kage.design/component/typewise-nova-faq

## Before you start
Ask me what my product is, who it serves, and what its brand personality and visual identity are. Then apply the principles below to create an original FAQ section for my product rather than reproducing the reference.

## Design the section
Build a dark, premium FAQ component for a modern software or SaaS website. Treat the section as a calm pause after denser content: use a centered heading above a deliberately narrow reading width, then place the questions in a large rounded accordion container.

### Layout and alignment
- Use a nearly full-width section with a centered max-width container around 860–960px for the FAQ itself.
- Add substantial vertical separation before the FAQ so it feels like a distinct section.
- Center-align the section heading; align accordion question text and answers to the left.
- Stack accordion rows vertically inside one unified panel rather than using separate cards.
- Give the panel generous horizontal padding, approximately 22–28px on desktop and 18–20px on mobile.
- Keep the answer copy at a comfortable reading measure, with line-height around 1.5.
- Make the layout responsive: reduce heading size, section padding, and panel padding on narrow screens while keeping the accordion easy to scan.

### Typography hierarchy
- Use a clean contemporary sans-serif with a slightly technical, polished feel.
- Set the heading large and prominent, approximately 42–48px on desktop, medium-heavy weight, tight line-height around 1.05–1.15.
- Set question labels around 15–16px, semibold or bold, with strong contrast.
- Set answers around 15–16px, regular weight, relaxed line-height, and a softer gray so the question remains the visual anchor.
- Avoid excessive uppercase text, decorative type, or overly compressed tracking.

### Colour
- Use a deep near-black page background such as #07070A or #08080B.
- Use a subtly lighter charcoal panel surface such as #151519 or #17171C.
- Use a thin neutral border around the panel and row separators, approximately #303039 or rgba(255,255,255,0.16).
- Use off-white for the heading and questions, approximately #F4F3F5.
- Use muted gray for answers, approximately #97959D.
- Use one restrained brand accent for the expand/collapse icon, such as a cool blue-violet around #6D82FF; derive the exact accent from the user's brand.
- Ensure text and controls meet accessible contrast requirements.

### Borders, radius, and spacing
- Give the outer accordion panel a 16–18px corner radius and a 1px border.
- Keep the surface mostly flat; use little or no shadow.
- Use 24–30px vertical padding per row and subtle separators between rows.
- Maintain a clear 28–40px gap between the heading and the panel.
- Use consistent 8px-based spacing increments throughout.

### Interaction
- Make each question row a full-width button or clickable trigger with a large hit area.
- Show a compact plus/minus or chevron control at the far right; use the brand accent for the active state.
- The open row should reveal its answer with a restrained height/opacity transition, around 180–240ms, without distracting motion.
- Change border, icon, or text colour slightly on hover and keyboard focus.
- Provide a clearly visible focus ring and use accessible accordion semantics: buttons, aria-expanded, and correctly associated answer regions.
- Support one or multiple open items based on the product's content needs, but make the behavior consistent.
- On mobile, preserve the right-side control and prevent long questions from colliding with it.

## Never
- Never copy the reference's logos, product names, testimonials, statistics, or exact FAQ copy.
- Never reuse illustrations, imagery, icons, or decorative artwork from the reference.
- Never assume the user's product has the same content, brand colours, or typography.
- Never make the accordion inaccessible, hover-only, or dependent on colour alone.
- Never turn every row into a visually heavy card or add unnecessary gradients and effects.