Images & Media

Aspect ratio standards, visual asset scaling, and avatar specifications for audio interfaces.

Aspect Ratios

Strict container proportions ensuring artwork and waveforms retain structural integrity across screen sizes.

Square Media Artwork1:1
1:1 Ratio • Variable Width
1:1

The primary media standard across VOXFM. Used for generative album covers, track stems, playlist tiles, and release packages.

Domain Usage: Album art previews, multi-track stem cards, playlist thumbnails, vinyl covers.
DAW Spectrogram & Waveform16:9
16:9 Ratio • 1.777:1
16:9

Wide format reserved for time-domain audio visualizers, multi-track timeline inspectors, spectral analyzers, and session banners.

Domain Usage: Master timeline view, spectral density graphs, session header visuals.
Canvas & Mobile Lyric Reel9:16
9:16 Ratio • 0.5625:1
9:16

Vertical mobile viewport format used for looping canvas video visualizers, synchronized lyric reels, and mobile music discovery feeds.

Domain Usage: Full-screen mobile player canvas, karaoke lyric reels, social audio exports.

Avatars

Standardized scales for user and persona representations, showing both image and fallback states.

NSNS
Small (SM)
NSNS
Default (MD)
NSNS
Large (LG)
Small (SM)size="sm"(32px)
Dense track list rows, collaborator chips, compact comment threads.
Default (MD)Default(40px)
Standard navigation rail, playlist creator metadata, feed cards, user menu trigger.
Large (LG)size="lg"(48px)
Profile summary cards, model selection dialogs, studio header previews.

Media Guidelines

Object Fit & Cropping

Always enforce object-cover on all dynamic album art and waveform containers. Never allow square artwork to stretch or warp across non-1:1 wrappers.

Border Radii & Elevation

Media artwork containers must maintain the system default rounded-md with a subtle border border-border to separate dark artwork from dark backgrounds.

Resources