faq.dot-faq-index · FAQ index

A faq pattern from Dot Matrix, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 9; contact page, section 2. Give the section root data-pattern="faq.dot-faq-index". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Title, a line and a ghost pill in 1–4; five ruled questions across 5–12, each a mono index, the question in the body face and the answer muted, all visible.
Slots
sectionLabel, title, body, cta, faqs[5..5]
Grid areas
intro 1-4 · questions 5-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #000000 · text #E6E6E6 · heading #FFFFFF · accent #D71921 · accent2 #FFFFFF · Doto / Space Grotesk · radius 24px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • Columns 1–4: pill label, title at step 5, a muted line and an outlined pill to support. Columns 5–12: five questions ruled with hairlines, each a mono index in the link colour beside the question (body face, 700) on one baseline, then the muted answer (≤64 ch). All answers visible.

FAQ

Working together

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Start a project

01

How big are your projects?

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

02

Do you work with startups?

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

03

Do you build the website too?

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

04

Where are you based?

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

05

Can we hire you for a single deliverable?

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