JavaScript CSS Design Systems Liquid Glass Astro Tailwind
Rega-liquid
A content-first, Apple-inspired Liquid Glass design system and component architecture for modern web frameworks with progressive enhancement.
the deep dive — architecture & implementation
Engineered Rega-liquid as a high-fidelity Liquid Glass web system: Core CSS translucency, multi-tier optical lighting (inside rims, specular highlights, elevation shadows), concentric geometry, throttled pointer physics via requestAnimationFrame, and zero-compromise accessibility with forced-colors and reduced-motion support.
Rega-liquid — Liquid Glass Design System
Rega-liquid is a content-first, framework-agnostic design system bringing responsive glass optics, concentric geometry, and tactile physics to modern web applications.
Design Principles & Optics Model
- Four-Layer Material Stack: Translucent fill, restrained backdrop blur/saturation, directional specular highlight/rim, and soft elevation shadow.
- Content-First Hierarchy: Functional surfaces (controls, navigation, inspectors, media cards) use glass; reading surfaces remain solid and legible.
- Concentric Geometry: Child borders derive strictly from parent corner radii minus insets.
- 60fps Performance: Zero filter animation, throttled RAF pointer optics, and hardware-accelerated transform/opacity transitions only.
- Strict A11y & Fallbacks: Dedicated
@supportsfallbacks, 44px touch targets, and high-contrast / forced-colors modes.