Translucency

Every alpha in the system is one of these tokens — no raw opacity modifiers (/40), no ad-hoc color-mix in component code. Each derives from a semantic role, so the role map re-tints them like everything else: the glass follows --popover, the washes follow the accent, the scrim follows the background.

The tokens

Glass body

The body of every AI surface — palette, panel, dock, bar. Paired with the blur in .ambient-glass.

--glass-fill · popover 55%

Glass core

The orb's shell and its CSS twin: the same glass, sized for an object rather than a surface.

--glass-core · popover 60%

Glass hairline

Edges and dividers on glass, where a full-strength border reads as a drawn line rather than a seam.

--glass-border · border 70%

Wash on glass

Neutral fills ON glass: palette selection and hover, keycap chips, the answer object's card. Neutral, not accent — on glass the accent marks actions, not focus position.

--glass-wash · foreground 9%

Quiet wash

The soft accent fill at rest: selected config cards, subtle chips, secondary surfaces on solid ground.

--wash · accent 40%

Active wash

The same fill under hover or when a control is active.

--wash-strong · accent 60%

Positive wash

The tint behind anything that succeeded — added diff lines, a kept hunk, a passing run.

--positive-wash · positive 12%

Failure wash

Its twin: removed diff lines, a stopped generation, a tool error's quoted output.

--destructive-wash · destructive 12%

Scrim

Translucent covers over content — the drag zones that appear while a surface is being moved.

--scrim · background 50%

Field veil

The frost BETWEEN a surface's heat field and its content (.ambient-field-frost) — it blurs the field, not the page, so the identity glows through without touching legibility.

--glass-veil · popover 62%

Stage veil

The thin veil over a field that IS the ground (.ambient-stage-frost) — the canvas page, presentations. Thinner, so color carries across a room.

--glass-veil-stage · popover 32%

The glass recipes

A tint alone is not glass — it is a tint. Glass is a token plus a backdrop blur, and the blur radius is itself one token (--ambient-blur, currently …). These three classes are the only legal combinations.

.ambient-glass

--glass-fill over blur(--ambient-blur) saturate(1.5). The one glass recipe: every AI surface wears it, and no ambient surface may define its own blur.

.ambient-field-frost

--glass-veil over the same blur. Sits between a heat field and surface content.

.ambient-stage-frost

--glass-veil-stage over half that blur, saturated further. For a field used as a page ground.

The rule

A look that exists as a class is configurable; a look that exists as scattered utilities is folklore. These eleven tokens replaced roughly thirty inline alpha expressions — every one of which had been an invisible design decision nobody could find or change.

Reaching for /50 or a new color-mix in a component is a governance event: either an existing token fits, or the set grows deliberately and is documented here.

Because every token derives from a role, translucency follows the theme automatically — the current accent (blue) and gray family (neutral) are already in the swatches above.