Whenever a design feels amateurish, people almost always blame the colors.
"The purple is too bright."
"The grey looks muddy."
"Maybe we need a warmer accent."
Nine times out of ten, the color palette wasn't the issue at all. The spacing was broken.
The Proximity Principle We Keep Forgetting
The foundational rule of visual hierarchy is simple: things that are related should sit close together, and things that are unrelated should be distinctly separated.
Yet when building frontend components, it is remarkably easy to slip into uniform margin habits:
/* The lazy default that ruins hierarchy */
.card > * + * {
margin-top: 16px;
}
When an eyebrow tag, a main heading, a paragraph, an author avatar, and a timestamp all share the exact same 16px gap, the browser treats them as five disconnected items with equal importance.
The eye doesn't know where a thought begins or where it ends.
Grouping by Relationship
When designing this portfolio and the CIVA platform, I settled on a four-tier spacing scale that I now apply to almost every component:
- Tight bond (
4px–8px): Between an eyebrow label and its heading, or between an icon and its label. They belong to the same micro-unit. - Context bond (
12px–16px): Between a title and its accompanying descriptive sentence. - Component separation (
24px–32px): Between the body copy and the action button or footer tray. - Section breath (
64px–120px): The generous breathing space between distinct story blocks on the page.
[ Eyebrow Label ]
↓ 6px
[ Big Headline Here ]
↓ 14px
[ Descriptive paragraph explaining the core idea in detail. ]
↓ 28px
[ CTA Button / Action ]
Notice the proportion: the gap grows as the relationship becomes more distant.
The Takeaway
Spacing is not the absence of content. It is the visual glue that dictates how the human brain reads information.
Before you spend three hours tweaking hex codes or testing new accent colors, audit your margins. Tighten what belongs together, expand what stands alone, and let the hierarchy do the work.