testimonial.claymorphism-speech-bubbles · Speech bubbles

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

Rule
A big surface speech-bubble card in 1–8 (quote at step 4, a round accent avatar blob beside the name and role) and two smaller surfaceAlt bubbles stacked in 9–12.
Slots
quote, author, role, quotes[2..2]
Grid areas
main 1-8 · side 9-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 big white speech-bubble card in 1–8 (padding 80 px): the quote at step 4 (weight 500) at the top, a round accent avatar dot beside the bold name and muted role at the bottom. Two surfaceAlt bubbles stacked in 9–12, each a quote at body size (weight 600) and an accent2 dot with the name.
“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

They understood our product faster than our own sales team did.

Hanna Lindqvist

Demo requests doubled in the quarter after launch. That paid for the project.

James Okafor