Index
GOATs
Resources
Typography
Color
Layout
Motion
Sound
- Interface SFX
- Layering Sounds
Data
- Living Charts
Craft

Resources

Tools and references I keep coming back to. Each concept page also lists the specific posts it draws from.

Learning

Devouring Details — Rauno Freiberg's interaction design course.
animations.dev — Emil Kowalski's course on web animations.
Refactoring UI — Design tactics for developers, by the Tailwind founders.
Laws of UX — The psychology principles behind interface decisions.

Motion

easings.net — Every easing curve, visualized and copyable.
Motion — The animation library used across this site.
linear.style — Generate linear() spring and bounce easings in CSS.

Color & typography

oklch.fyi — Jakub Krehel's OKLCH color picker and explainer.
Fontshare — Free, quality fonts from the Indian Type Foundry.
Modern Font Stacks — System font stacks that need no webfont at all.

Icons & sound

Phosphor Icons — The icon family used on this site — six weights.
Lucide — The community fork of Feather; the safe default.
@web-kits/audio — Synthesized interface sounds; powers this site's SFX.

Inspiration

Are.na — The best place to collect and connect references.
Godly — Astronomically good web design inspiration.
Cosmos — A calmer, curated alternative to Pinterest.

Search concepts

Search for a command to run...