Tokens
Every token, as your browser resolves it
Read from the running stylesheet rather than from a list, so this page reports what is actually in effect once dark mode, the Display-P3 escalation and your accessibility preferences have all been applied.
Design tokens exist so that a decision is made once and referenced everywhere. That is only true if the reference is cheap to find, which is what this page is for: search, copy the var(), move on.
The values are not typed anywhere. They are authored as JSON in tokens/*.json, compiled into app/tokens.generated.css by a build script, and read back out of the browser here. The panel at the top of the list tells you whether the generated layer is loaded or whether you are looking at the authored fallbacks a clean clone ships with.
Three of these namespaces change with your operating system settings, and the page will show you that they have. Turn on reduced motion and every duration becomes 1ms. Turn on reduced transparency and the translucent material rungs become opaque. Use a wide-gamut display and the status ramps escalate their chroma without moving in lightness, so the measured contrast is unchanged and only the saturation grows.
Where each thing lives
The signpost, repeated verbatim across the site: Foundations is what a token means. Handbook and Theming are how you change it. Reference is the generated list of every one.
- Token architecture covers the three tiers, and why a component may never reference a primitive.
- Adding your own tokens is the extension recipe that survives an upgrade.
- Generated token reference has the full table with tier, source file and what each token controls.
- Colour browser has the two axes on their own, with format switching.
- Token layer
- reading…
- Display gamut
- reading…
- Motion preference
- reading…
reading stylesheet…
If this list looks short
It enumerates custom properties, and a scale is only listed once it has been emitted as one. The type and space scales are authored in tokens/type.json and tokens/space.json and are consumed today through Tailwind’s own theme rather than through an --opsin- property, so they appear in the generated reference before they appear here. When the build script emits them, this page will pick them up with no change to this file. That behaviour is the entire argument for reading the stylesheet instead of keeping a list.