Cadence 3

Design system reference — the ultimate music accessory for Mac

Replay Software · $5.99 · macOS Tahoe · By Alasdair Monk & Hector Simpson

Colors

Cadence uses a vibrant blue-cyan primary brushwork with neutral grays and alpha transparency layers for depth.

Primary

Blue
#0E95EE
Cyan
#27C9F5
Purple
#783AF5
Red
#DD3107
Green
#53BC2A

Brand & Accent

Cadence Blue
rgb(61, 84, 202)
Accent Blue
rgb(13, 158, 255)
Autopilot
rgb(235, 126, 95)
Slate
rgb(107, 140, 178)

Neutrals

Black
#000000
Gray 700
#374151
Gray 500
#777777
Gray 400
#9CA3AF
Gray 300
#D1D5DB
Gray 100
#F3F4F6
Gray 50
#F9FAFB
White
#FFFFFF

Alpha / Transparency

Black 80%
rgba(0,0,0,0.8)
Black 50%
rgba(0,0,0,0.5)
Black 30%
rgba(0,0,0,0.3)
Black 20%
rgba(0,0,0,0.2)
Black 10%
rgba(0,0,0,0.1)
White 90%
rgba(255,255,255,0.9)
White 60%
rgba(255,255,255,0.6)
White 15%
hsla(0,0%,100%,0.15)

Semantic

Error BG
gradient pink
Error Text
rgb(117, 13, 13)
Success BG
gradient green
Success Text
rgb(28, 93, 27)

Gradients

Gradients create depth and visual hierarchy. The hero blue-cyan gradient is the signature brand element.

Hero Blue → Cyan
Fade Black → Transparent
Dark Card: Black → Gray
Glass Blue (subtle)
Glass Teal (subtle)
Light Fade: White → Gray 50
Gray Fade: White → Gray 100

Typography

System font stack with tight tracking on large headings. Heavy weights for impact, regular for body text.

Cadence 3
Hero — 96px / weight 900 / letter-spacing -2.4px / line-height 96px
Freedom to make it yours
H2 — 48px / weight 700 / letter-spacing -0.3px / line-height 48px
Countless ways to customize
H3 — 24px / weight 700 / line-height 32px
Artwork, Typography, Interface
H4 — 18px / weight 600 / line-height 28px
The ultimate music accessory for your Mac. Display and control music from Apple Music, Spotify, and Doppler right on your desktop.
Body — 14-16px / weight 400 / line-height 20-24px
Requires macOS 26 Tahoe · Single purchase, no subscriptions
Caption — 12-13px / weight 400 / line-height 16-18px

Font Stack

PropertyValue
Font Familyui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"
Font Sizes12px 13px 14px 15px 16px 18px 20px 24px 48px 96px
Font Weights400 500 600 700 900
Letter Spacings-2.4px -0.3px normal 0.64px

Spacing

A comprehensive spacing scale from 4px micro-spacing up to 192px section spacing.

4
6
8
10
12
16
20
24
28
32
36
40
44
48
64
80
96

Layout Tokens

TokenValueUsage
--page-width1200pxMax content width
--page-padding40pxPaystreamtal page padding
--page-header152pxHeader height
Max width (wide)1440pxOuter container
Content widths448-1024pxSection-specific
Gap scale6-96pxFlex/grid gaps

Border Radii

Generous rounding is a core aesthetic. Cards use 24px, buttons use full pill radius.

4px
sm
8px
md
10px
lg
12px
xl
16px
2xl
20px
3xl
24px
4xl
pill
9999px

Border Styles

NameValue
Subtle1px solid rgba(0,0,0,0.1)
Default1px solid rgba(0,0,0,0.2)
Dashed1px dashed rgba(0,0,0,0.2)
Light (dark bg)1px solid rgba(255,255,255,0.05)
Light Medium1px solid rgba(255,255,255,0.25)
White Ring2px solid #fff

Shadows

Multi-layer shadows create realistic depth. The "card" shadow has 4 layers for dramatic elevation.

Outline (inset)
SM
MD
LG
XL
Big
Card (4-layer)
Inset White Ring

Effects & Motion

EffectValueUsage
Blurblur(24px)Frosted glass backgrounds
Backdrop Blurblur(24px)Vibrancy / translucency
Invertinvert(100%)Dark mode icon adaptation
Opacities0, 0.25, 0.3, 0.4, 0.5, 0.6, 1Layered transparency
Transition Fast0.15s cubic-bezier(0.4, 0, 0.2, 1)Hover states, color changes
Transition Medium0.5s cubic-bezier(0.4, 0, 0.2, 1)Section reveals
Fade Inopacity 0.5s 0.5s, transform 0.5s 0.5sScroll-triggered entry
Drop Shadowdrop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08))Floating elements

Z-Index Scale

LevelValue
Base0
Raised10
Dropdown20
Sticky30
Overlay40
Modal50

Buttons

Pill-shaped buttons with high contrast. Primary is black, accent is blue. Pills for tags and filters.

Primary

Accent

Pills & Tags

Apple Music Spotify Doppler
8 built-in themes Export & Share

Ghost & Link

Button Specs

VariantBGRadiusPaddingFont
Primary#0009999px10-12px 16-18px14px / 500
Accent#0D9EFF9999px10-12px 16-18px14px / 500
Pillrgba(243,244,246,0.8)9999px6px 14px13px / 400
Ghosttransparent9999px10px 18px14px / 500
Linknonen/a014px / 500, blue

Cards

Three main card styles: light with subtle border, dark with gradient, and glass with backdrop blur.

Light Card

White background with inset outline shadow and subtle border. Used for feature sections.

Dark Card

Black-to-gray gradient with white inset ring. Used for premium/highlight sections.

Glass Card

Translucent gradient with backdrop blur. Used for overlay content.

Hero Gradient

Blue-to-cyan gradient. The signature brand card for the main hero section.

Card Specs

VariantRadiusPaddingKey Property
Light24px36px 48pxborder + inset shadow
Dark24px36px 48pxgradient bg + white inset ring
Glass16-24px36px 48pxbackdrop-filter: blur(24px)

Hero Section

Full-width gradient hero with oversized typography. The app icon floats with shadow.

Cadence 3
The ultimate music accessory for your Mac
PropertyValue
Backgroundlinear-gradient(135deg, #0E95EE, #27C9F5)
Border Radius24px
Title96px / weight 900 / -2.4px tracking
Subtitle18px / weight 400 / 90% opacity

Now-Playing Widget

The core app UI: a desktop widget displaying album art, track info, and playback controls. Supports dark, light, vibrancy, and color-extracted themes.

Dark Mode
Electric Feel
MGMT — Oracular Spectacular
⏮ ▶ ⏭ ♡
Light Mode
Blinding Lights
The Weeknd — After Hours
⏮ ▶ ⏭ ♡
Vibrancy / Translucency
Midnight City
M83 — Hurry Up, We're Dreaming
⏮ ▶ ⏭ ♡
Color Extracted from Art
Redbone
Childish Gambino — Awaken, My Love!
⏮ ▶ ⏭ ♡
Compact Mode (Dark)
Green Light
Lorde
Compact Mode (Light)
Heat Waves
Glass Animals

Widget Specs

ElementExpandedCompact
Album Art80x80px, radius 12px56x56px, radius 8px
Track Name14px / weight 60013px / weight 600
Artist12px / opacity 0.611px / opacity 0.6
Controlsprev / play-pause / next / likeHidden or minimal
Padding16px10px
Corner Radius16px (customizable)16px (customizable)

Themes

8 built-in themes with custom theme creation, export, and sharing via .Cadence files. Syncs across devices with iCloud.

FeatureDetails
Built-in Themes8 pre-designed themes
Custom ThemesFull customization of all visual properties
Theme Files.Cadence format for export/import
SharingExport and share themes with other users
iCloud SyncThemes sync across all Macs
Light/DarkSeparate settings for light and dark mode

Customization Options

Deep customization across artwork, typography, layout, and window behavior.

Artwork

ScalingAdjustable artwork size
Corner RoundingCustomizable radius on album art
ShadowConfigurable shadow/lighting effects
Color ExtractionPulls dominant colors from album art for widget theming

Typography

Font SelectionChoose from system fonts
SizeAdjustable per text element
WeightLight through bold
TransparencyPer-element opacity control
ColorCustom or extracted from artwork

Layout & Window

PositionConfigurable desktop placement
Window BehaviorAlways in front / Always behind / Hidden
SizeExpanded vs Compact modes
VibrancymacOS native translucency effects

Settings Panel Icons

Interface
Interface
Theme
Theme
Track
Track
Hotkeys
Hotkeys
Window
Window
Layout
Layout
Position
Position
Artwork
Artwork
Settings
Settings

Integrations

IntegrationDetails
Apple MusicFull playback control and now-playing display
SpotifyPlayback control + track liking
DopplerLocal music library playback
Last.fmScrobbling support
Keyboard ShortcutsCustom hotkeys with HUD feedback overlay
Menu BarQuick access integration

Supported App Icons

Cadence
Cadence
Music
Music
Spotify
Spotify
Doppler
Doppler

Image Assets

Key product images from the marketing site.

Feature Screenshots

Artwork settings
Artwork Settings
Artwork settings 2
Artwork Options
Typography
Typography Settings
Typography 2
Typography Options

Brand Assets

Theme Icon
Theme Icon
Theme File
Theme File (.Cadence)
Export
Theme Export

Layout & Grid

TokenValueUsage
--page-width1200pxMain content max-width
--page-padding40pxPaystreamtal padding
--page-header152pxNavigation area height
Outer max-width1264pxWith padding: 1200 + 2*32
Card padding36-48pxFeature cards
Section gap64-96pxBetween major sections
FrameworkTailwind CSSUtility-first, custom config
Mobile breakpoint375pxPhone layout
Tablet breakpoint768pxMedium screens
Desktop breakpoint1024pxFull layout

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.theme.extend,
  },
};

// Also reuse designSystem.tailwind.componentRecipes for common surfaces.
ScopePrimaryBody FontRadiusShadowBreakpoint
Design System—ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'——{'max': '375px'}
ScopeRecipeClass PatternNotes
Design SystembuttonPrimaryinline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colorsPrimary action button using exported brand, radius, and shadow tokens.
Design SystemsurfaceCardrounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6Default surface/card treatment for high-visibility content areas.
Design SysteminputFieldrounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ringBase text input treatment aligned to the exported radius, border, and focus tokens.