tokens.
the whole vocabulary in one place, and the files that carry it out of the codebase.
take it with you
the tokens leave the codebase in three shapes: the W3C standard, the Figma plugin format, and the package itself, which carries the CSS you import.
W3C DTCG
the design-token standard. drops into any DTCG-aware tool.
Tokens Studio
the shape the Figma Tokens Studio plugin reads.
the package
theme.css and both theme files ship here.
bun add usva-tokensthe reference
spacing, radius, type, and motion, every step, with its value. the colour roles have a page of their own, where the three themes sit side by side: the colour chapter.
spacing
- 0
- 0rem
- 1
- 0.25rem
- 2
- 0.5rem
- 3
- 0.75rem
- 4
- 1rem
- 5
- 1.25rem
- 6
- 1.5rem
- 7
- 1.75rem
- 8
- 2rem
- 9
- 2.25rem
- 10
- 2.5rem
- 11
- 2.75rem
- 12
- 3rem
- 13
- 3.25rem
- 14
- 3.5rem
- 15
- 3.75rem
- 16
- 4rem
- 17
- 4.25rem
- 18
- 4.5rem
- 19
- 4.75rem
- 20
- 5rem
- 21
- 5.25rem
- 22
- 5.5rem
- 23
- 5.75rem
- 24
- 6rem
radius
- sm
- 0.25rem
- md
- 0.5rem
- lg
- 0.75rem
- xl
- 1rem
- 2xl
- 1.25rem
- 3xl
- 1.5rem
type
- xs
- 0.75rem
- sm
- 0.875rem
- base
- 1rem
- lg
- 1.125rem
- xl
- 1.25rem
- 2xl
- 1.5rem
- 3xl
- 1.875rem
- 4xl
- 2.25rem
motion · duration
- fast
- kajo 160ms · sisu 120ms · savi 150ms
- base
- kajo 220ms · sisu 160ms · savi 200ms
- slow
- kajo 340ms · sisu 240ms · savi 300ms
- ambient
- kajo 560ms · sisu 400ms · savi 500ms