I did not remove shadows because minimalism sounded serious. I removed them because they were doing too little design work for how much inconsistency they introduced. Once a design system depends on soft elevation everywhere, it often starts compensating for weak hierarchy with visual fog.
Borders, spacing, typography, and contrast stop carrying enough of the structure on their own.
What Got Better After the Cut
When we removed most decorative shadows, the interface got stricter in a useful way:
- hierarchy had to come from layout and type
- components looked more consistent across pages
- hover and focus states became easier to read
- visual weight stopped accumulating in every card and panel
That is the real design benefit. It forces composition to do the work.
The Practical CSS Difference
Before:
.card {
background: #fff;
border-radius: 16px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.06);
}
After:
.card {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 16px;
}
The second version is visually harsher, but often more honest. If the composition still works, the interface did not need the decorative blur in the first place.
The Trade-Off
Shadows are not always wrong. They are useful when they communicate real layering:
- modals above the page
- floating menus
- drag states
- transient focus or elevation
They become weak design when they are sprinkled everywhere to make flat composition feel more expensive.
Better Rule
Use shadows when they explain depth. Remove them when they merely decorate the absence of stronger structure.
Further Reading