content.frosted-offset-layers · Offset layers

A content pattern from Frosted Glass, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 4; about page, section 1. Give the section root data-pattern="content.frosted-offset-layers". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Two frosted panels stagger across a blob: the statement panel on 1–7, the supporting panel lower on 6–12, overlapping by two columns.
Slots
sectionLabel, statement, body, cta
Grid areas
glow 3-10 · statement 1-7 · support 6-12 (12-column grid, 1-based inclusive spans)
Notes
The second panel starts at column 6, under the first panel's last two columns, so the layers read as depth.
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

  • An accent2 blob spans 3–10 across both rows. The first frosted panel (1–7, row 1) holds the eyebrow and a statement at step 4 weight 500. The second panel (surfaceAlt frost, 6–12, row 2) holds a muted paragraph and a link button with arrow; it starts under the first panel's last two columns so they read as stacked layers.

About

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

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.

Start a project