Elliot RylandsYour design system, hand-set.
A design system isn’t a Figma file, it’s an environment you live inside. Handset is a working phone on the page (lock screen, home, messages, settings), themed by a three-layer token set. Reach for it when you want to stress-test a palette in a real UI, walk someone through why primitives, semantics, and components matter, or send a themed phone instead of a screenshot.
How to use it
- Start from a preset, or edit Primitives: accent, type, space, radius. The phone updates as you go.
- Swipe the phone or open apps. Flip dark mode in Settings to see the semantic layer remap without touching primitives.
- Hit Share when it looks right: the whole token set rides in the URL.
No account. No database. This phone lives entirely in the link.
Color
Type
Space & radius
Why three layers
Primitives are 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.
Semantics name 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.