← Back to Systems
Solo Engineered
JavaScriptCSSDesign SystemsLiquid GlassAstroTailwind
Rega-liquid
A content-first, Apple-inspired Liquid Glass design system and component architecture for modern web frameworks with progressive enhancement.
$
npm i @regalabs/liquid-glass 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.
System Specifications
- 0
- E
- 1
- n
- 2
- g
- 3
- i
- 4
- n
- 5
- e
- 6
- e
- 7
- r
- 8
- e
- 9
- d
- 10
- 11
- R
- 12
- e
- 13
- g
- 14
- a
- 15
- -
- 16
- l
- 17
- i
- 18
- q
- 19
- u
- 20
- i
- 21
- d
- 22
- 23
- a
- 24
- s
- 25
- 26
- a
- 27
- 28
- h
- 29
- i
- 30
- g
- 31
- h
- 32
- -
- 33
- f
- 34
- i
- 35
- d
- 36
- e
- 37
- l
- 38
- i
- 39
- t
- 40
- y
- 41
- 42
- L
- 43
- i
- 44
- q
- 45
- u
- 46
- i
- 47
- d
- 48
- 49
- G
- 50
- l
- 51
- a
- 52
- s
- 53
- s
- 54
- 55
- w
- 56
- e
- 57
- b
- 58
- 59
- s
- 60
- y
- 61
- s
- 62
- t
- 63
- e
- 64
- m
- 65
- :
- 66
- 67
- C
- 68
- o
- 69
- r
- 70
- e
- 71
- 72
- C
- 73
- S
- 74
- S
- 75
- 76
- t
- 77
- r
- 78
- a
- 79
- n
- 80
- s
- 81
- l
- 82
- u
- 83
- c
- 84
- e
- 85
- n
- 86
- c
- 87
- y
- 88
- ,
- 89
- 90
- m
- 91
- u
- 92
- l
- 93
- t
- 94
- i
- 95
- -
- 96
- t
- 97
- i
- 98
- e
- 99
- r
- 100
- 101
- o
- 102
- p
- 103
- t
- 104
- i
- 105
- c
- 106
- a
- 107
- l
- 108
- 109
- l
- 110
- i
- 111
- g
- 112
- h
- 113
- t
- 114
- i
- 115
- n
- 116
- g
- 117
- 118
- (
- 119
- i
- 120
- n
- 121
- s
- 122
- i
- 123
- d
- 124
- e
- 125
- 126
- r
- 127
- i
- 128
- m
- 129
- s
- 130
- ,
- 131
- 132
- s
- 133
- p
- 134
- e
- 135
- c
- 136
- u
- 137
- l
- 138
- a
- 139
- r
- 140
- 141
- h
- 142
- i
- 143
- g
- 144
- h
- 145
- l
- 146
- i
- 147
- g
- 148
- h
- 149
- t
- 150
- s
- 151
- ,
- 152
- 153
- e
- 154
- l
- 155
- e
- 156
- v
- 157
- a
- 158
- t
- 159
- i
- 160
- o
- 161
- n
- 162
- 163
- s
- 164
- h
- 165
- a
- 166
- d
- 167
- o
- 168
- w
- 169
- s
- 170
- )
- 171
- ,
- 172
- 173
- c
- 174
- o
- 175
- n
- 176
- c
- 177
- e
- 178
- n
- 179
- t
- 180
- r
- 181
- i
- 182
- c
- 183
- 184
- g
- 185
- e
- 186
- o
- 187
- m
- 188
- e
- 189
- t
- 190
- r
- 191
- y
- 192
- ,
- 193
- 194
- t
- 195
- h
- 196
- r
- 197
- o
- 198
- t
- 199
- t
- 200
- l
- 201
- e
- 202
- d
- 203
- 204
- p
- 205
- o
- 206
- i
- 207
- n
- 208
- t
- 209
- e
- 210
- r
- 211
- 212
- p
- 213
- h
- 214
- y
- 215
- s
- 216
- i
- 217
- c
- 218
- s
- 219
- 220
- v
- 221
- i
- 222
- a
- 223
- 224
- r
- 225
- e
- 226
- q
- 227
- u
- 228
- e
- 229
- s
- 230
- t
- 231
- A
- 232
- n
- 233
- i
- 234
- m
- 235
- a
- 236
- t
- 237
- i
- 238
- o
- 239
- n
- 240
- F
- 241
- r
- 242
- a
- 243
- m
- 244
- e
- 245
- ,
- 246
- 247
- a
- 248
- n
- 249
- d
- 250
- 251
- z
- 252
- e
- 253
- r
- 254
- o
- 255
- -
- 256
- c
- 257
- o
- 258
- m
- 259
- p
- 260
- r
- 261
- o
- 262
- m
- 263
- i
- 264
- s
- 265
- e
- 266
- 267
- a
- 268
- c
- 269
- c
- 270
- e
- 271
- s
- 272
- s
- 273
- i
- 274
- b
- 275
- i
- 276
- l
- 277
- i
- 278
- t
- 279
- y
- 280
- 281
- w
- 282
- i
- 283
- t
- 284
- h
- 285
- 286
- f
- 287
- o
- 288
- r
- 289
- c
- 290
- e
- 291
- d
- 292
- -
- 293
- c
- 294
- o
- 295
- l
- 296
- o
- 297
- r
- 298
- s
- 299
- 300
- a
- 301
- n
- 302
- d
- 303
- 304
- r
- 305
- e
- 306
- d
- 307
- u
- 308
- c
- 309
- e
- 310
- d
- 311
- -
- 312
- m
- 313
- o
- 314
- t
- 315
- i
- 316
- o
- 317
- n
- 318
- 319
- s
- 320
- u
- 321
- p
- 322
- p
- 323
- o
- 324
- r
- 325
- t
- 326
- .
Need this in production?
I build and deploy custom speech AI models and persistent agent systems for businesses and teams.
Schedule Architecture Call →