The Foundations editor
In the Studio, every token type gets a structured, purpose-built editor — no raw CSS text. The panel below is the real Studio component, imported from the editor package and running on this page.
Foundations · value editorInteractive
dpweb: 8px
Preview
Button
Input
The same ValueEditor and preview that ship in the Studio. Pick a token type and tune it — the preview reflects exactly what the editor would show.
#What you're seeing
Each token type maps to a tailored control: dimensions are a slider plus number and unit, font weight is a stepped scale, opacity a percentage, elevation a full shadow builder. Every editor emits the same neutral value the IR stores — only the input experience is specialized.
Values are platform-neutral. A radius of 8 is eight density-independent units, not 8px; the web unit is chosen later by the generator. That's the foundations model from Foundations, made tangible.
This is the point of the docs
Nothing here is a screenshot. Because the editor UI is an ordinary package over the IR, it runs anywhere React runs — including inside this documentation.