UI Stack
Motion
Motion
Browse
Curves
Reference
Guide
Sites
UI Stack
The nine sites, read bottom up
Typefaces
Font pairings
Lettering
What a headline can do
Colors
Colour names and palettes
Patterns
Backgrounds and textures
Ornaments
Borders, badges, seals and stamps
cardui
Cards and tiles
Layouts
Page layouts: shells, patterns and reflow
Motion
Moves with their numbers and owners
Worlds
Brand worlds that join the layers
Curve
Play
Reverse
Loop
0ms
Speed
1x
0.5x
0.25x
0.1x
Reduced motion
Filmstrip
eight copies of the stage, each held at its time by the Web Animations API
Entrance
Exit
Crop to what moves
Tuner
rewrites the move's css and the copyable exports live
The numbers
every one with its owner
Measured on the stage
Scorecard
the rules of tools/check.py, the measured ones read off the stage
Recipe and rationale
Recipe
When to choose it
Export
CSS with the tokens inlined for the chosen world, the WAAPI version, and the tokens as a Worlds block
Copy CSS
Copy WAAPI
Copy tokens
CSS
WAAPI
Tokens
Template