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.