Foundations
01
Palette · dark (default)
bg#121212
surface-1#1A1A1A
surface-2#262626
surface-3#404040
primary#3B82F6
Palette · light
bg#F8F9FA
surface-1#FFFFFF
surface-2#F1F3F5
surface-3#B7B9BB
primary#3B82F6
Typography
02
Pretendard variable · 45–920
Aa 가
Korean-first sans with tight metrics and good mono figures. SIL OFL 1.1. Self-hosted.
Scale
28 / 800메인 · Home
24 / 800Set this device's role
20 / 700Midnight Protocol
16 / 500Enter 6-digit code
14 / 600Load local file
12 / 60000:42 / 03:18
Weights
Aa400 Regular
Aa500 Medium
Aa600 Semibold
Aa700 Bold
Aa800 Extrabold
Spacing & shape
03
Motion
ease-out
cubic-bezier(0.2, 0.8, 0.2, 1)
Default interactions · 200–300ms
emphasized
cubic-bezier(0.22, 1, 0.36, 1)
Entrances, view transitions · 600–900ms
spring
cubic-bezier(0.08, 0.82, 0.17, 1)
Toasts, logo flip
Components
04
Buttons
LIVE
idle
HOST-CTRL
SELF-CTRL
Invite code
Enter this code on other devices
4 9 2 8 1 5
Playlist item
1Aurora Hymn3:42
2Midnight Protocol4:08
3Coastal Drift — Night Mix5:21
Toast & dialog
Invite code: 492815
Leave Session
Return to the start screen? You'll be disconnected.
Glass chrome · fixed bottom nav
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#262626Inputs, buttons, dividers
--surface-3#404040Hover, active
--primary#3B82F6The only accent — blue
--text-main#FFFFFFPrimary text
--text-sub#A1A1AASecondary text
--text-muted#71717ATertiary / disabled
--radius-s / m / l14 / 20 / 32Corner radii + 100px pill
--glass-bgrgba(38,38,38,0.75)Glass chrome (with blur 16px)
--font-sansPretendardVariable 45–920
--ease-outcubic-bezier(0.2, 0.8, 0.2, 1)Default interactions