design-system-architect

# Design System Architect (2026 Edition — shadcn/ui Registry) [English](#english) | [Bahasa Indonesia](#bahasa-indonesia) --- <a name="english"></a> ## English ### Description Expert guide for building and maintaining scalable UI design systems. Covers design tokens with OKLCH and Tailwind v4 `@theme`, **Material Design 3 (M3)** integration, headless component primitives (Radix UI, **Base UI 1.x**), **shadcn/ui registry** for distributable component libraries, CVA for type-safe variants, and WCAG 2.2 accessibility compliance. ### Trigger Conditions - Building a shared UI component library from scratch. - Setting up design tokens (colors, typography, spacing) with Tailwind v4. - Applying Material Design 3 (M3) principles (https://m3.material.io/). - Using headless primitives (Radix UI, Base UI 1.x) with custom styling. - Distributing components via the **shadcn/ui registry** format. - Auditing a component library for WCAG 2.2 accessibility compliance. ### Design Token Foundation (Tailwind v4 + OKLCH) ```css /* packages/ui/src/tokens.css */ @import "tailwindcss"; @theme { /* --- Color System (OKLCH for wide-gamut P3 displays) --- */ /* Brand */ --color-brand-50: oklch(97% 0.015 250); --color-brand-100: oklch(93% 0.04 250); --color-brand-500: oklch(55% 0.22 250); --color-brand-700: oklch(40% 0.18 250); --color-brand-900: oklch(20% 0.10 250); /* Semantic (maps to brand in light/dark automatically) */ --color-primary: var(--color-brand-500); -...