Music Theory Visual Design

Overview

This skill provides visual design guidelines for building UI components in the music theory application. It ensures consistent typography, color usage, spacing, and animations across all components while maintaining the application's distinctive aesthetic: modern, clean, with musical sophistication.

Design Philosophy

Create interfaces that balance professional elegance with approachability. Think "concert hall meets digital instrument." Prioritize visual clarity while incorporating subtle musical character through the custom color system.

Typography

Font Families:

• Use font-sans (Noto Sans JP) for UI elements
• Use font-serif (Noto Serif JP) sparingly for decorative text

Weight Contrast: