Try it now

Design System

Design
language.

The production interface, documented as it ships: color, type, components, accessibility, iconography, and motion for real-time audio control.

See components
App
About
Design System
History

Multi-device audio on the web: one web app, many speakers. Dark-first, flat, and surface-driven, built Korean-first with inline SVG iconography.

Foundations

Four authored palettes form one continuous color system.

Dark

--bg#121212
--text-main#EEEEEE
--text-sub#A1A1AA
--text-muted#71717A
--primary#3B82F6
--surface-1#1A1A1A
--surface-2#202020
--surface-3#404040
--divider#262626

Light

--bg#F8F9FA
--text-main#303540
--text-sub#495057
--text-muted#868E96
--primary#3B82F6
--surface-1#FFFFFF
--surface-2#EFF1F3
--surface-3#B7B9BB
--divider#D4D6D8

High contrast

--bg#000000
--text-main#FFFFFF
--text-sub#F2F2F2
--text-muted#D0D0D0
--primary#8AB4FF
--surface-1#0A0A0A
--surface-2#1F1F1F
--surface-3#4D4D4D
--divider#262626

High contrast

--bg#F2F2F2
--text-main#000000
--text-sub#111111
--text-muted#333333
--primary#0047A8
--surface-1#FFFFFF
--surface-2#D4D4D4
--surface-3#A8A8A8
--divider#D4D6D8

Typography

Pretendard Variable · 45–920

Aa

Self-hosted for Latin and Korean, with locale-specific Noto fallbacks for Japanese, Chinese, Thai, and Cyrillic scripts. Use tabular figures for time, codes, and latency.

Scale

28 / 800Playback 24 / 800Device role 20 / 700Goldberg Aria 16 / 500Enter a 6-digit room code 14 / 600Load local files 12 / 60000:42 / 03:18

Weights

Aa400 Regular
Aa500 Medium
Aa600 Semibold
Aa700 Bold
Aa800 Extrabold

Shape & motion

Layout rhythm · recipes

4
8
12
16
24
32
40
56

Production radii

14 · radius-s
20 · radius-m
32 · radius-l
999 · capsule recipe

Motion recipes

ease-out
cubic-bezier(0.2, 0.8, 0.2, 1)
Press and state feedback · 150–300ms
emphasized
cubic-bezier(0.22, 1, 0.36, 1)
App entrance · 600ms fade / 800ms movement
spring
cubic-bezier(0.08, 0.82, 0.17, 1)
Toasts and branded transitions

Entrance targets stagger by up to 400ms and finish within 1200ms. Reduced-motion mode removes movement and delay.

Components

Playback actions
LOGIN HOST PRO BETA
Choice cards
Room password switch
Room passwordRequire a password to join.
Range controls
Seek
1:042:46
Volume
Reverb mix 42%
Five-band equalizer
Playlist area
  • 1 Goldberg Aria.wav
  • Cello Suite No. 1 Prelude
  • 3 Well-Tempered Clavier Book I
    • 1 Prelude No. 1 in C Major
    • 2 Fugue No. 1 in C Major
    • 3 Prelude No. 2 in C Minor
    • 4 Fugue No. 2 in C Minor
Connected device rows
#1 minari
#2 julesk
#3 noa_home
  • 1 macOS device (A1B2)
  • 2 Windows device (C3D4)
  • 3 iOS device (E5F6)
  • 4 Android device (G7H8)
Chat surfaces
NOTICE · HOST 9:12
Drop your playlist recs
HOST
where are you?
9:12
YOU
9:12
working at a café lol
9:12
WHISPER TO HOST
9:13
ask for playlist recs in the notice
Text input & settings tabs
Message composer
Search field
bach cello suite
Loading states
Compact-layout bottom navigation

Iconography

Inline SVG keeps icons dependency-free and lets them inherit currentColor. Filled Material-style paths are the default; stroke or mixed construction is reserved for affordances whose shape depends on lines, such as reordering and volume waves. There is no icon font, sprite, or decorative emoji. Material paths retain their Apache License 2.0 notice.

Play
Pause
Previous
Next
Sync
Chat
Add
Remove
Local file
Reorder grip
Volume

Component tokens

Palette roles are shown above. These additional values complete the public component contract. The implementation source of truth is css/style.css; spacing and motion values above are recipes, not exported root tokens.

--play-action-surfacesurface-2 / surface-1Sync and media actions on the Play tab
--control-activeprimary 13% / 11%Selected flat choice surface
--control-dangerred 9% / 7.5%Resting destructive surface
--control-danger-hoverred 13% / 11%Hovered destructive surface
--range-fill-idletext-main 75%Slider filled track at rest
--play-fab-bg-idletext-main 90%Main 64px play button
--radius-s / m / l14 / 20 / 32pxSmall controls, choice cards, and overlays
--list-row-height56pxPlaylist and device row minimum