skills.rest
wpank
wpankCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-patterns

Define design token hierarchies and theme switching for multi-brand systems.

11|4|Updated Feb 9, 2026
Search Tags:#theming#architecture#accessibility#design system#design tokens#style dictionary
One-click install
npx skills add https://github.com/wpank/ai --skill design-system-patterns-wpank
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-patterns
Source: https://github.com/wpank/ai/tree/main/skills/design-systems/design-system-patterns
Command: npx skills add https://github.com/wpank/ai --skill design-system-patterns-wpank

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides the foundational architecture for creating robust, scalable, and maintainable design systems, addressing challenges in token management, theming, and cross-platform consistency.

Core Features & Use Cases

  • Token Architecture: Defines a clear hierarchy for design tokens (primitive, semantic, component).
  • Theming: Implements flexible theme switching (light, dark, system) with SSR FOUC prevention.
  • Multi-Brand Support: Enables theming for white-label products.
  • Cross-Platform Output: Integrates with Style Dictionary for generating tokens for CSS, iOS, and Android.
  • Accessibility: Incorporates tokens for reduced motion, high contrast, and forced colors.
  • Use Case: You are building a design system for a SaaS product that needs to support both a light and dark theme, as well as a distinct theme for a major client's white-labeled version. This skill provides the core structure and patterns to achieve this.

Quick Start

Define your design token hierarchy and implement theme switching for your React application.

Frequently Asked Questions about design-system-patterns

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

FAQPage Schema
How do I structure design tokens for a scalable multi-brand design system?▼

Design tokens for a scalable system are structured into a hierarchy of primitive, semantic, and component layers. This architecture enables consistent theming infrastructure and supports multi-brand white-label product variations.

What is the best way to implement theme switching for light and dark modes without flash of unstyled content?▼

Implementing theme switching with SSR FOUC prevention mechanisms ensures smooth transitions between light, dark, and system themes. This theming infrastructure prevents visual flickering during server-side rendering and client hydration.

Can I use Style Dictionary to generate cross-platform design tokens for CSS, iOS, and Android?▼

Yes, integrating Style Dictionary into your token pipeline automates cross-platform design token generation for CSS, iOS, and Android. This strategy ensures automated and consistent token distribution across all target platforms.

How do design systems handle accessibility requirements like high contrast and reduced motion?▼

Design systems handle accessibility by incorporating specific tokens for reduced motion, high contrast, and forced colors. These accessibility considerations ensure interfaces adapt to user preferences and maintain compliance across themes.

Does this design system architecture support white-label product theming?▼

Yes, this design system architecture supports white-label product theming through its multi-brand infrastructure. It enables distinct theme switching mechanisms for different client brands while maintaining a foundational token hierarchy.

Related Skills

Explore More Design & Creative Skills→
TimeKastTimeKast

kb-design-tokens

Converts hardcoded UI styles to reusable tokens via Tailwind's @apply.

Official
Advanced
mrodrigues1mrodrigues1

design-system-patterns

Generate design tokens and platform outputs with Style Dictionary pipelines.

Community
Advanced
suhwansuhwan

theme-system

Implement a three-tier token system enabling dark mode in Next.js and Tailwind apps.

Community
Advanced
JhabbigJhabbig

design-system-patterns

Design scalable design system foundations with tokens, theming, and component architecture.

Community
Advanced