Multi-Level Token Systems: Constraining LLM-Generated CSS Through Design Token Hierarchies

The challenge of constraining AI-generated CSS to follow design systems has led to sophisticated approaches using multi-level design token hierarchies. Rather than allowing LLMs to generate arbitrary CSS values, these systems create structured constraints that force AI tools to select from predefined, semantically meaningful tokens.

The Three-Layer Token Architecture

Martin Fowler's comprehensive analysis identifies a proven three-layer pattern that effectively constrains design choices¹:

1. Option Tokens (Primitive/Base Layer)

Option tokens define what styles are available in the system¹. These are foundational elements like color palettes, spacing scales, and typography families:

{
  "color": {
    "$type": "color",
    "options": {
      "blue-100": {"$value": "#e0f2ff"},
      "blue-500": {"$value": "#78bbfa"},
      "blue-900": {"$value": "#0265dc"},
      "grey-100": {"$value": "#f8f8f8"},
      "grey-900": {"$value": "#000000"}
    }
  }
}

2. Decision Tokens (Semantic Layer)

Decision tokens specify how those options should be applied contextually¹. They create semantic meaning from primitive values:

{
  "color": {
    "decisions": {
      "surface": {"$value": "{color.options.grey-100}"},
      "text": {"$value": "{color.options.grey-900}"},
      "accent": {"$value": "{color.options.blue-900}"},
      "text-on-accent": {"$value": "{color.options.white}"}
    }
  }
}

3. Component Tokens (Application Layer)

Component tokens map decision tokens to specific UI parts, defining where styles are applied¹:

{
  "button": {
    "primary": {
      "background": {"$value": "{color.decisions.accent}"},
      "text": {"$value": "{color.decisions.text-on-accent}"}
    },
    "secondary": {
      "background": {"$value": "{color.decisions.surface}"},
      "text": {"$value": "{color.decisions.text}"}
    }
  }
}

Practical AI Constraint Systems

Validation-Based Approach

mtb24's experimental system demonstrates how to programmatically constrain AI output². The approach defines "constraints as data and validates against them, making AI output governable, not just impressive"².

The system includes²:

Design system contracts for AI prompting and validation
Deterministic components using only design tokens
Validation layers that verify compliance with allowed components and props

Rule-Based Validation

UXPin's research shows that AI consistency checks rely on rule-based validation using centralized design tokens³. The system can identify violations like incorrect colors and suggest proper tokens³: "if a designer uses a color like #FF5734 instead of the approved token (e.g., color-interactive-primary), the system flags the issue and suggests the correct token."

AI-Specific Implementation Strategies

Semantic Token Generation

vife.ai's approach demonstrates how AI can automatically generate semantic mappings⁴. Instead of manually mapping primitive tokens, AI analyzes visual hierarchy and suggests semantic relationships:

// AI-Generated Token Mapping
{
  "semantic": {
    "action-primary-bg": {
      "value": "{primitive.blue-500}",
      "description": "Background color for primary call-to-action buttons",
      "accessibility_check": "pass"
    }
  }
}

Token Migration and Refactoring

A practical starting point involves using AI to refactor existing CSS⁴: "feed a Large Language Model your CSS file and a list of your design tokens, asking it to replace the raw values with the token variables."

Governance Through AI Validation

Advanced implementations use AI for impact analysis⁴, scanning consuming repositories to detect breaking changes before merging component updates.

Technical Implementation Patterns

CSS Custom Properties Architecture

Modern implementations leverage CSS custom properties as the delivery mechanism⁵⁶:

:root {
  /* Primitive tokens */
  --color-blue-500: #3B82F6;
  --spacing-4: 1rem;

  /* Semantic tokens */
  --color-action-primary: var(--color-blue-500);
  --spacing-component-padding: var(--spacing-4);
}

Framework Integration

Recent implementations show integration with utility frameworks⁷⁸, where semantic tokens map directly to utility classes, constraining AI to select from approved design patterns rather than generating arbitrary CSS.

Multi-Platform Token Generation

Advanced systems generate tokens for multiple platforms⁷, ensuring consistency across CSS, iOS, Android, and other targets while maintaining the same constraint hierarchy.

Choosing the Right Layer Depth

Fowler's analysis suggests that two layers (option and decision tokens) work well for stable design systems, while three layers provide flexibility for evolving designs¹. The choice depends on how much constraint versus flexibility your AI-generated CSS needs.

Real-World Constraint Benefits

This hierarchical approach solves several AI-specific problems:

Prevents arbitrary values: AI must choose from predefined tokens rather than generating random hex codes or pixel values
Maintains semantic consistency: Decision tokens ensure AI understands the contextual meaning of design choices
Enables systematic validation: Component tokens provide clear rules for what combinations are valid
Supports automated governance: AI can validate its own output against the token hierarchy

The research shows that successful constraint systems combine structured token hierarchies with validation layers, creating "guardrails" that guide AI toward design-system-compliant CSS while maintaining the productivity benefits of automated code generation³.