Getting started
MSM patternBrand
The Music School Manager mark and logo, drawn from the ensemble palette.
When to use it
Use BrandLogo in product and documentation headers and BrandMark where space is tight or beside a school name. In the logo, the mark's tallest bars match the wordmark's capitals and its stroke weight. The mark is drawn from the ensemble tokens; never recolor or redraw it. Animate it with motion="ambient" for brand moments such as a landing hero, or motion="working" beside a status message while something is in progress. It stays still when people prefer reduced motion.
Logo and mark
Logo
Music School ManagerMusic School ManagerUI LibraryMark
Motion
Ambient, for brand moments
Music School ManagerWorking, beside a status
Thinking…
Ensemble palette
- Violet
--chart-1The brand. Primary actions, focus, and the first series. - Coral
--chart-2Warm contrast for a second series or category. - Teal
--chart-3A calm third category. - Amber
--chart-4Bright emphasis for a fourth category. - Sky
--chart-5A cool fifth category.
The ensemble colors identify categories, chart series, avatars, and the mark. They never signal status: success, warning, information, and errors use their own tokens and always carry text. Group anything past five categories as Other.
Usage
Use the Code tab to copy a complete example. MSM pages import shared components from @msm/ui; changes to those components appear here and in the application.