Index
A collection of design engineering concepts. These essays are short and simple, meant as a collection of useful ideas and tricks rather than an exhaustive resource.
This project is brought to you by Gustavo, a guy who likes computers and beautiful things. I also created a skill based on these guides:
npx skills add gustavo-fior/craftAlso, if you want to contribute, here's the repo:
gustavo-fior/craftObs: the articles in the repo that are not out yet are AI placeholders.
Craft
Typography
Letter Spacing
Tighten big text, loosen small text.
Design is how it works, not only how it looks
Text Wrapping
Balanced headings, no lonely last words.
Tabular Numbers
Steady digits for values that change.
Optical Alignment
Center for the eye, not the math.
Icons
One set, one weight, sized to the text.
Font Smoothing
Light text on dark renders heavier.
Color
Layout
Motion
Icon Morph
Blur, scale and fade between icons.
Button Press
Scale down on press so it feels real.
Easings
Ease-out for anything the user triggers.
Stagger
Turn one block into a sequence.
Interruptibility
Animation that can change its mind.
Hover Restraint
Frequent interactions should be instant.
Shared Layout
One element moving beats two swapping.
Exit Animations
Leave faster and quieter than you came.
Scale Entrances
Grow from the trigger, not from zero.