Multi-device audio on the web — one web app, many speakers. Geometric dark minimal — built Korean-first with Material-filled iconography.
Foundations
01
Palette · dark (default)
bg#121212
surface-1#1A1A1A
surface-2#222222
divider#262626
surface-3#404040
primary#3B82F6
Palette · light
bg#F8F9FA
surface-1#FFFFFF
surface-2#F1F3F5
divider#D4D6D8
surface-3#B7B9BB
primary#3B82F6
Text colors
text-main
#EEEEEE
text-sub
#A1A1AA
text-muted
#71717A
light text-main
#303540
Control state colors
TokenValueUse--range-fill-idletext-main / 75%Slider filled track at rest--range-fill-activevar(--text-main)Slider while dragging or pressing--play-fab-bg-idletext-main / 90%Main play/pause button at rest--play-fab-bg-activevar(--text-main)Main play/pause button while pressed--play-fab-bg-disabledtext-main / 20%Soft-disabled play/pause button
Typography
02
Pretendard variable · 45–920
Aa 가
Korean-first sans with tight metrics and good mono figures. SIL OFL 1.1. Self-hosted.
Return to the start screen? You'll be disconnected.
Solid chrome · fixed bottom nav
Home
Playlist
Connect
Settings
Iconography
05
Material Icons (Filled). 24×24 viewBox, single path, fill="currentColor".
No icon font, no sprite — every icon is inline SVG. No emoji.
Tokens
06
Full list in colors_and_type.css.
TokenValueUse--bg#121212App background--surface-1#1A1A1ACards, header, nav resting--surface-2#222222Inputs, buttons--divider#262626Dividers--surface-3#404040Hover, active--primary#3B82F6The only accent — blue--text-main#EEEEEEPrimary text--text-sub#A1A1AASecondary text--text-muted#71717ATertiary / disabled--range-fill-idlergba(238,238,238,.75)Slider fill at rest--range-fill-activevar(--text-main)Slider fill while pressed--play-fab-bg-idlergba(238,238,238,.9)Play/pause button at rest--play-fab-bg-activevar(--text-main)Play/pause button while pressed--play-fab-bg-disabledrgba(238,238,238,.2)Soft-disabled play/pause button--radius-s / m / l14 / 20 / 32Corner radii + 100px pill + dialog squircle--glass-bgvar(--surface-1)Legacy alias for solid chrome--font-sansPretendardVariable 45–920--ease-outcubic-bezier(0.2, 0.8, 0.2, 1)Default interactions