The measurements everything else is built on: spacing, radii, elevation, blur, surfaces, focus, and motion. 8pt grid keeps the rhythm; soft radii keep it feeling like glass; elevation is a neon bloom in labradorite and a pastel drop shadow in opalite.
Ten steps. Each bar is drawn at its true pixel width against a full-scale rail.
The scale applied three ways: dimensioned on a real component, compared across densities, and read down a page as vertical rhythm.
Inset is space-7. The gap between every child is space-5.
Body copy takes the larger step below the heading, then the biggest step before the next section starts. Steps get bigger as the relationship gets weaker.
Four named levels, rebound per theme — neon bloom in labradorite and jadeite, pastel drop shadow in opalite. The last card lifts on hover.
Two steps, both over the same gradient so the difference is readable.
Three surface tints and two border weights. Every card below sits on the page background with no blur, so the tint is the only difference.
One ring token for everything. Shown forced on the left pair; tab into the right pair to see it fire for real.
One easing curve, two durations. Everything in the system uses --bbs-ease — a long tail that settles rather than stops.
Low opacity, strong blur, neon border. Dramatic.
bg 0.82 · blur 32px · border jadeite 0.40
Higher opacity, softer blur, pastel border. Dreamy.
bg 0.78 · blur 16px · border pink 0.35
Single hue, strong blur, jadeite border. All the way up.
bg 0.82 · blur 32px · border jadeite 0.38