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:
- Headings:
font-bold (700) or font-extrabold (800)
- Body text:
font-normal (400) or font-light (300)
- Emphasis: Extreme contrast (e.g.,
font-extralight (200) paired with font-black (900))
Size Hierarchy:
- Small labels:
text-xs (0.75rem)
- Standard text:
text-sm (0.875rem)
- Headings:
text-base (1rem) → text-lg → text-xl
Color System
Use CSS Variables (not hex codes):
- Backgrounds:
bg-background, bg-card, bg-panel
- Text:
text-foreground, text-muted-foreground
- Borders:
border-border
- Interactive:
bg-accent, text-accent-foreground
- Selected:
bg-selected
Musical Color System (84 colors):
- For pitch-specific elements:
bg-key-c-lydian, text-key-g-dorian
- Pattern:
bg-key-{pitch}-{mode} (12 pitches × 7 modes)
- Use sparingly for music-theory-specific visualizations
Transparency for Layering:
- Subtle overlays:
bg-white/10, bg-black/5
- Hover states:
hover:bg-white/25
- Selected states:
bg-white/50
Spacing & Layout
Consistent Spacing:
- Internal padding:
p-4 (16px) standard
- Vertical stacking:
space-y-4
- Grid gaps:
gap-4
Common Patterns:
- Card:
bg-card border border-border rounded-lg p-4 shadow-sm
- Panel:
bg-panel space-y-4
- Full-height content:
h-[var(--content-height-full)]
Responsive:
- Mobile-first: Apply styles without prefix
- Desktop: Use
md: prefix (768px+)
Animation & Motion
Framer Motion Basics:
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
>
Hover Effects:
- Subtle:
hover:bg-accent hover:text-accent-foreground transition-colors
- Scale:
hover:scale-105 transition-transform
State Transitions:
- Always use
transition-colors or transition-transform for smooth changes
- Keep durations short (0.2-0.3s)
Tailwind CSS Conventions
className Management:
- Always use
twMerge for component className props:className={twMerge('bg-card border rounded p-4', className)}
- Add
clsx only when conditional logic is needed:className={twMerge(clsx('base', isActive && 'text-primary'), className)}
Responsibility Separation:
- Parent (external): Size (
w-, h-), position (m-, p-), responsive (md:)
- Child (internal): Appearance (
bg-, text-, border-), internal layout (flex, grid)
Example Component:
interface ComponentProps {
className?: string;
}
export const Component: React.FC<ComponentProps> = ({ className }) => {
return <div className={twMerge('bg-card rounded-lg border p-4', className)}>{/* content */}</div>;
};
Accessibility
Color Contrast:
- Maintain WCAG AA (4.5:1 for text)
- The defined CSS variables already meet this standard
Focus States:
- Visible focus:
focus:ring-2 focus:ring-primary
- Outline alternative:
focus:outline-2 focus:outline-accent
Visual Feedback:
- Hover:
hover:bg-accent
- Active:
active:scale-95
- Disabled:
disabled:opacity-50 disabled:cursor-not-allowed
1---2name: music-theory-visual-design3description: Visual design guidelines for the music theory application. Use this skill when creating or improving UI components, designing new features, or working on visual aspects (typography, colors, spacing, animations). Applies to component creation, UI design, and visual styling tasks.4---5
6# Music Theory Visual Design
7
8## Overview
9
10This 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.
11
12## Design Philosophy
13
14Create 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.
15
16## Typography
17
18**Font Families:**
19
20- Use `font-sans` (Noto Sans JP) for UI elements
21- Use `font-serif` (Noto Serif JP) sparingly for decorative text
22
23**Weight Contrast:**
24
25- Headings: `font-bold` (700) or `font-extrabold` (800)
26- Body text: `font-normal` (400) or `font-light` (300)
27- Emphasis: Extreme contrast (e.g., `font-extralight` (200) paired with `font-black` (900))
28
29**Size Hierarchy:**
30
31- Small labels: `text-xs` (0.75rem)
32- Standard text: `text-sm` (0.875rem)
33- Headings: `text-base` (1rem) → `text-lg` → `text-xl`
34
35## Color System
36
37**Use CSS Variables (not hex codes):**
38
39- Backgrounds: `bg-background`, `bg-card`, `bg-panel`
40- Text: `text-foreground`, `text-muted-foreground`
41- Borders: `border-border`
42- Interactive: `bg-accent`, `text-accent-foreground`
43- Selected: `bg-selected`
44
45**Musical Color System (84 colors):**
46
47- For pitch-specific elements: `bg-key-c-lydian`, `text-key-g-dorian`
48- Pattern: `bg-key-{pitch}-{mode}` (12 pitches × 7 modes)
49- Use sparingly for music-theory-specific visualizations
50
51**Transparency for Layering:**
52
53- Subtle overlays: `bg-white/10`, `bg-black/5`
54- Hover states: `hover:bg-white/25`
55- Selected states: `bg-white/50`
56
57## Spacing & Layout
58
59**Consistent Spacing:**
60
61- Internal padding: `p-4` (16px) standard
62- Vertical stacking: `space-y-4`
63- Grid gaps: `gap-4`
64
65**Common Patterns:**
66
67- Card: `bg-card border border-border rounded-lg p-4 shadow-sm`
68- Panel: `bg-panel space-y-4`
69- Full-height content: `h-[var(--content-height-full)]`
70
71**Responsive:**
72
73- Mobile-first: Apply styles without prefix
74- Desktop: Use `md:` prefix (768px+)
75
76## Animation & Motion
77
78**Framer Motion Basics:**
79
80```tsx
81<motion.div
82 initial={{ opacity: 0, y: 20 }}
83 animate={{ opacity: 1, y: 0 }}
84 transition={{ duration: 0.3 }}
85>
86```
87
88**Hover Effects:**
89
90- Subtle: `hover:bg-accent hover:text-accent-foreground transition-colors`
91- Scale: `hover:scale-105 transition-transform`
92
93**State Transitions:**
94
95- Always use `transition-colors` or `transition-transform` for smooth changes
96- Keep durations short (0.2-0.3s)
97
98## Tailwind CSS Conventions
99
100**className Management:**
101
102- Always use `twMerge` for component className props:
103 ```tsx
104 className={twMerge('bg-card border rounded p-4', className)}
105 ```
106- Add `clsx` only when conditional logic is needed:
107 ```tsx
108 className={twMerge(clsx('base', isActive && 'text-primary'), className)}
109 ```
110
111**Responsibility Separation:**
112
113- Parent (external): Size (`w-`, `h-`), position (`m-`, `p-`), responsive (`md:`)
114- Child (internal): Appearance (`bg-`, `text-`, `border-`), internal layout (`flex`, `grid`)
115
116**Example Component:**
117
118```tsx
119interface ComponentProps {
120 className?: string;
121}
122
123export const Component: React.FC<ComponentProps> = ({ className }) => {
124 return <div className={twMerge('bg-card rounded-lg border p-4', className)}>{/* content */}</div>;
125};
126```
127
128## Accessibility
129
130**Color Contrast:**
131
132- Maintain WCAG AA (4.5:1 for text)
133- The defined CSS variables already meet this standard
134
135**Focus States:**
136
137- Visible focus: `focus:ring-2 focus:ring-primary`
138- Outline alternative: `focus:outline-2 focus:outline-accent`
139
140**Visual Feedback:**
141
142- Hover: `hover:bg-accent`
143- Active: `active:scale-95`
144- Disabled: `disabled:opacity-50 disabled:cursor-not-allowed`
majiayu000