list.scandinavian-soft-pebble-list · Pebble list

A list pattern from Scandinavian Soft, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="list.scandinavian-soft-pebble-list". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Intro in columns 2–5; four to eight items in 7–11, each led by a small accent circle instead of a bullet or number.
Slots
sectionLabel, title, body, items[4..8]
Grid areas
intro 2-5 · list 7-11 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #69A382 · accent2 #5DA29C · Nunito / Nunito Sans · radius 16px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Intro stack in 2–5 (eyebrow, h2 weight 400, muted paragraph), top-aligned. Four to eight items in 7–11, 32 px apart, each a row: a small accent circle aligned to the title's first line, then an h4 at weight 400 and a muted small paragraph (≤48 ch). No dividers between items.

Index

Services

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.

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

Positioning workshop

A day with your leadership to agree on one story.

Identity design

Logo, type, colour, motion and a working toolkit.

Website

Strategy, copy, design and build in Webflow or Next.js.

Launch support

Training, templates and a month of on-call design.

Retainer

A senior designer embedded two days a week.

Layout tree (as in design/layout.json)
{
  "pattern": "list.scandinavian-soft-pebble-list",
  "kind": "list",
  "grid": {
    "intro": "2-5",
    "list": "7-11"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "items[4..8]"
  ],
  "tree": {
    "el": "grid",
    "gap": 6,
    "children": [
      {
        "el": "box",
        "span": "2-5",
        "alignSelf": "start",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "sectionLabel",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "weight": 400,
            "maxCh": 18
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 36
          }
        ]
      },
      {
        "el": "repeat",
        "span": "7-11",
        "slot": "items",
        "min": 4,
        "max": 8,
        "layout": "list",
        "gap": 4,
        "of": {
          "el": "box",
          "dir": "row",
          "gap": 3,
          "align": "start",
          "children": [
            {
              "el": "shape",
              "kind": "circle",
              "size": "sm",
              "fill": "accent"
            },
            {
              "el": "box",
              "gap": 1,
              "children": [
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h4",
                  "weight": 400
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small",
                  "maxCh": 48
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/list.scandinavian-soft-pebble-list.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>list.scandinavian-soft-pebble-list — Scandinavian Soft</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .intro { grid-column: 2 / 6; align-self: start; display: grid; gap: calc(var(--unit) * 3); }
  .intro h2 { font-size: var(--step-4); max-width: 18ch; }
  .intro p:last-child { max-width: 36ch; }
  ul { grid-column: 7 / 12; list-style: none; padding: 0; display: grid; gap: calc(var(--unit) * 4); }
  li { display: flex; gap: 24px; align-items: flex-start; }
  li .dot { margin-top: 0.45em; }
  li h4 { font-size: var(--step-1); font-weight: 500; }
  li p { max-width: 48ch; }
  @media (max-width: 640px) { ul { margin-top: calc(var(--unit) * 6); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <div class="intro">
      <p class="eyebrow muted">What a stay includes</p>
      <h2>Quiet things, done carefully.</h2>
      <p class="muted">Every room is prepared by hand the morning you arrive.</p>
    </div>
    <ul>
      <li><span class="dot" aria-hidden="true"></span><div><h4>Linen and wool</h4><p class="small muted">Stonewashed linen sheets and a wool throw woven twenty minutes up the coast.</p></div></li>
      <li><span class="dot" aria-hidden="true"></span><div><h4>A wood-fired sauna</h4><p class="small muted">Lit at four every afternoon, with a path straight down to the water.</p></div></li>
      <li><span class="dot" aria-hidden="true"></span><div><h4>Breakfast at the long table</h4><p class="small muted">Rye bread, cultured butter, eggs from the farm next door.</p></div></li>
      <li><span class="dot" aria-hidden="true"></span><div><h4>No television</h4><p class="small muted">A shelf of books, a record player and a view of the pines instead.</p></div></li>
    </ul>
  </div>
</section>
</body>
</html>

Other patterns in this design

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