Motion Is Structure
The disc does not decorate — it turns. Every part carries a force.
01The Machine
Five Mechanical Motions
Orbit
A disc rides the rim while the axis turns at constant speed.
Spin
A gear at constant angular velocity — never eased, never bouncing.
Pendulum
A triangle swings about its anchor with ease-in-out weight.
March
Squares step across on a beat with stepped, not smooth, timing.
Sweep
A color panel drives in along the diagonal to reveal content.
Rest
Under reduced-motion every loop settles here — still a complete poster.
02Three Colors, One Ink, One Paper
The Only Five Values
03Type Is A Part Too
Ultra-Bold & Tabular
Aa Bb
Display / Archivo 900
Forward Motion
Mono / Labels 0123456789
RPM 1440 · 24FPS · -45°
04Controls
Buttons
05Assemblies
Cards As Parts
Diagonal Is Force
Compositions ride the -45deg axis. Tension is a direction, not an accident.
Flat Is Honest
No shadow, no gradient, no glow. Ink on paper, cut clean at every edge.
06Inputs
Forms
07Switchboard
Tabs
Orbit. Parent turns at constant speed; a child disc rides the rim. Two divs, one keyframe, zero JavaScript.
08Signals
Badges & Progress
NewStableBetaDraft
Assembly82%
Calibration64%
Torque45%
09Notices
Alerts
Info
The flywheel spins at 18 second intervals.
Success
All parts aligned to the diagonal axis.
Warning
Motion exceeds 1.2s — tighten the loop.
Error
A fourth hue was detected. Remove it.
10Specification
Motion Table
| Motion | Easing | Duration | Loop |
|---|---|---|---|
| Orbit | linear | 12s | infinite |
| Spin | linear | 4s | infinite |
| Pendulum | ease-in-out | 3.4s | alternate |
| March | steps(3) | 0.9s | alternate |
| Sweep | expo-out | 0.6s | once |
Art into life. The poster is a machine for seeing.
11Discipline
Do & Don't
Do
- +Only red, blue, yellow on ink and paper
- +Hard edges, flat fills, zero radius
- +Compose on the -30/-45 diagonal
- +Move via transform / opacity only
- +One dominant motion per viewport
Don't
- ×No gradients, shadows, glow or blur
- ×No fourth hue or muddy pastels
- ×No illustration stealing the stage
- ×No bouncy cartoon easing
- ×No animating top/left/width/height