`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: pixel track number, square cover, 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)

Pattern notes

One rounded panel (surface, 2 px border, glow) with a header row: the panel title in the pixel font and a small muted meta. Then four to eight rows separated by hairlines, each a 12-column row: track number in pixel font on 1, a square cover image with token radius on 2, the title (h4) on 3–8, meta in pixel font on 9–11, and a small ghost pill button on 12. At phone width the cover hides and rows stack number + title, then meta.

Services

Booking projects from June 2026

Discovery sprint

2 weeks

View

Positioning workshop

1 day

View

Identity design

8 weeks

View

Website

10 weeks

View

Launch support

4 weeks

View

Retainer

Ongoing

View