Theming System

If you're building a design system that needs to serve multiple brands or support light and dark modes without duplicating components, this gives you the token architecture to pull it off. It's built around three layers: global tokens for your raw palette, semantic tokens where theme overrides happen, and component tokens for scoped values. The guidance on dark mode is practical, like using lighter surfaces for elevation instead of shadows and desaturating colors against dark backgrounds. It covers CSS custom properties, Figma variable modes, and runtime switching. The key insight is treating themes as overrides at the semantic layer rather than forking your entire component library.

Install to Claude Code

npx -y skills add owl-listener/designer-skills --skill theming-system --agent claude-code