CSS Variables for Spacing and Typography Tokens

Beyond Colors: Spacing and Typography Tokens

CSS custom properties are not limited to colors. A complete design token system includes spacing, typography, shadows, and radii — all managed through variables for consistency and theme-ability.

Spacing Scale

A geometric or linear spacing scale ensures consistent rhythm:

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}

Typography Tokens

:root {
  --font-sans:  'Geist Sans', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
}

Shadow Scale

:root {
  --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1);
}

Theme-Aware Shadows

In dark themes, shadows are often invisible. Override with lighter or colored shadows:

html.dark {
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
}

Combining All Token Types

A single :root block can hold colors, spacing, typography, and shadows. Group them with comments for organization. This creates a self-documenting stylesheet that serves as the source of truth for your design system.