Foundation

Liquid Glass

Foundational

Cross-brand glassmorphism utilities. Every brand inherits the same .glass-* classes; each one is tinted by the current .brand-<name> scope through semantic tokens. Zero brand-specific CSS.

Brand + mode

Tip: every demo below sits inside the same .brand-tpemis wrapper. Nothing else changes between brand switches — the glass just retints.

Glass cards

.glass-card (on dark)
Student progress
46 of 62 modules complete. Next review: Thursday.
.glass-card-light (on brand-tinted bg)
Enrolment snapshot
1,284 active students · 42 new this week.

Glass buttons

.glass-btn-glass (on dark)

Glass navigation + input

TpGroup · DashboardSettings

Glass tags

BrandAccentSecondary

Shimmer

Motion tier (capable devices only)
Shimmer animation is gated behind prefers-reduced-motion: no-preference. If you enable Reduce motion in your OS, this surface stays static.

Integrated: RnButton + RnCard glass variants

The ui-rn primitives accept glass variants directly. Consumers opt in at the prop level; no CSS authoring required.

Term 2 snapshot

Enrolment, attendance, and progress.
1,284 active students · 92% weekly attendance · 76% on-track.

Dark-context glass

Same RnCard, variant="glass" instead.
Ideal for hero sections and backgrounds with imagery.

Token contract

These are the only CSS variables the glass utilities read. Override any of them in a brand file and the utilities retint.

--color-bg-glass-dark--color-bg-glass-light--color-border-glass-dark--color-border-glass-light (per-brand)--shadow-glass--shadow-glass-light (per-brand)--shadow-brand-glow (per-brand)--blur-glass-standard / -subtle / -heavy--color-bg-brand (per-brand)--color-bg-brand-subtle (per-brand)--color-bg-accent-subtle--color-interactive-hover / -focus (per-brand)--color-text-brand (per-brand)--color-text-on-brand / -on-glass / -accent / -secondary

Graceful degradation

  • Browsers without backdrop-filter: glass surfaces swap to solid brand fills.
  • prefers-reduced-data: reduce: blur filters disabled; translucency kept.
  • prefers-reduced-motion: reduce: shimmer animation disabled.
  • Tier-2 SVG refraction (#glass-refract in index.html) activates only under @supports (backdrop-filter: url(...)); absent on Firefox and older Safari — silently ignored.