Go Beyond Colors: Spacing, Radius & Elevation Tokens in CSS

When people think about CSS variables, they think about colors. And sure, brand palettes matter. But some of the biggest wins happen when you token-ize your spacing, radius, and elevation.

Why? Because these are the silent heroes of great design. The things you only notice when they’re wrong — margins that clash, buttons that feel off, cards that float like ghosts instead of anchoring like content.

So I define them. I name them. And I use them everywhere.

My Token Philosophy

I don’t memorize pixels — I name intentions. That means:

• --space-xs = tiny gaps, like badge padding or tight icons
• --space-md = default spacing for blocks or components
• --radius-lg = relaxed corners for friendly UI
• --shadow-elevated = a component that's supposed to rise above the rest

Tokens give your project a design language. Not just styles, but structure and vocabulary you can trust.

The Base Kit I Use Across Projects

:root {
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Elevation (Shadows) */
  --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.15);
}

This block sits in base.css or a design-tokens.css file. Every component pulls from it. And when the client says “tighten all the padding by 20%,” I don’t cry — I tweak a variable.

Real-World Before & After

.card {
  padding: 1rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
}

Now if you update your elevation tokens across the site? Every modal, every card, every dropdown updates — instantly and uniformly.

Scaling Responsively

Want to go even further? Tokenize for breakpoints too:

@media (max-width: 768px) {
  :root {
    --space-md: 0.75rem;
    --space-lg: 1.5rem;
  }
}

This way, you adapt your spacing scale for mobile without rewriting component logic. It’s responsive design with a designer’s mind — and a developer’s efficiency.

Final Thought

I didn’t invent this idea — I adopted it after years of inconsistent UI, repeated CSS audits, and time wasted guessing why a page felt “off.”

Tokens are boring. Until they aren’t. Until they save you hours. Until they become the reason your project actually feels polished — not patched.

Still naming things like .blue-padding-box? Or duplicating the same shadow across ten files? Contact me here and let’s put some structure in place. I’ll help you build a design system that makes sense — and makes money.