Elliot Rylands
Lab · Handset

Your design system, hand-set.

A design system isn’t a Figma file, it’s an environment you live inside. Edit the tokens on the left. Watch a whole operating system agree with you.

Showing Lock screen
Monday, August 3
light

No account. No database. This phone lives entirely in the link.

text.primary / bg.canvas: AA ✓ 15.7text.primary / bg.surface: AA ✓ 15.7text.onAccent / bg.accent: AA ✓ 5.3bubble.outgoing text/bg: AA ✓ 5.3

Color

Type

1.200
15px
600

Space & radius

4px
2
2
4

Why three layers

Primitivesare the only place raw values live — hex colors, a type family, a spacing unit, radii. Change accent once and every surface that means “accent” moves with it.

Semanticsname meaning and carry light/dark mappings. The phone’s dark mode toggle remaps this layer only — zero primitive edits — which is the demo that usually sells the architecture.

Components alias semantics rather than restating values, so a button and a message bubble can share “accent” without coupling to a hex. More on token architecture in the work.

Built with no backend. The phone, the tokens, and this whole configuration live in the URL. That’s the point.