list.y2k-chrome-playlist · Playlist

A list pattern from Y2K Chrome, 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="list.y2k-chrome-playlist". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Items as a media-player track list inside one rounded panel with 48 px section padding: step-3 pixel track number, square cover, step-2 title, pixel duration/meta and a small play pill per row.
Slots
title, meta, items[4..8]
Grid areas
panel 1-12 · number 1-1 · cover 2-2 · title 3-8 · meta 9-11 · play 12-12 (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)
Section
vertical padding step 6

Pattern notes

  • One rounded panel (surface, 2 px border, glow) padded 40 px, with only 48 px of section padding above and below it (the panel is the block), and a header row: the panel title at step 4 in the pixel font and a body-size meta. Then four to eight rows separated by hairlines, each a 12-column row: track number at step 3 in pixel font on 1, a square cover image with token radius on 2, the title (step 2) on 3–8, meta in pixel font at body size on 9–11, and a small ghost pill button on 12. At phone width the cover, meta and button hide and each row is number + title.

Services

Booking projects from June 2026

01

Discovery sprint

2 weeks

View

02

Positioning workshop

1 day

View

03

Identity design

8 weeks

View

04

Website

10 weeks

View

05

Launch support

4 weeks

View

06

Retainer

Ongoing

View
Layout tree (as in design/layout.json)
{
  "pattern": "list.y2k-chrome-playlist",
  "kind": "list",
  "grid": {
    "panel": "1-12",
    "number": "1-1",
    "cover": "2-2",
    "title": "3-8",
    "meta": "9-11",
    "play": "12-12"
  },
  "slots": [
    "title",
    "meta",
    "items[4..8]"
  ],
  "tree": {
    "el": "box",
    "bg": "surface",
    "gap": 4,
    "pad": [
      5,
      5
    ],
    "border": "all",
    "children": [
      {
        "el": "box",
        "dir": "row",
        "align": "baseline",
        "justify": "between",
        "children": [
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 4,
            "transform": "uppercase",
            "font": "mono"
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "meta",
            "role": "body",
            "transform": "uppercase",
            "font": "mono"
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "items",
        "min": 4,
        "max": 8,
        "layout": "list",
        "gap": 0,
        "divider": true,
        "of": {
          "el": "grid",
          "gap": 2,
          "pad": [
            2,
            0
          ],
          "align": "center",
          "children": [
            {
              "el": "text",
              "span": "1-1",
              "slot": "number",
              "role": "h3",
              "step": 3,
              "font": "mono"
            },
            {
              "el": "media",
              "span": "2-2",
              "mobile": "hide",
              "slot": "image",
              "aspect": "1/1",
              "treatment": "gradient-mesh",
              "frame": "rounded"
            },
            {
              "el": "text",
              "span": "3-8",
              "slot": "title",
              "role": "h3",
              "step": 2
            },
            {
              "el": "text",
              "span": "9-11",
              "mobile": "hide",
              "color": "textMuted",
              "slot": "meta",
              "role": "body",
              "font": "mono"
            },
            {
              "el": "button",
              "span": "12-12",
              "mobile": "hide",
              "slot": "cta",
              "variant": "ghost",
              "size": "sm"
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/list.y2k-chrome-playlist.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>list.y2k-chrome-playlist — Y2K Chrome</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: 48px 0; } /* the panel is the block: short section padding */
  .player { padding: 40px; }
  .head h3 { font-size: var(--step-3); }
  .track strong { font-size: var(--step-2); }
  .track > .pixel:first-child { font-size: var(--step-3); }
  .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
  .track { display: grid; grid-template-columns: 56px 64px 1fr 120px 44px; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--border); }
  .cover { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); }
  .play { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--heading); background: var(--surface); }
  .muted { color: var(--muted); }
  @media (max-width: 640px) { .player { padding: 24px; } .track { grid-template-columns: 40px 1fr; } .cover, .dur, .play { display: none; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="player panel">
    <div class="head"><h3 class="pixel">Playlist: Friday drops</h3><span class="pixel muted">6 tracks · 21:48</span></div>
    <div class="track"><span class="pixel">01</span><span class="cover" aria-hidden="true"></span><strong>Neon Afterglow</strong><span class="pixel muted dur">03:42</span><button class="play" aria-label="Play Neon Afterglow">▶</button></div>
    <div class="track"><span class="pixel">02</span><span class="cover" aria-hidden="true"></span><strong>Dial-Up Love</strong><span class="pixel muted dur">04:05</span><button class="play" aria-label="Play Dial-Up Love">▶</button></div>
    <div class="track"><span class="pixel">03</span><span class="cover" aria-hidden="true"></span><strong>Millennium Bug</strong><span class="pixel muted dur">02:58</span><button class="play" aria-label="Play Millennium Bug">▶</button></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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