list.frosted-step-track · Step track

A list pattern from Frosted Glass, 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.frosted-step-track". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Title on 1–5; steps on 6–12 as rows of a small frosted number chip beside the title and text, joined by a hairline.
Slots
sectionLabel, title, items[3..6]
Grid areas
title 1-5 · steps 6-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #0A0F1F · text #E4EAF6 · heading #FFFFFF · accent #6E8BFF · accent2 #A67AE8 · Sora / Manrope · radius 22px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Columns 1–5: eyebrow and h2. Columns 6–12: 3–6 steps separated by hairlines; each row holds a small frosted chip with the step number (surfaceAlt) beside the h4 title and a muted paragraph.

Index

Services

01

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

02

Positioning workshop

A day with your leadership to agree on one story.

03

Identity design

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

04

Website

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