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
pxweb: 8px
Density-independent: web px, iOS pt, Android dp.
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.