Variants for the "empty / dull" fix — depth from surface and texture, one identity
accent (aqua) used where it glows, plus a warm second neutral. No new brand colour.
Pick winners here; they get promoted into foundations.css after.
Compatibility Lab — element & colour pairings →
The cheapest fix: widen the value steps and add a warm neutral so sections separate.
Pure white (--ink-0). Today's default. Clean, but adjacent sections have near-zero separation.
background: #FFFFFF Current --bg-sunken (--ink-50). Only 5% darker than white — the step is too small to register.
background: #F3F5F5 Proposed wider step (--ink-100). Section banding becomes legible without going grey-heavy.
background: #E6EAEA Proposed second neutral. Warm bone for editorial/journal surfaces — the 'lab vs paper' split.
background: #F7F4EF --accent-soft (--aqua-50). Signature as a wash, not a button. Good for one highlighted band.
background: #E6F4F4 Aqua wash with an accent top-rule. Adds a chromatic edge without flooding the field.
border-top: 2px solid var(--accent) Borrowed from mi-lab. Frosted glass needs something behind it to blur — these sit on a backdrop band.
Translucent white + backdrop-filter blur over a colour band. The classic frost.
rgba(255,255,255,.45) · blur(14px) Aqua-tinted frost with a lume border. For a signature panel over imagery.
rgba(46,148,148,.18) · blur(14px) mi-lab's 140° gradient sheen + grain + top highlight — a solid card, no transparency needed.
linear-gradient(140deg …) + grain Dark glass over a dark band — the mi-lab default. For nav-on-scroll and dark heroes.
rgba(13,18,19,.45) · blur(16px) Grain and grid stop flat fills from reading as "unfinished comp."
SVG fractal-noise overlay (mi-lab technique), overlay blend. Kills the flat-fill feel on white.
+ feTurbulence overlay · opacity .5 Same grain over the aqua wash. Reads as a treated/printed surface, not a digital flat.
background: #E6F4F4 + grain Faint instrument grid, 28px. Quiet structure — references measurement without decoration.
linear-gradient lines · 28px Soft multi-radial aqua mesh on white. Atmosphere at the edges, white where text sits.
radial-gradient ×2 · aqua Shadow and inset give hierarchy on otherwise flat pages.
Shadow steps 1/2/3 as separation, not decoration. Lifts a panel off a sunken band.
var(--shadow-1 / 2 / 3) Inner shadow — a recessed well. Good for code/spec blocks and quiet data panels.
box-shadow: inset 0 2px 6px … White base + very-low-alpha warm radials (pink, peach, lavender) that read as neutral, finished with grain. The look you asked for — plus intensity and hue variants to choose from.
White + pink & peach radials at ~0.10 alpha + grain. Reads as warm-white, not pink.
white + pink/peach radials Warmer skew — peach into soft orange. A sunlit-paper feel.
white + peach/orange radials Cooler-warm — lavender meets pink. Neutral with a violet hush.
white + lavender/pink radials Pink + peach + lavender + a touch of aqua, all ≤ 0.10. Maximum life, still reads white.
4-stop warm + aqua mesh Same mesh at ~2× alpha. Shows where 'neutral' tips into visibly tinted — the ceiling.
mesh @ ~2× alpha Linear 140° warm-to-violet sheen. Directional light instead of corner blooms.
linear 140° warm→violet Single soft warm glow from one corner. Quiet dimensional light.
single corner radial Brand-linked version — aqua + lavender. Neutral, but anchored to the identity colour.
white + aqua/lavender radials The pink-peach treatment carrying real content. Checks number/label legibility on grainy warm glass.
bloom + grain + content Where flow-through systems average, we resolve. Body copy on a warm grainy surface — testing paragraph legibility at small size.
Body copy on the warm glass — confirms text contrast holds over the gradient and grain.
bloom + grain + paragraph Real backdrop-blur frost over warm meshes, edge-lit and gradient-bordered cards, and a side-by-side of grain blend modes.
Backdrop-filter blur over a warm bloom. The real glass — blurs whatever sits behind it (imagery, colour).
blur(14px) over warm mesh Same frost, backdrop tied to the brand aqua plus warmth. Identity meets warm.
blur over aqua + warm mesh White + faint warm glow + a bright top inner-edge and soft drop. Reads as a lit pane of glass.
inset top highlight + shadow Warm→violet 1px gradient frame via mask-composite. A subtle chromatic edge on white.
mask-composite gradient ring Gentle, preserves the white. The default for these cards.
blend: soft-light · op 0.7 Punchier mid-tones; weak on pure white.
blend: overlay · op 0.6 Darkest, most visible speckle — but dims the surface.
blend: multiply · op 0.35 Lower-frequency noise — chunkier, more 'paper' than 'film'.
blend: soft-light · op 0.6 Your dark theme already exists and only the footer + service hero use it. This is where aqua finally glows.
Ink-950 + luminous aqua + glow. Same accent quantity as a white page — reads far richer.
#07090A · color #5FE3DC · text-shadow glow Dark band with calibration grid and grain layered. Texture in place of missing photography.
ink + grid + grain Soft radial aqua glows on near-black. Atmospheric hero ground, no assets needed.
radial-gradient ×2 · aqua-glow Dark glass card floating on an aurora band — the full mi-lab stack, aqua-keyed.
aurora + dark glass + grain