Lumasis case study cover — gradient wordmark and glass track UI on dark background
Parameters
Color

Carries state — every hue maps to a sensor reading, not a brand preference.

Light

Carries priority — brightness ranks information instead of decorating it.

Material

Carries surface — refractive glass, so one pill lens serves many roles without hiding what sits under it.

Depth

Carries position — blur and opacity place a level in the stack.

SwatchFamilyCoreApplied lightΔLToken architecture
Bronzehue 33°#3E2E1Ahsl(33, 41%, 17%)#93744Bhsl(34, 32%, 44%)+27--lum-bronze17 / 44
Amberhue 35°#AA6405hsl(35, 94%, 34%)#ECA74Ahsl(34, 81%, 61%)+27--lum-amber34 / 61
Tealhue 169°#044E41hsl(169, 90%, 16%)#33A68Fhsl(168, 53%, 43%)+27--lum-teal16 / 43
Azurehue 198°#12465Dhsl(198, 68%, 22%)#2C81A5hsl(198, 58%, 41%)+19--lum-azure22 / 41
Bluehue 221°#142B5Chsl(221, 64%, 22%)#2D64DDhsl(221, 72%, 52%)+30--lum-blue22 / 52
Indigohue 241°#292861hsl(241, 42%, 27%)#4A49A9hsl(241, 40%, 47%)+20--lum-indigo27 / 47
Violethue 289°#401E48hsl(289, 41%, 20%)#793989hsl(288, 41%, 38%)+18--lum-violet20 / 38
Magentahue 342°#471222hsl(342, 60%, 17%)#AE3375hsl(328, 55%, 44%)+27--lum-magenta17 / 44
Emberhue 3°#65120Ehsl(3, 76%, 23%)#C44E37hsl(10, 56%, 49%)+26--lum-ember23 / 49
SurfaceMaterialValueCompositionToken architecture
Frostedglassrgba(255,255,255,.045)blur 22px--lum-glass-frosted
Darkglassrgba(0,0,0,.44)blur 22px--lum-glass-dark
Tintedglassrgba(79,73,169,.30)blur 22px--lum-glass-tinted
Prismaticglasslinear-gradient(122deg)magenta · blue · teal at .20--lum-glass-prismatic
Opacitiesglass.05 / .11 / .19 / .28 / .40five steps--lum-glass-opacity-scale
Refractionglasslinear-gradient(100deg).04 · .22 · .04--lum-glass-refraction

Token names are derived, not assigned. The family comes from the HSL hue and the step from the HSL lightness, so --lum-blue-52 states its own value and two designers naming the same swatch independently arrive at the same token. Core and applied light are one family read at two levels — the applied set is the core color seen through refractive glass at 34%, not a second palette — which is why ΔL is the only number separating them.

Full Palette

Carried forward: the same eighteen swatches, the same six glass values, and the same five-step scale — Color, Light, Material, and Depth read side by side as one reference.

Color
Light
Material: Glass
Frosted
Dark
Tinted
Prismatic
Opacities
Refractions
Depth: Opacity
.05
.11
.19
.28
.40
Light

Extended across: one five-step opacity ladder and one refraction gradient set how much of what sits underneath a surface is allowed to show. Brightness ranks the read, not label size.

Opacities.05 / .11 / .19 / .28 / .40 · five steps · --lum-glass-opacity-scale
Refractionlinear-gradient(100deg) · .04 · .22 · .04 · --lum-glass-refraction
Material

Built out: four glass surfaces share one blur radius and one shadow logic, so a pill reads as the same material on a dashboard, a kiosk, or a vehicle door. Only tint and opacity change from one surface to the next.

Frostedrgba(255,255,255,.045) · blur 22px · --lum-glass-frosted
Darkrgba(0,0,0,.44) · blur 22px · --lum-glass-dark
Tintedrgba(79,73,169,.30) · blur 22px · --lum-glass-tinted
Prismaticlinear-gradient(122deg) magenta · blue · teal at .20 · blur 22px · --lum-glass-prismatic
Depth

Constraint: every material in the system sits at the same 22px blur radius today, so depth reads as one plane rather than a stack. A second radius would need to exist before position could rank one surface above another.

Blur radius22px · constant across Frosted, Dark, Tinted, Prismatic · not yet tiered