music-theory-visual-design

This skill provides a comprehensive design system and UI implementation guide tailored for the Harmonic Orbit music theory platform. It is designed for developers and designers working within the codebase to maintain a consistent aesthetic of 'concert hall meets digital instrument.' The skill enforces the use of specific CSS variables, Tailwind CSS utility patterns, and component structures that align with the application's modern, clean, and musically-informed visual language. It ensures that all UI elements, from layout panels to interactive musical visualizations, adhere to strict accessibility and performance standards.

• Defines the typography hierarchy using Noto Sans JP and Noto Serif JP, with clear weight contrast guidelines.

• Implements a specialized musical color system using CSS variables (e.g., bg-key-{pitch}-{mode}) to represent tonal relationships visually.

• Standardizes spacing and layout patterns using Tailwind CSS, emphasizing responsive design with mobile-first approaches.

• Integrates Framer Motion for subtle, sophisticated animations that provide user feedback while maintaining performance.

• Enforces accessibility standards (WCAG AA) for color contrast, focus states, and interactive element behavior.

• Provides concrete implementation patterns for shadcn/ui components, including proper className management using twMerge and clsx.

• Distinguishes between parent-level sizing/positioning and child-level appearance to ensure modular component reusability.

• Guides the implementation of interactive elements like cards, panels, and full-height layouts that support the application's unique musical domain requirements.

• Always prioritize CSS variables over hard-coded hex values to support global theme consistency.

• Use the prescribed 84-color musical scale system sparingly to avoid visual clutter in complex diagrams.

• Apply the md: prefix for desktop-specific responsive adjustments to ensure the application remains functional across all device sizes.

• Follow the provided component props pattern (className?: string) and the twMerge/clsx utility pattern for all new UI development.

• Ensure all interactive components include hover, active, and focus states that align with the design philosophy.

• When creating visual representations of musical concepts, leverage the defined layer-based transparency and grid systems to maintain structural clarity.