multi-brand-design-system
CommunityReskin multiple apps with one shared design system.
Design & Creative#accessibility#design system#glassmorphism#motion design#token architecture#multi-brand ui
Authortlennon-ie
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It solves the problem of building and maintaining separate design systems for sibling products that must share infrastructure while still feeling distinct in brand identity.
Core Features & Use Cases
- One system, brand-skinnable: Re-skin the entire UI by switching a single root attribute so components never contain brand conditionals.
- Token layering architecture: Use primitive (shared), brand (per-product overrides), and semantic (component contract) tokens to keep customization controlled and scalable.
- Glassmorphic, accessible styling: Standardize dark glass patterns with consistent focus states, contrast expectations, reduced-motion behavior, and fallbacks for performance.
Quick Start
Configure primitive tokens globally, define per-brand overrides at the root via data-brand values, and wire components to consume only semantic tokens so the UI re-skins without component changes.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: multi-brand-design-system Download link: https://github.com/tlennon-ie/product-building-agents/archive/main.zip#multi-brand-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.