theming-system
owl-listener/designer-skills
Design multi-brand and multi-mode theming architectures using token layers.
What is theming-system?
Expert guidance for building flexible theming systems that let one component library serve multiple visual themes—brand variants, dark mode, high-contrast, and density options. Use this when you need to support multiple themes; for single palettes use color-system, or for dark mode specifics use dark-mode-design.
- Design three-layer token architecture: global palette, semantic overrides, and component-scoped tokens
- Support multiple theme types: color modes (light, dark, high-contrast, dimmed), brand variants, and density options
- Implement dark mode thoughtfully with brightness reduction, lighter surfaces for elevation, and desaturated colors
- Map themes through CSS custom properties, token files, Figma variable modes, or runtime switching
- Test component behavior across all themes and validate text legibility and OS preference respect
How to install theming-system
npx skills add https://github.com/owl-listener/designer-skills --skill theming-systemHow to use theming-system
- 1.Define your global token palette (raw colors, spacing, typography)
- 2.Create semantic token aliases that map global tokens to purposes (e.g., surface-primary, text-secondary)
- 3.Build theme override files for each variant (light, dark, brand-A, high-contrast)
- 4.Implement tokens as CSS custom properties or your chosen platform (Figma variables, design tokens format)
- 5.Test every component in every theme combination and validate legibility
- 6.Document which tokens are themeable vs. fixed to guide component authors
Use cases
- Building a white-label design system that adapts to different brand color palettes
- Implementing dark mode alongside light mode with proper contrast and elevation handling
- Creating a multi-brand component library where each brand has distinct visual identity
- Supporting accessibility requirements like high-contrast modes for users with visual impairments
- Designing density variants (comfortable, compact, spacious) that work across all color themes
- Design system architects
- UI/UX designers building multi-brand or multi-theme systems
- Frontend engineers implementing theming infrastructure
- Product teams needing dark mode and brand flexibility
theming-system FAQ
Use theming-system when you need multiple themes (brands, modes, densities) in one system. Use color-system for a single palette, and dark-mode-design if you're focusing specifically on dark mode craft.
Reduce brightness thoughtfully rather than inverting, use lighter surfaces for elevation instead of shadows, desaturate colors for dark backgrounds, and always test text legibility carefully.
Layer 1 is raw global palette, Layer 2 is semantic tokens (where themes override), and Layer 3 is component-scoped tokens. This separation lets you change themes by overriding only Layer 2.
Yes—respect system dark/light mode preferences and provide manual override options so users can choose independently of their OS setting.
Provide theme-specific variants for images and illustrations, especially for dark mode, since inverting or desaturating may not work well for photography or complex graphics.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: theming-system
description: Design theming architecture — brand variants, dark mode, and high-contrast — mapped through token layers. Use when one system must serve multiple themes. For a single palette use color-system (ui-design); for dark mode craft use dark-mode-design (ui-design).
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.
Best Practices
- Tokens-first: themes emerge from overrides
- Test every component in every theme
- Respect OS theme preferences
- Document themeable vs fixed tokens
Related skills
More from owl-listener/designer-skills and the wider catalog.
typography-scale
Create modular type scales with harmonious size, weight, and line-height relationships for consistent digital typography.
usability-test-plan
Design comprehensive usability test plans with research questions, methodology, participant criteria, and facilitation guides.
user-flow-diagram
Diagram screen-level paths, decisions, and branches to map feature traversal.
user-persona
Build research-grounded personas with goals, frustrations, and behavioral patterns for consistent user reference.
ux-writing
Write clear, helpful interface copy that guides users through your product.
version-control-strategy
Define versioning strategy for design files, components, and libraries to keep collaboration organized and traceable.