testimonial.y2k-chrome-chat-bubbles · Chat bubbles

A testimonial pattern from Y2K Chrome, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 6; about page, section 3. Give the section root data-pattern="testimonial.y2k-chrome-chat-bubbles". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A chat thread across the grid: a mono label, then two to four glossy bubbles on 1–8 that alternate sides (every second bubble on 5–12), each with the quote at step 2 and an avatar dot, bold name and mono role.
Slots
sectionLabel, items[2..4]
Grid areas
thread 3-10 (12-column grid, 1-based inclusive spans)
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A pixel-font label on 1–12, then two to four bubbles like a chat thread: the first on 1–8, the next on 5–12, alternating sides. Each bubble: surface colour, token radius with one sharp corner (the tail, on the side it leans to), 2 px border, padded 40 px, the quote at step 2, then a row with a small accent circle (online dot), the author's screen name in bold and a pixel-font timestamp. At phone width bubbles span the full width.

Kind words

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

Hanna Lindqvist

CEO, Corvid Robotics

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

James Okafor

CMO, Fieldstack

The first agency that asked to talk to our engineers before our marketers.

Clara Mendes

COO, Tidewater Labs