Designing with Constraints
Constraints are not limitations — they are the scaffolding of great design. Exploring how the MONO design system embraces zero-radius, monochrome, and strict boundaries.
Design Is What You Refuse
The MONO design system starts with radical refusal:
- No rounded corners — every element is a strict rectangle
- No shadows — depth is expressed through borders alone
- No colors — only black, white, and shades of gray
- No gradients — all surfaces are flat and honest
These constraints are not arbitrary rules. Each one solves a specific design problem and reduces cognitive load.
Why Borders Over Shadows
Shadows are visual illusions — they exist in a liminal space between the element and the background. Borders are honest:
With shadow: The element floats ambiguously above a surface
With border: The element declares its boundary with a crisp 1px line
In the MONO system, every interactive element communicates its state through border thickness and color changes:
Button States
- Default — 1px solid #000 border
- Hover — 2px solid #000 border (thicker, no color change)
- Active — 2px solid #000 border, slight scale down to 0.98
- Disabled — 1px solid #ccc border, grayed text
This approach eliminates the need for complex shadow-token systems. Each state maps directly to a border property.
Typography as Architecture
Pairing JetBrains Mono for headings with Inter for body text creates a clear visual hierarchy without needing size alone.
The type system uses only:
- Weight (400, 500, 600, 700)
- Size (14px, 16px, 18px, 22px, 28px)
- Tracking (-0.04em for display, normal for body)
No italics for emphasis — use bold instead. The system is meant to feel precise and intentional.
The Result
When you strip away every decoration, what remains is structure. And structure, well executed, is beauty.
Minimalism without intention becomes emptiness. Every element you keep must earn its place.
- Does it communicate? Keep it.
- Does it guide action? Keep it.
- Does it establish hierarchy? Keep it.
- Does it do none of the above? Remove it.
Design is not about what you add. It's about what you leave out.