faq.claymorphism-bubble-faq · Bubble FAQ

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

Rule
A surfaceAlt card in 1–4 with h2 at step 5, a line and a 1:1 clay object; four to six surface question bubbles stacked in 5–12, question bold at step 1 and the answer always visible.
Slots
title, body, image, faqs[4..6]
Grid areas
intro 1-4 · questions 5-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F2EDFF · text #2B2340 · heading #1E1733 · accent #FF64AC · accent2 #00C09F · Fredoka / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A surfaceAlt card in 1–4: h2 at step 5, a line and a 1:1 clay object at the bottom. In 5–12, four to six white question bubbles stacked 16 px apart: question at step 1 (weight 700), answer in muted body text, all answers visible.

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.

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.