Notebook / CSS
A spacing system does not need to be complicated
A small set of reusable decisions can be more useful than a large collection of exceptions.
Start with the paragraph
Before choosing card shadows or decorative borders, get the body text comfortable. Check a full paragraph rather than a short heading. A line that looks elegant in a screenshot can be tiring when it stretches across a wide monitor.
Use gaps to explain relationships
A label should sit closer to its field than to the previous field. A heading should feel connected to the text beneath it. These relationships matter more than making every margin identical. Reusing a short spacing scale helps keep those choices consistent.
Let the content choose the breakpoint
A layout does not suddenly become good at a particular device width. Narrow the window until something feels cramped, then adjust that part. Navigation, long titles and side-by-side content often need attention at different points.
Leave room for ordinary mess
Real text is not always the length of the sample. Try a heading that wraps onto three lines, a long project name and browser zoom. If the layout only works with carefully trimmed copy, the CSS still has work to do.