Multi Brand Theming
Generate custom brand palettes from hex colors using UDS tokens
What You Can Do
Convert your brand colors (hex input) into complete, WCAG-compliant palettes that integrate seamlessly with the Universal Design System token architecture. Manage multiple brands or products with distinct visual identities while maintaining shared component libraries and consistent design foundations. Switch between themes at runtime and create dark mode variants automatically.
Features
input your brand colors and generate primary, secondary, accent, neutral, and status color palettes automatically
create distinct visual identities for multiple products using a single shared component library
custom palettes map directly to the Universal Design System token model with locked foundation layers
auto-generate dark theme tokens from light brand colors while maintaining WCAG contrast compliance
apply palettes dynamically via `data-theme` attribute without component code changes
customize individual token values (colors, shadows, border-radius, display fonts) per brand while inheriting shared foundations
maintain separate `tokens/design-tokens.json` files for each brand within a single design system
ensure accessibility compliance across all generated palette colors and contrast ratios
Example Output
Example 1: Brand Color Input
Brand colors: Primary #0052FF, Secondary #FF6B35, Accent #00D4AA
Generated Palette Output:
{
"theme": {
"myBrand": {
"color-primary": "#0052FF",
"color-primary-hover": "#0041CC",
"color-secondary": "#FF6B35",
"color-accent": "#00D4AA",
"color-text-default": "#1A1A1A",
"color-bg-default": "#FFFFFF",
"color-status-success": "#00AA44"
},
"myBrand-dark": {
"color-primary": "#4D9FFF",
"color-text-default": "#F5F5F5"
}
}
}
Example 2: Multi-Brand Setup Apply different themes to different product surfaces:
<!-- Product A -->
<main data-theme="brand-a">...</main>
<!-- Product B -->
<aside data-theme="brand-b">...</aside>
Both use identical component code; only token values change.
What's Included
- SKILL.md: multi-brand theming instruction file with UDS token architecture reference
- Palette generator template: hex color input → full palette JSON structure
- Token override checklist: which foundation layers stay locked vs which palette tokens vary by brand
- Multi-brand implementation guide: organize separate `design-tokens.json` files per brand
- Dark mode variant workflow: auto-generate dark palettes with WCAG compliance verification
Who It's For
- Brand managers — manage multiple brand identities and visual guidelines across product lines
- Design system owners — implement white-label and multi-tenant theming at scale
- Product leads — launch co-branded or white-label products with shared component libraries
- Marketing ops teams — customize UI for different market segments or customer tiers
- Enterprise UX teams — maintain brand consistency across distributed product portfolios
Best For
- Creating white-label or multi-tenant SaaS products with brand-specific UI
- Implementing dark mode variants alongside light brand themes
- Building enterprise design systems that support multiple owned brands
- Converting brand guidelines (hex colors, fonts) into token-driven palettes
- Managing runtime theme switching without component code duplication
You might also like
You can develop comprehensive, inclusive recruitment strategies that identify and engage diverse talent from underrepresented groups. This skill helps you analyze your current talent gaps, recommend targeted sourcing channels, generate bias-conscious job descriptions, and build sustainable diversity pipelines that expand your candidate pool while reducing unconscious bias in hiring processes.
by imbue-ai
Conduct a comprehensive audit of your recruitment process to identify bottlenecks, inefficiencies, and cost drivers. This skill analyzes your hiring workflow end-to-end, benchmarks performance against industry standards, and delivers a prioritized optimization roadmap with specific, actionable recommendations to improve time-to-hire, reduce costs, and enhance candidate experience.
by imbue-ai
You can design end-to-end recruiting workflows tailored to your hiring process, configure complex ATS logic including approval gates and conditional routing, and troubleshoot workflow bottlenecks. Claude helps you map candidate journeys, implement automation rules, and align workflows with your team's hiring standards—whether you're scaling from startup to enterprise or optimizing existing systems.
by imbue-ai
You can generate comprehensive market research reports (50+ pages) that rival top-tier consulting firm deliverables. The skill combines deep market data gathering via research integration, multi-framework strategic analysis (Porter's Five Forces, PESTLE, SWOT, TAM/SAM/SOM, BCG Matrix), and professional visualization to produce reports suitable for investment decisions, competitive analysis, and strategic planning.
by imbue-ai
You can rapidly map talent ecosystems across industries, organizations, and skill domains. Claude analyzes relationships between talent, roles, expertise areas, and organizational structures to create comprehensive ecosystem visualizations. Get strategic insights into talent concentration, skill gaps, and competitive positioning through data-driven mapping.
by imbue-ai
Generate tailored technical interview questions, evaluate candidate responses against predefined competency rubrics, and produce standardized assessment reports. This skill helps you conduct fair, consistent technical interviews while documenting candidate strengths, gaps, and hiring readiness across all technical roles.
by imbue-ai
Analyze your job descriptions for language that may exclude underrepresented candidates, identify diverse talent pools across multiple sourcing channels, and build actionable equity-focused sourcing strategies. You'll audit hiring processes for bias, create targeted outreach plans, and establish metrics to measure progress toward meaningful diversity goals.
by imbue-ai
This skill helps you systematically evaluate technical candidates by analyzing their experience, assessing skill gaps, identifying red flags, and generating structured qualification reports. You can quickly screen resumes, prepare targeted interview questions, benchmark candidates against role requirements, and make data-driven hiring decisions—cutting time-to-hire by 60% while improving quality of hires.
by imbue-ai