Materials: Canvas · Panel · Glass · Squircle

Oracle: Shell canvas (dock/header glass, panels); Guideline §5 materials + §6 icon recipe

Canvas glows

Fixed, dim radial glows in brand blue — never animated. Full strength on auth/launcher/empty states; canvas-dim behind module content. Text never sits directly on Canvas.

canvas (full — auth, launcher, empty)

canvas canvas-dim (behind module content)

Panel & raised surface

ALL content surfaces are opaque surface + 1px border, radius 12 (16 for tiles/dialogs). No blur, no transparency; dark elevation = lighter surface + border.

Panel

surface · border · radius-card

Raised

surface-raised — menus, popovers, hover rows

Dialog surface

surface-raised · radius-dialog (minimal variant)

Glass

Transient chrome only: dock, module header, palette, scrims, toasts, mobile tab bar. Max 3 composited at once; menus/popovers are opaque (Round 7). prefers-reduced-transparency drops all but palette + scrim to opaque Panel.

Bayside Schools

Content behind the glass

Harbor Medical

Content behind the glass

Pinecrest University

Content behind the glass

glass — blur(14px) saturate(1.2) over glass-tint

Gradient squircle — 52 / 40 / 30 / 24 (§6 LOCKED recipe)

Identity color, vertical gradient lighter at top (color-mix toward white), white Lucide glyph, inner top highlight, radius ≈26.5% of size. Below 32px only the glyph compensates (~56% → 70% of tile).

52 launcher tile

40 dock

30 phone tab bar

24 breadcrumb chip

identity color

slate — admin/system