Token Architecture Diagram

A comprehensive diagram showing the token architecture and workflow for Spectrum, Adobe's design system.

---
title: Spectrum Token Architecture
config:
  theme: base
  themeVariables:
    primaryColor: "#F8F8F8"
    primaryTextColor: "#222222"
    primaryBorderColor: "#B1B1B1"
    lineColor: "#B1B1B1"
---

flowchart TD
    subgraph "Authoring Tooling"
        AT1["Component<br/>Definitions"]
        AT2["Component<br/>Asset<br/>Editor"]
        AT3["Component<br/>Sample<br/>Editor"]
    end

    subgraph "Base System Definitions"
        BSD1["Sizing<br/>Color Palette<br/>Font Properties"]
        BSD2["ARIA<br/>High Contrast<br/>Defaults"]
        BSD3["DARK<br/>High Contrast<br/>Properties"]
        BSD4["DARK<br/>Standards"]
        BSD5["DARK<br/>High Contrast<br/>Extensions"]
        BSD6["DARK<br/>High Contrast<br/>Additions"]
        BSD7["ARIA<br/>High Contrast<br/>Additions"]
        BSD8["Global Tokens"]
        BSD9["Alias Tokens"]
        BSD10["System<br/>Defaults"]
        BSD11["System<br/>Extensions"]
        
        BSD1 --> BSD5
        BSD2 --> BSD6
        BSD3 --> BSD7
        BSD8 --> BSD9
        BSD9 --> BSD10
        BSD10 --> BSD11
    end

    subgraph "Component Definitions"
        CD1["Component<br/>Patterns"]
        CD2["Component<br/>Relationships"]
        CD3["Component<br/>Behaviors"]
        CD4["Base Layer"]
    end

    subgraph "Subsystem Overrides"
        SO1["System Specific<br/>Files"]
        SO2["Component<br/>Trees"]
        SO3["Component<br/>Base Layer"]
        SO4["Component<br/>Extensions"]
        SO5["Base Layer"]
    end

    subgraph "Core Data Manager"
        CDM1["Global Stacks"]
        CDM2["Split Themed<br/>Collections"]
        CDM3["Assembled Groups"]
        CDM4["API Packages"]
    end

    subgraph "Platform SDK"
        PS1["Web Native<br/>Collections"]
        PS2["Testing"]
        PS3["Documentation"]
        PS4["Component<br/>Reporting"]
        PS5["Linting"]
    end

    %% Connections from Authoring Tooling
    AT1 --> CD1
    AT2 --> CD2
    AT3 --> CD3

    %% Connections from Base System to Component
    BSD11 --> CD4
    BSD10 --> CD4

    %% Connections from Component to Subsystem
    CD1 --> SO1
    CD2 --> SO2
    CD3 --> SO3
    CD4 --> SO4
    CD4 --> SO5

    %% Connections from Subsystem to Core Data Manager
    SO1 --> CDM1
    SO2 --> CDM2
    SO3 --> CDM3
    SO4 --> CDM4
    SO5 --> CDM4

    %% Connections from Core Data Manager to Platform SDK
    CDM1 --> PS1
    CDM2 --> PS2
    CDM3 --> PS3
    CDM4 --> PS4
    CDM4 --> PS5

linkStyle default stroke-width:1px

Loading

This architecture diagram illustrates the complete token system workflow from authoring through to platform distribution:

Architecture Layers

Authoring Tooling

The top layer where design tokens are authored and managed, including component definitions and editing tools.

Base System Definitions

Core foundation layer containing global tokens, color palettes, sizing, and theme variations (light/dark, high contrast).

Component Definitions

Component-specific patterns, relationships, and behaviors that inherit from the base system.

Subsystem Overrides

Platform or system-specific customizations and extensions of the component definitions.

Core Data Manager

Central processing layer that assembles, organizes, and packages token data for distribution.

Platform SDK

Final distribution layer providing platform-specific implementations, tooling, and documentation.

This multi-layered approach ensures consistency across all Spectrum implementations while allowing for platform-specific optimizations and customizations.