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.
Two textures, both real stones: lapis lazuli and fluorite crystal. Use them for a hero, a feature card or a deep panel, never as page wallpaper. One stone per view. Switch to jadeite and both fall back to the deep jadeite panel. Labradorite and opalite only.
A scrim rises from the bottom edge so glass-clear type holds even where a gold vein crosses it. Keep copy low. Hover it — interactive stones lift.
The crystal zones swing from near-black to pale mint, so copy always rides on a --bbs-surface panel. Flip the theme: the panel swaps, the stone stays.
class="bbs-lapis" for anything with type (scrim included). Raw var(--lapis-flecked) is for type-free swatches and panels. Flat lapis for type and borders is --bbs-accent-calm.class="bbs-fluorite" or background: var(--fluorite-crystal) + box-shadow: var(--fluorite-glow).border, color or box-shadow they drop silently.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