pricing.frosted-segmented-pane · Segmented pane

A pricing 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="pricing.frosted-segmented-pane". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
All plans live inside one frosted pane, split by vertical hairlines into two or three segments; no separate cards.
Slots
title, sectionLabel, plans[2..3]
Grid areas
header 1-12 · pane 1-12 (12-column grid, 1-based inclusive spans)
Notes
The recommended segment gets a second frost layer (surfaceAlt) inside the pane and a primary button.
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

  • Header row: h2 left, muted small label right. Then one frosted pane holding 2–3 plan segments split by vertical hairlines: plan name (h4), price at step 5 weight 600, muted inclusions, a secondary button. The recommended segment gets a surfaceAlt frost layer and a primary button.

Engagements

Pricing

Sprint

€18k

Two-week positioning sprint with a written brand platform.

Choose Sprint

Rebrand

€85k

Positioning, identity and a launch toolkit over 12 weeks.

Most popular — choose

Partner

€14k/mo

A standing team for product launches and campaigns.

Choose Partner