Search for a command to run...
Floating surface treatments — translucent glass, solid overlay, and standalone shadow tokens for tooltips, popovers, dialogs, prompt inputs, and elevated panels.
Three families of treatment for surfaces that need to feel separate from the page beneath them. Pick by intent — not all elevated UI wants the same look.
| Token | Bg | Shadow | When |
|---|---|---|---|
bg-overlay (utility) | solid | none | Dense menus / popovers — maximum legibility |
glass.overlay (TS) | translucent + blur | inset highlight | Tooltips, dropdowns, light command bars |
glass.frosted (TS) | heavier + blur | deep layered | Modals, emphasized overlays |
shadow.default (TS) | none (solid bg) | inset + light depth | Cards on a page |
shadow.max (TS) | none (solid bg) | deep layered | Prompt inputs, sticky action bars |
Semi-transparent surfaces with a backdrop blur. The blur is doing real work — it neutralizes the content beneath while keeping a sense of layering. Reach for glass when an overlay sits over varied content (an image, a colored hero, mixed UI) and the content beneath should remain a hint, not a distraction.
Both variants use bg-sand-1/60 in light and dark:bg-sand-4/60 in dark —
the explicit dark: step is intentional. The auto-mode-swap on bg-overlay
would land on sand-1-dark (the deepest dark), which would make the glass
invisible against the page.
glass.overlayThe default glass treatment. Light translucency (60%) plus a subtle inset highlight for depth. Use on tooltips, dropdowns, and light command bars.
Glass overlay
Translucent + light depth
import { glass } from "@delphi/ui/tokens";
import { cn } from "@delphi/ui/lib/utils";
export default function Preview() {
return (
<div className="from-tangerine-9 to-violet-9 relative grid h-48 w-full place-items-center rounded-2xl bg-gradient-to-br">
<div className={cn(glass.overlay, "rounded-lg px-6 py-4")}>
<p className="text-fg-high font-medium">Glass overlay</p>
<p className="text-fg-mid text-sm">Translucent + light depth</p>
</div>
</div>
);
}glass.frostedHeavier translucency (70% light / 80% dark) plus a deeper layered shadow. Use for emphasized overlays that need to feel more present — dialogs, notification surfaces, modal-like panels.
Glass frosted
Heavier opacity + deep layered shadow
import { glass } from "@delphi/ui/tokens";
import { cn } from "@delphi/ui/lib/utils";
export default function Preview() {
return (
<div className="from-tangerine-9 to-violet-9 relative grid h-48 w-full place-items-center rounded-2xl bg-gradient-to-br">
<div className={cn(glass.frosted, "rounded-2xl px-6 py-4")}>
<p className="text-fg-high font-medium">Glass frosted</p>
<p className="text-fg-mid text-sm">Heavier opacity + deep layered shadow</p>
</div>
</div>
);
}The simplest floating surface — bg-overlay mode-swaps between white and
#1e1e1d and that's it. No glass, no blur. Use when:
export default function Preview() {
return (
<div className="from-tangerine-9 to-violet-9 relative grid h-48 w-full place-items-center rounded-2xl bg-gradient-to-br">
<div className="bg-overlay rounded-lg px-6 py-4 shadow-md">
<p className="text-fg-high font-medium">Solid overlay</p>
<p className="text-fg-mid text-sm">Opaque surface — no glass effect</p>
</div>
</div>
);
}Elevation without translucency. Use when a surface should feel lifted but should keep its solid background — cards on a page, sticky bars, prompt inputs.
shadow.defaultSubtle inset highlight plus light layered depth. The right shadow for content cards.
Default shadow
Inset highlight + layered depth. The default for elevated surfaces.
import { shadow } from "@delphi/ui/tokens";
import { cn } from "@delphi/ui/lib/utils";
export default function Preview() {
return (
<div className={cn(shadow.default, "bg-surface-primary w-72 rounded-2xl p-6")}>
<p className="text-fg-high font-medium">Default shadow</p>
<p className="text-fg-mid mt-1 text-sm">
Inset highlight + layered depth. The default for elevated surfaces.
</p>
</div>
);
}shadow.maxDeeper layered shadow with stronger inset highlights. Reserved for the primary prompt input or sticky action bar — its weight loses meaning if applied to multiple surfaces on the same page.
Ask anything…
import { shadow } from "@delphi/ui/tokens";
import { cn } from "@delphi/ui/lib/utils";
export default function Preview() {
return (
<div className={cn(shadow.max, "bg-surface-primary border-subtle w-80 rounded-2xl border p-4")}>
<p className="text-fg-mid text-sm">Ask anything…</p>
</div>
);
}Use glass.* when floating UI sits over varied content — the backdrop blur reduces visual noise
without hiding what's beneath.
Use shadow.default on cards. The inset highlight + light layered depth give a sense of weight
without dominating the page.
Use shadow.max only on the primary prompt input or sticky action bar — its heavier depth loses
meaning if applied to multiple things.
Pair bg-overlay with shadow-md (or stronger) when you opt out of glass — a solid floating
surface still needs visible elevation.
Stack glass on glass. Translucency over translucency turns to mud. If two layers float, use
shadow.default + bg-overlay for the lower one.
Hand-roll backdrop-blur + shadow combos. The bundled tokens are the sanctioned look; if you
need a new variant, add it to tokens.ts first.
Use glass when the content beneath is solid and matches the surface color — the blur and translucency become invisible work.