Design System / v0.1

Liquid Glass tokens

Palette, frosted-panel utilities, type scale, and motion presets used across series.pleet3d.com. All paper-on-ink combinations pass WCAG 2.2 AA contrast on the dark surface.

Palette

Ink

--ink

#0e0c0a

vs --ink: 1.00:1

Ink 2

--ink-2

#16130f

vs --ink: 1.10:1

Ink 3

--ink-3

#1e1a15

vs --ink: 1.22:1

Paper

--paper

#ece6d8

vs --ink: 14.7:1 AAA

Laser Cyan

--laser-cyan

#67e8f9

vs --ink: 11.6:1 AAA

Molten

--molten

#f59e4b

vs --ink: 8.2:1 AAA

Survey

--survey

#a78bc9

vs --ink: 6.0:1 AA

Signal

--signal

#d6ff3b

vs --ink: 15.8:1 AAA

Frosted-panel utilities

.frosted-panel

Backdrop blur 18px, saturate 140%, 4% paper fill, hairline border. Use for cards, list items, secondary surfaces.

.frosted-panel-strong

Backdrop blur 25.2px, 7% paper fill, stronger border. Use for modal/dialog surfaces and hero panels.

Type scale

Display — Instrument Serif

Heading — Inter 600

Body — Inter 400, paper

Body dim — Inter 400, paper-dim

Meta — JetBrains Mono

Motion presets

All variants honour useReducedMotion(); a flattened opacity-only fallback is applied automatically.

fadeUp

16px upward translate + opacity, 320ms ease-glass.

fadeIn

Opacity only, 320ms ease-glass — for non-spatial reveals.

glassReveal

Opacity + scale 0.98→1 + blur 6px→0, 560ms — for hero panels.

staggerChildren

Wraps lists; 60ms stagger + 40ms delay between children.