Theming System

owl-listener/designer-skills/design-systems/skills/theming-system

by owl-listener9a6930cf84a8No license2.8K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago

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).

Instructions onlyDesign & Creative
AI-generated overview

Designs theming architecture for multi-brand, multi-mode design systems using layered design tokens.

What it does
This skill guides the design of a theming architecture that lets one component library serve multiple visual themes through token mapping. It defines three token layers (global palette, semantic aliases, component tokens) and covers theme types such as color modes, brand themes, and density. It also gives dark mode considerations and implementation approaches including CSS custom properties, per-theme token files, Figma variable modes, and runtime switching.
When to use it
Use it when a single design system or component library must support several themes, such as multiple brands, light and dark modes, or high-contrast variants. It is also relevant when planning how themes override tokens and how theme switching is implemented.
Requirements
No scripts or special tooling are required; it is instructions only. It assumes a design system context and may reference CSS custom properties, token files, Figma variable modes, and runtime switching as implementation options.

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

Source and attribution

Source:owl-listener/designer-skillsindesign-systems/skills/theming-systemat commit9a6930c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from owl-listener/designer-skills

Zeigarnik Effect

owl-listener

Applies the Zeigarnik Effect to design progress indicators, saved drafts, interruption handling and re-engagement prompts.

Design & Creative2.8Kupdated 4 weeks ago

Teslers Law

owl-listener

Applies Tesler's Law to decide whether product or user should absorb irreducible complexity in a design.

Design & Creative2.8Kupdated 4 weeks ago

Von Restorff Effect

owl-listener

Applies the Von Restorff (isolation) effect to make one key element visually distinct in a UI or layout.

Design & Creative2.8Kupdated 4 weeks ago

State Machine

owl-listener

Models UI component behavior as finite state machines with states, events, transitions, guards, and actions.

Design & Creative2.8Kupdated 4 weeks ago

Visual Hierarchy

owl-listener

Guidance for establishing visual hierarchy in interface layouts using size, weight, colour, spacing and position.

Design & Creative2.8Kupdated 4 weeks ago

Serial Position Effect

owl-listener

Applies the Serial Position Effect to order menus, lists, and step sequences so key items land where users recall them best.

Design & Creative2.8Kupdated 4 weeks ago

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today