Patterns for creating design systems with personality and distinctive aesthetics. Covers aesthetic documentation, color token architecture, typography systems, layered surfaces, and motion. Use when building design systems that go beyond generic templates. Triggers on design system, design tokens, aesthetic, color palette, typography, CSS variables, tailwind config.
Distinctive Design Systems 1.0.0 - Initial Release - Provides practical patterns for building visually distinctive design systems, including aesthetic documentation, color token architecture, advanced typography, layered surfaces, and motion. - Includes real-world examples to inspire unique UI identities (e.g., Retro-Futuristic, Warm Neutral Cyberpunk). - Details a three-layer color token system using CSS variables, Tailwind configuration, and TypeScript tokens. - Outlines scalable typography systems and responsive type scales. - Introduces layered surface and motion token patterns for rich, interactive interfaces. - Demonstrates advanced UI treatments such as glass and glow effects with CSS utility examples.