Preview image. Unlock full-res
Dark FAQ section with a serif headline, numbered accordion rows, and an orange accent divider on the expanded answer.
Summary
Dark FAQ section with a serif headline, numbered accordion rows, and an orange accent divider on the expanded answer.
Visual description
Deep navy background with faint blueprint grid lines and corner crosshairs framing the section. A small cyan FAQ label sits above a large centered headline mixing bold sans (Common) with italic serif (questions). Ten numbered FAQ rows stack vertically; each shows a two-digit index, bold white question text, and a chevron on the right. Item 01 is expanded with light gray answer copy beneath the question and an upward chevron; a thin orange horizontal rule separates it from the collapsed items below. Collapsed rows are divided by subtle dark horizontal lines with downward chevrons.
Key takeaway
The numbered accordion format gives long FAQ lists scanability without losing the clean single-column layout. The orange rule under the open answer is a small accent that breaks up an otherwise monochrome list. Mixing serif italics in the headline keeps a data product from feeling purely utilitarian.
Reuse notes
Strong pattern for B2B SaaS or developer-facing products with many policy or product questions. Works best on dark backgrounds with one warm accent color. Needs real, concise answers; the numbered index implies a comprehensive list rather than a short teaser.
