Menu
Multi-brand and theming: derive palettes from base, palette overrides, data-theme, white-label UI using UDS tokens.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Generates complete brand identity systems with color psychology, typography pairings, and visual identity rules mapped to Universal Design System palettes. Use when the user asks for brand identity, brand design, brand colors, style guide, or visual identity.
Component documentation and Storybook: stories, MDX, props tables, usage guidelines from UDS component specs.
Audits existing UIs for WCAG accessibility, color contrast, typography hierarchy, spacing consistency, and industry anti-patterns. Generates scored reports with actionable fixes. Use when the user asks for design audit, UI audit, accessibility audit, or design review.
Design system governance and scaling: centralized vs federated, lifecycle, contribution model, multi-team adoption.
Figma to code handoff using UDS tokens. Align Figma variables with design-tokens.json, naming conventions, Dev Mode, and token sync.
Internationalization and right-to-left layout using UDS localization data. Logical CSS properties, dir="rtl", text expansion, and RTL mapper for existing CSS.
| name | multi-brand-theming |
| description | Multi-brand and theming: derive palettes from base, palette overrides, data-theme, white-label UI using UDS tokens. |
Use this skill when the user needs multi-brand, white-label, custom theming, or custom colors on top of the Universal Design System. UDS has 9 structural palettes and a palette generator: you can provide your own colors (e.g. hex values) and UDS generates a full palette (primary, secondary, accents, neutrals, WCAG-aware) and merges it into the token set.
data-theme.tokens/design-tokens.json under theme.<palette> and optionally theme.<palette>.dark for dark mode.One surface = one palette. Do not mix palette token sets on the same page.
data-theme on the root (or app wrapper): <html lang="en" data-theme="minimal-saas">. For dark mode, add a class (e.g. docs-dark) and define overrides under [data-theme="X"].docs-dark in CSS.document.documentElement.setAttribute('data-theme', 'corporate'); — use the palette slug (e.g. corporate, gradient-startup, ai-futuristic).data-theme on a subtree (e.g. <div data-theme="apple-minimal">) so one page has different sections with different palettes; use sparingly for consistency.| Palette | Identity | Best for |
|---|---|---|
| minimal-saas | Balanced, neutral | Product UI, SaaS apps |
| gradient-startup | High-energy gradients | Marketing, landing pages |
| ai-futuristic | Sharp, dark-native | Dev tools, AI products |
| corporate | Conservative, squared | Enterprise, regulated |
| apple-minimal | Smooth, refined | Premium consumer |
| illustration | Friendly, rounded | Education, creative |
| dashboard | Compact, data-dense | Analytics, admin panels |
| bold-lifestyle | Brutalist, 0px radius | Fashion, media |
| minimal-corporate | Subtle, understated | Professional services |
UDS can generate a full palette from user-provided colors (e.g. one or more hex codes). The palette engine derives primary, secondary, accent, neutrals, and ensures WCAG contrast guidance. Output is merged into tokens/design-tokens.json and tokens/figma-tokens.json so you use it like any built-in palette via data-theme="<name>".
Use the palette CLI to derive a new palette from your brand colors (user input); it merges into tokens/design-tokens.json and tokens/figma-tokens.json:
# One primary color (secondary/accent derived)
python src/scripts/palette.py create --name my-brand --colors "#3B82F6"
# Multiple colors, round shape
python src/scripts/palette.py create --name duo-tone --colors "#E8590C,#7048E8" --shape round
# List built-in and custom palettes
python src/scripts/palette.py list
# Preview color harmony before creating
python src/scripts/palette.py preview --colors "#3B82F6"
Custom palettes live under tokens/custom/ and are merged into the main token files. After creation, use data-theme="my-brand" (or the name you gave). Ensure WCAG contrast: run npm run audit after adding or changing palette colors.
If available, get_palette returns the full token set for any palette (light/dark). Use it to show users exact values for a chosen theme or to compare palettes.
| Task | Command or action |
|---|---|
| Apply palette | data-theme="<palette-slug>" on html or container |
| Create custom palette | python src/scripts/palette.py create --name <name> --colors "#hex" [--shape round|square|balanced] |
| List palettes | python src/scripts/palette.py list |
| Dark mode | Same palette; overrides under [data-theme="X"].docs-dark (or your dark class) |
| Source of truth | tokens/design-tokens.json — palette overrides under theme.<palette> |