testimonial.desktop-chat-window · Desktop chat window

A testimonial pattern from Desktop OS, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 5. Give the section root data-pattern="testimonial.desktop-chat-window". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Intro on 1–4; on 5–12 a messenger window where each quote is a chat bubble (surfaceAlt panel) beside a round accent2 avatar dot, name and mono role under the words.
Slots
sectionLabel, title, body, caption, email, quotes[3..3]
Grid areas
intro 1-4 · chat 5-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #E3E5DA · text #272921 · heading #121309 · accent #EDA12F · accent2 #55A9FF · Onest / Onest · radius 8px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • Intro on 1–4 (mono label, h2 at step 5, muted paragraph). On 5–12 a messenger window: three chat rows, each a 40 px round `accent2` avatar dot beside a surfaceAlt bubble (the quote at body size, then the name at 700 and a mono role on one baseline).

Kind words

From our clients

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.

Corvid Robotics — identity

hello@northfold.com

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

Layout tree (as in design/layout.json)
{
  "pattern": "testimonial.desktop-chat-window",
  "kind": "testimonial",
  "grid": {
    "intro": "1-4",
    "chat": "5-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "caption",
    "email",
    "quotes[3..3]"
  ],
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "start",
    "children": [
      {
        "el": "box",
        "span": "1-4",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight"
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body"
          }
        ]
      },
      {
        "el": "box",
        "span": "5-12",
        "bg": "surface",
        "gap": 0,
        "pad": 0,
        "children": [
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "pad": [
              2,
              4
            ],
            "align": "center",
            "justify": "between",
            "border": "bottom",
            "children": [
              {
                "el": "text",
                "color": "heading",
                "slot": "caption",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "mobile": "hide",
                "color": "textMuted",
                "slot": "email",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "box",
            "gap": 0,
            "pad": [
              6,
              6
            ],
            "children": [
              {
                "el": "repeat",
                "slot": "quotes",
                "min": 3,
                "max": 3,
                "layout": "list",
                "gap": 4,
                "of": {
                  "el": "box",
                  "mobile": "keep",
                  "dir": "row",
                  "gap": 3,
                  "align": "start",
                  "children": [
                    {
                      "el": "shape",
                      "kind": "circle",
                      "size": "sm",
                      "fill": "accent2"
                    },
                    {
                      "el": "box",
                      "bg": "surfaceAlt",
                      "gap": 2,
                      "pad": [
                        4,
                        5
                      ],
                      "children": [
                        {
                          "el": "text",
                          "slot": "body",
                          "role": "body",
                          "maxCh": 64
                        },
                        {
                          "el": "box",
                          "dir": "row",
                          "gap": 3,
                          "align": "baseline",
                          "wrap": true,
                          "children": [
                            {
                              "el": "text",
                              "slot": "title",
                              "role": "small",
                              "weight": 700
                            },
                            {
                              "el": "text",
                              "color": "textMuted",
                              "slot": "meta",
                              "role": "label",
                              "font": "mono"
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page