## 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/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067456-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/beehiiv-com/23eb8ac3-d7aa-449f-95ad-92bcd925810d-1789067406-full.webp
- Component on Kage: https://kage.design/component/beehiiv-cta

## Before you start
Ask what the user's product is, who it is for, and what brand direction, colours, typefaces, and tone they want. Then apply the principles below to create an original FAQ or conversion-support section for that product—not a copy of the reference.

## Design the section
Build a dark, editorial FAQ accordion that can sit near the end of a marketing page and reduce hesitation before conversion.

### Layout and alignment
- Use a full-width dark section with a centered inner container, approximately 640–760px wide on desktop.
- Keep the question list left-aligned inside the container; do not center the individual questions.
- Stack rows vertically with a consistent height of roughly 76–80px on desktop and 68–76px on mobile.
- Each row should contain a question on the left and a compact downward chevron on the far right, vertically centered.
- Extend a thin divider across the complete inner container width between rows. The list may begin without a prominent outer border, keeping the composition quiet and open.
- On smaller screens, reduce horizontal padding while preserving comfortable touch targets and readable line lengths.

### Typography
- Use a modern sans-serif with a clean, slightly rounded or neutral character.
- Questions should be medium-to-semibold weight, approximately 18–20px on desktop and 16–18px on mobile.
- Use a tight but comfortable line height around 1.35–1.45; allow long questions to wrap naturally on mobile.
- Avoid supporting labels, oversized headings, or decorative copy unless the user's product needs an introductory context block.

### Colour
- Use a near-black blue-violet background, approximately `#080619` or `#0B091C`.
- Set question text to a soft white, approximately `#F4F2F7`.
- Use muted lavender-grey for chevrons, approximately `#AAA7B8`.
- Set dividers to a low-contrast slate-lavender, approximately `#4A4859`, with enough contrast to define rows without becoming prominent.
- Adapt these values to the user's brand palette while maintaining high text contrast and a subdued divider treatment.

### Borders, radius, and surfaces
- Use 1–2px horizontal rules; avoid card borders around each individual item.
- Keep the section background flat rather than introducing gradients, shadows, or layered cards.
- Use no visible corner radius for the list itself; the visual language should feel like an editorial index rather than a collection of tiles.

### Interaction
- Make every row a keyboard-accessible button or disclosure trigger with a generous hit area.
- On hover, use a subtle text or chevron colour shift and, optionally, a very slight background tint; do not create a loud animated state.
- Rotate the chevron about 180 degrees when a row opens, with a short, smooth transition.
- Reveal the answer below the question using a restrained height/opacity transition, keeping dividers aligned and avoiding layout jumps where possible.
- Include visible focus styles that work against the dark background.
- Ensure only one item opens at a time unless the product's content benefits from multiple expanded answers.

## Never
- Never use logos, product names, brand-specific FAQ copy, or exact wording from the reference.
- Never copy the reference's visual identity literally; translate the structure into the user's product and brand.
- Never use illustrations, stock imagery, decorative graphics, or unrelated icons.
- Never sacrifice keyboard access, focus visibility, contrast, responsive behaviour, or touch target size for visual minimalism.