skills.rest
mkatogui
mkatoguiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

multi-brand-theming

Generate brand palettes and merge hex colors into WCAG-conscious design tokens.

3|Updated Mar 11, 2026
Search Tags:#branding#theming#tokens#generate#palette#data-theme
One-click install
npx skills add https://github.com/mkatogui/universal-design-system --skill multi-brand-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: multi-brand-theming
Source: https://github.com/mkatogui/universal-design-system/tree/main/plugins/universal-design-system/skills/multi-brand-theming
Command: npx skills add https://github.com/mkatogui/universal-design-system --skill multi-brand-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Multi-brand theming enables organizations to manage multiple brand identities and white-label experiences within a single Universal Design System, reducing duplication and ensuring consistency across products.

Core Features & Use Cases

  • Palette generation from base colors or hex inputs, merging into a cohesive token set.
  • Brand overrides and per-brand tokens to tailor appearances without duplicating components.
  • Runtime theming via data-theme with support for light/dark modes and quick brand switching.

Quick Start

Provide base brand colors to generate a full palette and apply it with data-theme on the root element.

Frequently Asked Questions about multi-brand-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage multiple brand themes in a single design system?▼

Multi-brand theming manages multiple brand identities within a single design system by applying base palettes and brand overrides, eliminating component duplication while maintaining visual consistency across white-label products.

How do I generate design tokens from a hex color input?▼

Generate design tokens from hex color input by providing base brand colors to produce a full palette. The system merges these inputs into a cohesive token set with WCAG-conscious contrasts for accessibility compliance.

How does runtime theming with data-theme work for brand switching?▼

Runtime theming with data-theme works by applying generated palettes to the root element, enabling quick brand switching and light/dark mode toggling without reloading or duplicating component code.

Can I apply per-brand overrides without duplicating UI components?▼

Per-brand overrides tailor appearances without duplicating components by injecting brand-specific tokens into the shared design system, allowing distinct white-label visual identities using a single component library.

Does multi-brand theming support WCAG-conscious color contrasts?▼

Multi-brand theming supports WCAG-conscious contrasts by evaluating generated palette colors for accessibility, merging hex inputs into tokens while maintaining compliant contrast ratios for light and dark modes.

When do I need white-label theming for multi-brand apps?▼

White-label theming is needed when delivering multi-brand apps requiring distinct visual identities from a shared codebase, enabling organizations to scale multiple brands using base palettes and runtime data-theme overrides.

Related Skills

Explore More Design & Creative Skills→
MiniMax-AIMiniMax-AI
13.3k

color-font-skill

Generate brand-safe color palettes and font pairings for PPT designs.

Official
Intermediate
gil00pitagil00pita

css-variables

Define CSS custom properties in :root for centralized theming and runtime customization.

Community
Advanced
Adelie-SquadAdelie-Squad
17

ui-designer

Create and apply design tokens for color, typography, and spacing.

Official
Intermediate
RSHVRRSHVR
1

elite-brand-design

Convert brand identity inputs into structured design tokens and style guidelines.

Community
Advanced