Design Tokens

Structure

Base Tokens (base/)

Foundation design tokens organized by category:

• spacing.json – spacing scale from 0 to 1600 for margins, padding, gaps
• borders.json – border radius and width scales for consistent corner rounding and line weights
• opacity.json – transparency levels for overlays and visual effects
• colors/ – color systems organized by theme:
  • palettes/fluent/ – 11 Fluent theme variations (blue, cool-blue, desert, mint, moss, orchid, purple, rose, rust, steel, storm)
  • palettes/dx-office/ – experimental DX Office theme (orange)
  • icons/ – cross‑platform icon color palettes per theme and mode (Fluent, DX Desktop, Blazor Default; light/dark)
  • utility/ – utility color definitions for each theme
• typography/ – font families, weights, sizes, and line heights

Semantic Tokens (semantic/)

Theme-specific tokens that reference base tokens, organized by type:

• box-shadow/ – shadow definitions for different themes
• colors/ – semantic color mappings for themes (light/dark modes)
• typography/ – semantic typography definitions

Global Tokens (global/)

Global tokens used across different contexts:

• dx-office/ – theme builder configurations
• fluent/ – theme builder configurations

Component Tokens (components/)

Component-specific tokens organized by platform/layer:

• core/ – core component definitions (agnostic)
• desktop/ – desktop-specific component tokens
• web/ – web-specific component tokens

Figma Utilities (figma-utils/)

Design-specific tokens exported to Foundation Figma files, which then populate UI Kit files:

• box-shadow/ – figma-optimized shadow definitions
• decorative-colors/ – additional color variants for design tools
• icon/ – icon system properties and sets
• typography/ – font family mappings and text styles

These tokens bridge the gap between the design system and Figma design workflow, ensuring designers work with the same token foundation as developers.

Icon colors

Base icon colors live under tokens/base/colors/icons/ and provide curated tints for glyphs independent of text colors.

• Themes: fluent/, dx-desktop/, blazor-default/
• Modes: light.json, dark.json
• Typical keys: color.blue, color.red, color.green, color.yellow, color.purple, color.black, color.white

Example: tokens/base/colors/icons/fluent/light.json

Management

This repository is managed exclusively through Tokens Studio plugin. All JSON files are auto-generated – do not edit manually.

Format

Design tokens follow the Design Tokens Community Group specification.