Index
A small collection of design engineering concepts.
Craft
Performance Is Design
Speed is a feature; pretending to be fast is not.
How to Get References
Your interfaces can only be as interesting as your inputs.
Novelty Budget
Delight is a currency. Spend it where it counts.
Taste Is Trained
Nobody is born knowing 200ms from 300ms.
Timelessness
Trends are how interfaces expire.
Typography
Letter Spacing
Tracking should tighten as type gets bigger.
Text Wrapping
text-balance for headings, text-pretty for paragraphs.
Tabular Numbers
Keep changing numbers steady and numeric columns aligned.
Optical Alignment
Correct what looks off after the boxes are aligned.
Icons
Pick one voice and let every glyph speak it.
Font Smoothing
Light text on dark renders bolder than you designed.
Color
OKLCH
A color space where lightness actually means lightness.
Noise
A little grain makes flat surfaces feel like material.
Shadows, Not Borders
Depth reads better than outlines.
Image Outlines
One faint pixel makes every image look sharper.
Layout
Nested Border Radius
Make nested rounded corners follow the same curve.
Hit Areas
Targets should be bigger than they look.
HTML Background
The page behind your page has a color too.
Clip-Path
Reveal by drawing less, not by moving more.
Scroll Fades
Edges should dissolve, not decapitate.
Motion
Icon Morph
Swapping icons with blur, scale, and a spring.
Button Press
A 3% dip that makes clicks feel physical.
Easings
The curve is the personality of the motion.
Stagger
Eighty milliseconds between siblings turns a blob into choreography.
Interruptibility
Animation the user can change their mind about.
Hover Restraint
The fastest hover animation is none.
Shared Layout
One element moving beats two elements swapping.
Exit Animations
Things leaving deserve less ceremony than things arriving.
Scale Entrances
Never enter from scale(0).
Sound
Interface SFX
Sound as a texture, not a notification.
Layering Sounds
Notes stacked with tiny delays become an instrument.
Data
Living Charts
Interpolation makes data feel alive instead of updated.
Curve Smoothing
The lines between your data points are a design choice.