Color System Hierarchy and Usage Guidelines

Color Hierarchy

The color system follows a strict hierarchical structure for dark-mode theme:

[Primitive Color Value]
└── [Theme Application]
    ├── [Theme Application: Static]
    │   └── [Semantic Application]
    │       └── [Color Group]
    │           └── [Color Subgroup]
    │               ├── [Color Subgroup: Grey]
    │               └── [Color Version]
    │
    ├── [Theme Application: Status]
    │   └── [Status]
    │       └── [Semantic Value]
    │           └── [Component Value]
    │               └── [Color Group]
    │                   ├── [Version Hierarchy]
    │                   └── [Color Subgroup: Alert]
    │
    └── [Theme Application: Contrast Shades]
        └── [Color Group]
            └── [Color Subgroup]
                └── [Contrast Level]

Usage Guidelines

Interactive Elements

MUST use colors from the status theme application collection
NEVER use values directly from the color-theme collection
Colors are aliased through the status hierarchy to ensure consistent interactive states

Static Elements

For non-interactive elements (e.g., page backgrounds)
SHOULD use the static collection directly within the color-theme collection
Ensures consistent appearance regardless of state

Decorative Elements

MAY use the contrast shades collection
Primarily intended for edge cases like SVG illustrations
MUST NOT be used for:
- Structural elements
- Semantic elements
- Borders
- Text
- Surfaces

Visual Reference

[Note: Two images showing the color system hierarchy and relationships were attached to the original PR]

dev-launchers / dev-launchers-platform

feat(design-system): implement light mode color themes #2129

Color System Hierarchy and Usage Guidelines

Color Hierarchy

Usage Guidelines

Interactive Elements

Static Elements

Decorative Elements

Visual Reference

⚠️ No Changeset found