Skip to content
Music School ManagerUI Library

Getting started

Guide

Foundations

Color tokens, typography, shape, and motion shared by every component in both themes.

When to use it
Use semantic tokens only. Primary marks the one most important action or selection; the ensemble colors carry categories and charts; status colors always come with text.

Color tokens

Surfaces

  • --backgroundThe page.
  • --cardRaised content: cards, popovers, dialogs.
  • --mutedQuiet fills: hover, skeletons, code.
  • --secondarySecondary buttons and badges.
  • --sidebarProduct navigation chrome.

Brand accent

  • --primaryThe one most important action, selection, and focus.
  • --ringFocus indicators on every control.

Status

  • Paid--successCompleted, healthy, confirmed.
  • Trial--infoNeutral news and new states.
  • Payment due--warningNeeds attention soon.
  • Overdue--destructiveErrors and irreversible actions.

Status colors pass WCAG AA as text on their own tint in both themes. They are never the only signal; every status has a word.

Typography

Page titleOutfit · 30–36px · semibold · PageHeader
Spring term overview
SectionOutfit · 20px · semibold · SectionHeading
Upcoming lessons
MetricOutfit · 30px · tabular figures · StatCard
248
Card titleOutfit · 16px · medium · CardTitle
Spring recital
BodyFigtree · 14px · regular
Programs are due two weeks before the performance.
SupportingFigtree · 12px · muted
Voice · 3:30 PM · Room A
CodeGeist Mono · 12px · tokens and code
--primary · @msm/ui

Shape, spacing, and motion

Radius

  • smCheckboxes, keys
  • mdMenu items, small buttons
  • lgButtons, inputs, alerts
  • xlCards, dialogs, bubbles
  • fullBadges, avatars, switches

Spacing rhythm

  • 8pxInside a control group
  • 16pxBetween related fields
  • 24pxBetween sections of a form or page

Motion and focus

Overlays fade and zoom in about 100ms and honor reduced motion. Every control shows a violet focus ring and border when reached by keyboard. Controls keep the shadcn sizes: 32px by default, 28px small, 36px large.

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.