UI System

UI System

Cadence uses a calm Soft Graphite shell, system typography, monochrome controls, original artwork, and native macOS interaction patterns. The interface avoids decorative islands and geometry that moves when selection changes.

Product shell

• The toolbar is an opaque raised graphite surface.
• The navigation rail is 72 points collapsed and 220 points expanded.
• Icons keep the same anchor during expansion.
• Hover and selection remain clipped to visible rail bounds.
• The workspace receives all remaining width and height.
• The bottom player is a separate full-width functional layer.

Shared workspace

Tags, Smart Collections, and Playlists share one resizable two-pane contract:

• leading pane: 230–420 points;
• 68-point pane header with an 18-point horizontal inset;
• 52-point rows with 10-point list and internal insets;
• continuous 6-point row radius;
• selection inset from pane edges and dividers;
• detail empty states centered below, not across, the header.

Track tables

Track lists reuse thumbnail artwork, compact metadata, light separators, a restrained hover surface, and sortable headers. Default columns are Song, Album, and Time. Artist appears below the track title and format appears as a small badge. Optional columns and widths remain user-configurable.

Appearance

Cadence supports System, Light, and Dark appearances. System follows the live macOS appearance instead of caching the previous explicit theme. Accent colors are intentionally constrained by the product rather than user-selectable.

The Icon Composer source contains light- and dark-appearance renditions; macOS chooses the matching compiled app-icon asset automatically.

Accessibility

• native keyboard multi-selection and Command-A are preserved;
• icon-only controls have labels and state;
• active queue, repeat, shuffle, and audio profile states are visible;
• Reduce Motion removes spatial transitions;
• text and separators retain contrast in both themes;
• selection never changes row geometry.