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/craft
Obs: the articles in the repo that are not out yet are AI placeholders.
Craft
Performance Is Design
SoonHow fast it feels is a design choice.
How to Get References
SoonGreat work starts with great inputs.
Novelty Budget
SoonSave delight for the rare moments.
Taste Is Trained
SoonTaste is a skill, and it takes reps.
Timelessness
SoonSurface ages fast. Structure doesn't.
Typography
Letter Spacing
SoonTighten big text, loosen small text.
Design is how it works, not only how it looks
Text Wrapping
SoonBalanced headings, no lonely last words.
Tabular Numbers
Steady digits for values that change.
Optical Alignment
Center for the eye, not the math.
Icons
SoonOne set, one weight, sized to the text.
Font Smoothing
SoonLight text on dark renders heavier.
Color
OKLCH
SoonLightness values that look equal.
Noise
Grain hides banding and adds texture.
Shadows, Not Borders
SoonLayered shadows give edge and depth.
Image Outlines
A faint inner edge that frames images.
Layout
Nested Border Radius
Inner radius is outer minus padding.
Hit Areas
SoonMake the target bigger than the icon.
HTML Background
Paint the canvas behind your page.
Clip-Path
SoonReveal by clipping, not resizing.
Scroll Fades
SoonFade the edge that has more to scroll.
Squircles
SoonCorners that ease into the edge.
Motion
Icon Morph
SoonBlur, scale and fade between icons.
Button Press
SoonScale down on press so it feels real.
Easings
SoonEase-out for anything the user triggers.
Stagger
SoonTurn one block into a sequence.
Interruptibility
SoonAnimation that can change its mind.
Hover Restraint
Frequent interactions should be instant.
Shared Layout
SoonOne element moving beats two swapping.
Exit Animations
SoonLeave faster and quieter than you came.
Scale Entrances
SoonGrow from the trigger, not from zero.
Sound
Interface SFX
SoonQuiet sounds that confirm actions.
Layering Sounds
SoonStack short sources into one full cue.
Data
Living Charts
SoonCharts that flow instead of jump.
Curve Smoothing
SoonSmooth lines that don't invent data.