Closot has grown a lot — databases, AI, teamspaces, automations. Each feature was well-designed on its own, but together they created visual noise. Too many font sizes, inconsistent spacing, competing hierarchies. We needed to bring everything into alignment.
Type scale reduction
We went from 14 font sizes to 8. Every size now has a clear purpose: page title, section heading, body, caption, label, code, small, and micro. The previous scale had sizes that were only 1px apart — imperceptible to users but enough to create subtle inconsistency.
The 4px grid
All spacing — padding, margins, gaps — now snaps to a 4px grid. This sounds restrictive, but it actually speeds up design decisions. Instead of debating whether something should have 13px or 15px of padding, the answer is always 12px or 16px.
Color desaturation
We reduced saturation in secondary UI elements — borders, dividers, inactive states — while maintaining strong contrast for primary content. The effect is that your content pops while the interface recedes into the background.