CSS Design Tokens: Your AI Collaboration Layer

Design tokens are named variables for your visual design decisions. They are the single source of truth that keeps your AI-generated designs, your CSS, and your WordPress theme consistent.

1. What is a Design Token?

Instead of scattering magic values throughout your code, you define them once:

:root {
  /* Colors */
  --color-primary:    #1a73e8;
  --color-secondary:  #f5a623;
  --color-bg:         #0f0f0f;
  --color-surface:    #1c1c1e;
  --color-text:       #f0f0f0;
  --color-muted:      #888888;

  /* Typography */
  --font-sans:        'Inter', system-ui, sans-serif;
  --font-size-base:   1rem;
  --font-size-lg:     1.25rem;
  --font-size-xl:     2rem;
  --font-size-hero:   clamp(2.5rem, 6vw, 5rem);

  /* Spacing Scale */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Borders and Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.45);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
}

2. How to Use Tokens with AI

Paste your :root token block at the top of every AI prompt:

I have this CSS design system. Use these exact variables in all code you generate:
[paste your :root block here]

Now create a pricing card section using these tokens.

This ensures all AI-generated components match your design system automatically.

3. Dark/Light Mode Theming

With tokens, dark mode is trivial:

:root {
  --color-bg:   #ffffff;
  --color-text: #111111;
}

[data-theme="dark"] {
  --color-bg:   #0f0f0f;
  --color-text: #f0f0f0;
}

Toggle with JavaScript:

document.documentElement.setAttribute('data-theme', 'dark');

4. Mapping Tokens to WordPress

When you move to GeneratePress or Bricks Builder, your tokens map directly:

Your CSS Token	GeneratePress Option	Bricks Builder
--color-primary	Primary Color	Global Color
--font-sans	Primary Font	Typography > Font
--space-8	Content Width Padding	Global Spacing
--radius-md	Button Border Radius	Element Style