Design system · release 2.4 · build 0041

MERCURYOS

A control library cast from liquid metal. Every surface is layered gradient chrome, every press has weight, and every transition behaves like a fluid finding its level.

12 components 48 tokens 60 fps no dependencies

Chrome buttons

press · hold

Hold the primary action to charge it. The metal deforms under the pointer and the specular band slides across the bevel.

state idle

Mercury slider

spring · drag

Drag or use the arrow keys. The knob is damped with a spring, so it overshoots, settles, and sheds a droplet if you flick it.

42% 2.02 bar

Pour toggle

switch · drip

A gooey filter merges the knob into the track as it fills. Switching on makes the metal pour.

Segmented control

flow · 3 way

The chrome indicator flows between options with a springy overshoot. Arrow keys work once focused.

material Solid

Metal ramp

tokens

The five stops every surface is built from, in order of pressure.

silver
#d7d9de
steel
#7c818c
ink
#14151a
ice
#c9f2ff
hot
#ff5c8a

States & focus

keyboard

Tab through the pills. The focus ring is chrome — a dark gap then an ice glint, never a default outline.