How does the variant system work in Base-Joy?

Base-Joy uses four specific variants—Solid, Soft, Outlined, and Plain—to communicate visual hierarchy and importance consistently across all semantic colors.

What is the Base-Joy design philosophy?

It is a hybrid design system approach that utilizes Base UI for robust, accessible behavior and Joy UI for modern, highly customizable visual styling.

Does this skill help with web accessibility?

Yes, it prioritizes 'Accessibility First' by leveraging Base UI's accessible primitives, ARIA patterns, and keyboard navigation management as the foundation for every component.

When should I create an unstyled component versus a styled one?

Create an unstyled component when Base UI doesn't provide the behavior, for complex interactions, or structural requirements. Use styled components for visual variants or purely aesthetic concerns.

How is component inheritance handled in this system?

It uses ColorContext and SizeContext to allow child components to automatically inherit properties from parent containers, such as Sheets, ensuring a unified look with minimal code.

Base-Joy Design System Philosophy

Name: Base-Joy Design System Philosophy
Author: sernstberger

bysernstberger

デザインツール

Standardizes UI component development by combining Joy UI aesthetics with Base UI accessibility primitives.

概要

This skill provides comprehensive guidance for building web interfaces using the Base-Joy design system, which bridges Joy UI’s polished visual language with Base UI’s unstyled, accessible foundation. It helps developers maintain visual consistency across variants (solid, soft, outlined, plain), implement semantic color systems, and adhere to a strict component architecture that separates behavior from styling. It is particularly useful when creating new UI components, ensuring ARIA compliance, or customizing existing design patterns without breaking accessibility standards.

主な機能

Enforces Base UI accessibility patterns and ARIA standards
Manages context-aware inheritance for colors and sizing
Guides a three-layer component architecture for maximum flexibility
Provides rules for semantic color usage and interactive state behaviors
Standardizes Joy UI visual variants: Solid, Soft, Outlined, and Plain
0 GitHub stars

ユースケース

Building new accessible UI components from scratch using Base UI primitives
Theming and customizing an existing Base-Joy application without breaking accessibility
Auditing UI code for consistency with the established design system principles

概要

主な機能

Enforces Base UI accessibility patterns and ARIA standards
Manages context-aware inheritance for colors and sizing
Guides a three-layer component architecture for maximum flexibility
Provides rules for semantic color usage and interactive state behaviors
Standardizes Joy UI visual variants: Solid, Soft, Outlined, and Plain
0 GitHub stars

ユースケース

Building new accessible UI components from scratch using Base UI primitives
Theming and customizing an existing Base-Joy application without breaking accessibility
Auditing UI code for consistency with the established design system principles