The site you are reading is built out of hairlines. Cards are not separated by gaps; they sit on a one-pixel field that shows through between them. It is a small decision that ended up setting the tone for everything else.
Gaps read as decoration, rules read as structure
A grid with gaps between the cards looks like a collection of things. A grid divided by rules looks like a drawing of a system. For an engineering studio the second one is closer to true, so that is what we drew.
The implementation is almost embarrassingly small: the container takes the rule colour as its background, the cells take the page background, and the grid gap is set to exactly one pixel.
.is-style-nb-hairline {
background: var(--stroke);
border: 1px solid var(--stroke);
border-radius: var(--r-md);
overflow: hidden;
}
.is-style-nb-hairline > * {
background: var(--void);
}The part that took the longest
Making it survive a phone. Nine cards close as a clean three by three; at two columns you are left holding an orphan, and at one column the rules have to stop pretending to be a grid at all.