faq.neobrutal-toggle-stack · Toggle stack

A faq pattern from Neo-Brutalism, drawn alone below with this design's tokens and sample copy. Used in this design on: contact page, section 2. Give the section root data-pattern="faq.neobrutal-toggle-stack". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Title block on 1–4 with a tilted label; questions on 5–12 as separate bordered boxes, a bold question beside a cross toggle, the answer below.
Slots
sectionLabel, title, faqs[4..8]
Grid areas
title 1-4 · list 5-12 (12-column grid, 1-based inclusive spans)
Notes
Every box is open: the answer shows and the toggle reads × (the plus rotated 45°); a closed box shows the upright plus. No chevrons.
Tokens
bg #FFF4DE · text #111111 · heading #000000 · accent #FF5FA2 · accent2 #00BCA1 · Archivo Black / Space Grotesk · radius 8px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Columns 1–4: a tilted accent sticker label and the h2 (step 5). Columns 5–12: 4–8 separate bordered boxes with gaps; each has the question (h3, heaviest weight) and a cross toggle on one row, the answer below. The toggle reads × while open (the plus rotated 45°) and an upright plus when closed. No chevrons, no ruled list.

FAQ

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.