01 · Color Tokens
Palette
The core surface tokens stay restrained so the accent colors can do the real work. Each category gets a dedicated signal color.
02 · Typography
Font Pairing
Little Loops uses a three-part typography system: expressive serif for emphasis, sans for explanation, and mono for controls, labels, and system framing.
For category titles, hero moments, and places where motion needs a little drama.
For descriptive pattern copy and contextual explanations.
For category numbers, code-adjacent labels, buttons, and interface chrome.
03 · Principles
Rules of the system
The system stays coherent by treating motion as structure, not decoration.
Every loop should clarify timing, attention, or feedback. If it adds no meaning, it does not belong.
The dark base lets color act as a category marker instead of becoming visual noise.
Mono labels and sans explanations keep the page readable while the motion demos take the spotlight.
Playful moments can exist, but they still need a clear edge, rhythm, and reason.
04 · Components
Core building blocks
These are the pieces that make Little Loops recognizable even before a single demo starts moving.
Color-coded chips that make each motion family scan quickly.
Simple geometric marks used as tiny motion carriers or ambient signals.
Most content lives on stacked dark surfaces with subtle borders rather than flat panels.
05 · Motion Language
How motion behaves
The library spans many patterns, but the motion language stays fairly consistent: soft easing, small distances, and clear state shifts.
Fade, slide, and scale motions are short, readable, and rarely theatrical.
Buttons, toasts, and counters respond quickly so the interface feels alive but not jumpy.
Numbers, category colors, and entrances decide what gets attention first.
Ambient loops and playful edges are allowed, but they should stay lightweight and intentional.