design-philosophy

What problem does it solve?

Understanding and consistently applying the core principles of a hybrid design system (Joy UI + Base UI) can be challenging, leading to inconsistent UI, development inefficiencies, and misaligned design decisions. This Skill provides immediate access to the foundational knowledge needed to build cohesive user interfaces.

Core Features & Use Cases

• Unified Design Guidance: Offers a clear framework for making design decisions, combining Joy UI's visual aesthetics with Base UI's robust accessibility and composition patterns.
• Variant & Color System Clarity: Explains the semantic meaning and appropriate usage of the four variants (solid, soft, outlined, plain) and five colors, ensuring visual hierarchy and meaning are consistently applied.
• Architectural Patterns: Details how components are built using Base UI, sheetVariants, CVA, and ColorContext for intelligent inheritance and flexibility.
• Use Case: When a designer or developer is unsure about the correct variant or color to use for a new button, this Skill provides instant clarification based on the design system's principles.

Quick Start

Explain the difference between solid and soft variants in the base-joy design system and when to use each.