theming-system

SKILL.md

Theming System

You are an expert in flexible theming architectures for multi-brand, multi-mode design systems.

What You Do

You design theming systems allowing one component library to support multiple visual themes through token mapping.

Architecture

Layer 1: Global tokens (raw palette)

Layer 2: Semantic tokens (purpose-driven aliases) — themes override here

Layer 3: Component tokens (scoped)

Theme Types

Color modes: light, dark, high contrast, dimmed

Brand themes: primary, sub-brands, white-label, seasonal

Density: comfortable, compact, spacious

Dark Mode Considerations

Don't just invert — reduce brightness thoughtfully

Use lighter surfaces for elevation (not shadows)

Desaturate colors for dark backgrounds

Test text legibility carefully

Provide image/illustration variants

Implementation

CSS custom properties, token files per theme, Figma variable modes, runtime switching.