---
title: Design System Patterns
category: product
entity_type: skill
price: $15
canonical: https://forgehouse.ai/skills/design-system-patterns/
lang: en
hreflang_alt: https://forgehouse.ai/tr/skiller/design-system-patterns/
last_updated: 2026-06-20
---

# Design System Patterns

> Build scalable design systems with design tokens, theming infrastructure, and component…

A blueprint for building scalable design systems with proper design tokens, theming infrastructure, and component architecture. It establishes a three-tier token hierarchy (primitive, semantic, component), wires up light/dark and multi-brand theming, and standardizes component APIs with variant systems. Gives you a consistent, maintainable UI foundation across web and mobile.

## Use cases
- Creating design tokens for colors, typography, spacing, and shadows
- Implementing light/dark theme switching with CSS custom properties
- Building a multi-brand theming system
- Architecting a component library with consistent variant APIs
- Setting up a Figma-to-code token pipeline with Style Dictionary
- Establishing semantic token hierarchies and naming conventions

## Benefits
- Roll out brand changes from a single source instead of editing dozens of files
- Eliminate visual inconsistency across web and mobile platforms
- Speed up developer onboarding with predictable, well-named tokens
- Prevent theme-switch flicker and design drift with proven architecture

## What’s included
- Three-layer token hierarchy: primitive, semantic, and component tokens
- React theme provider with system preference detection and persistence
- CVA-based variant and size system for consistent component APIs
- Style Dictionary config generating CSS, SCSS, iOS Swift, and Android XML
- Compound, polymorphic, and slot-based composition patterns
- Best practices for token naming, versioning, and FOUC prevention

## Who it’s for
Front-end engineers and design-system owners building a consistent, scalable UI foundation across multiple platforms and brands.

## How it runs
The skill builds a design system as a strict three-layer token cascade plus theming and component architecture. The actual construction order:
1. Defines the token hierarchy in three layers of CSS custom properties: primitive tokens hold raw values (color scales, spacing, radii), semantic tokens give them meaning (text-primary, surface-elevated), component tokens map them to specific usage (button-bg, card-border).
2. Enforces one-way cascade flow: a component token may only reference a semantic token, which references a primitive. A component reaching directly into a primitive is an architecture violation, because it silently breaks theme switching.
3. Wires theme infrastructure: a React ThemeProvider resolving light, dark or system preference via prefers-color-scheme, persisting the choice, and applying the theme class before first paint so users never see the unstyled flash.
4. Builds variant systems with class-variance-authority: base styles plus declared variant and size maps with defaultVariants, so a button with nothing specified still renders correctly instead of exploding into ad-hoc props.
5. Configures the Style Dictionary pipeline so one token source compiles to every platform: CSS variables, SCSS, Swift classes for iOS and XML resources for Android, with output references preserved.
6. Applies the naming and governance rules: tokens named by purpose not appearance, token changes versioned like API changes, and every theme combination tested against every component before release.

## FAQ
### Is this tied to React, or can I use the token structure with Vue or plain CSS?
The three-tier token model and theming wiring are framework-agnostic, built on CSS custom properties. The component API conventions apply wherever you build, the patterns do not assume one framework.

### Three token tiers sounds heavy for a small product. Is that hierarchy worth it early?
The primitive, semantic and component split is what lets you reskin or add a brand later without touching every component. On a tiny one-off it is overhead, on anything you expect to theme or scale it pays back fast.

### Does it generate my components, or just define how they should be structured?
It sets the architecture: token tiers, theming and variant APIs, so your components stay consistent. Writing the actual components is still on you, this is the foundation, not a component factory.

## Price
$15, one-time, no subscription. VAT included.

Related guide: [Building a design system with Claude Design](https://forgehouse.ai/guides/claude-design-design-system/)