Layout

Spatial scale rules, responsive breakpoint boundaries, and z-index elevation tokens optimized for audio workstations.

Spatial Scale

A strict 4px / 8px baseline spatial scale enforcing consistent padding, margin, and layout gap increments.

space-1
4px (0.25rem)
Micro: Compact icon gaps, fader notch spacing, badge inner padding.
space-2
8px (0.5rem)
Micro: Standard element gap, button padding-y, track list row spacing.
space-3
12px (0.75rem)
Micro: Dense card padding, menu item spacing, dropdown padding.
space-4
16px (1.0rem)
Macro: Card container padding, dialog header gap, mobile screen margin.
space-6
24px (1.5rem)
Macro: Standard card padding, section gap, toolbar cluster margin.
space-8
32px (2.0rem)
Macro: Page padding, major section vertical rhythm, hero outer margin.
space-12
48px (3.0rem)
Macro: Landing page container padding, hero vertical padding (desktop).
space-16
64px (4.0rem)
Macro: Page bottom padding (pb-16), major splash section spacing.

Responsive Breakpoints

Viewport boundaries and layout container constraints for fluid scaling from mobile to multi-monitor audio setups.

smmin-width: 640px
100% Fluid: Expanded mobile viewports, single-column stacked dialogs.
mdmin-width: 768px
Fluid / Multi-column: 2-column navigation grids, expanded fader clusters, visible toolbar labels.
lgmin-width: 1024px
max-w-[800px] (Docs): Desktop navigation rail docks, multi-track timeline timeline opens.
xlmin-width: 1280px
max-w-[1440px] (App/Splash): Full 4-pane workstation layout enabled (Nav + Canvas + Inspector + Player).
2xlmin-width: 1536px
max-w-[1440px] (Centered): Ultra-wide studio monitors; fixed centered max-width bounds.

Z-Index Elevation Hierarchy

Strict elevation layers preventing WebGL shaders, fixed transport bars, and modals from colliding.

z-0Level 0
WebGL & Background Canvas: WebGL shader canvas (HeroBackground), ambient background glows.
z-10Level 10
Workstation Surface Content: Documentation cards, multi-track timeline clips, data tables.
z-20Level 20
Persistent Bottom Playback Bar: Fixed audio transport bar, scrubber timeline, master VU meters.
z-30Level 30
Navigation Shell & Sticky Header: App sidebar rail, sticky breadcrumb bar, mobile top navigation.
z-40Level 40
Inspector Sheet & Slide-Over Panels: Right-hand track inspector sheet, mastering limiter panel, drawer filters.
z-50Level 50
Overlay Primitives & Floating Layers: Modals, dialog overlays, dropdown menus, tooltips, Sonner toast notifications.

App Shell Architecture

Structural tokens governing the 4-pane audio workstation layout across desktop and mobile viewports.

Navigation Railz-30
Width: 240px (15rem)

Collapses to slide-out sheet below 1024px (lg). Persistent dock on desktop.

Workstation Canvasz-10
Flexible: flex-1 min-w-0

Houses main track timelines, documentation, and audio editor grids.

Inspector Sheetz-40
Width: 320px (20rem)

Slide-over drawer on tablet/mobile. Docked contextual panel on XL desktop.

Persistent Playback Barz-20
Height: 80px (5rem)

Global audio transport pinned to viewport bottom across all routes.

Layout Principles

Container Constraints

Documentation detail pages are strictly constrained to max-w-[800px] to maintain optimal line length. Workstations and landing portals expand to max-w-[1440px].

Predictable Baseline Rhythm

Always build using standard gap-2 (8px) or gap-4 (16px) multiples. Avoid arbitrary pixel margins to ensure dense audio fader racks align seamlessly.

Resources