Live Preview · play-design.css
PLAY X Design System
app/play/play-design.css의 토큰을 그대로 렌더한 살아있는 프리뷰. CSS 파일을 수정하면 이 페이지가 즉시 갱신됩니다.
01 · Color
브랜드
ACTION
brand-green
#1DB954
HOVER
brand-green-hover
#1ED760
MARK ONLY
brand-red
#E60012
STAGE
bg-app
#0A0A0A
02 · Surface
Translucent overlay scale
기본 카드
surface-1
α 0.04
hover
surface-2
α 0.06
pressed
surface-3
α 0.08
선택된 pill
surface-4
α 0.12
03 · Text
Foreground scale
fg-1
#FFFFFF
The quick brown fox · 다람쥐 헌 쳇바퀴 돌리기
기본 텍스트
fg-2
#D4D4D8
The quick brown fox · 다람쥐 헌 쳇바퀴 돌리기
본문
fg-3
#A1A1AA
The quick brown fox · 다람쥐 헌 쳇바퀴 돌리기
보조
fg-4
#71717A
The quick brown fox · 다람쥐 헌 쳇바퀴 돌리기
meta · 캡션
fg-5
#52525B
The quick brown fox · 다람쥐 헌 쳇바퀴 돌리기
disabled
04 · Genre
장르 그라디언트 (DJ 채널)
24/7
🎵
R&B
Smooth & Soulful
24/7
🔥
Trap
Hard & Heavy
24/7
☕
Lo-fi
Chill & Focus
24/7
🎤
Hip-hop
Street & Culture
24/7
💪
Workout
Power & Energy
05 · Type
시맨틱 타입 스케일
.t-hero
소유하면 달라지는 것들
.t-h1
DJ Channels
.t-h2
새 발매
.t-h3
Together
.t-card-title
Smooth & Soulful
.t-body
AI DJ가 24시간 라이브로 음악을 선곡합니다. 마음에 드는 트랙은 블록체인에 소유하세요.
.t-body-sm
라이브 스트림에 들리는 곡을 즉시 소유 — 풀버전 무제한 재생, 토큰 게이티드 커뮤니티 입장.
.t-meta
.t-eyebrow
Now playing
.t-mono
PLAYX/TOGETHER · 0x4f8e...c2a1
.t-gradient (clip)
Ownership changes everything
06 · Components
Primitives (.px-*)
.px-cta · .px-ghost
.px-pill-live · .px-pill-247
LIVE24/72,419
.px-logo-tile
PLAY
.px-glass
Header / Bottom Tab Chrome
backdrop-blur 24px · saturate 150%. 헤더와 모바일 하단 탭에 사용.
.px-card
기본 카드
surface-1 + 1px stroke + radius-2xl. hover 시 surface-2로 자동 lift.
07 · Shadow
Elevation + 시그니처 그린 글로우
shadow
sm
0 1px 2px rgba(0,0,0,0.30)
shadow
md
0 4px 16px rgba(0,0,0,0.40)
shadow
lg
0 12px 32px rgba(0,0,0,0.50)
shadow
xl
0 24px 60px rgba(0,0,0,0.60)
shadow
glow-green
0 8px 32px rgba(29,185,84,0.20)
shadow
glow-green-lg
0 16px 48px rgba(29,185,84,0.40)
08 · Radius
Corner scale
sm
6px
md
10px
로고 타일
lg
12px
버튼
xl
16px
드롭다운
2xl
20px
기본 카드
3xl
24px
hero 패널
pill
pill
nav · CTA · badge
09 · Icons
lucide-react · stroke 2 · 14~22px
Play
Radio
Users
Disc3
ShoppingBag
Music
Sparkles
TrendingUp
Headphones
Search
Globe
Box
Upload
Wallet
MessageCircle
Lock
Crown
ArrowRight
10 · Rules
브랜드 룰 (위반 금지)
✕
빨간색을 UI 액션으로 쓰지 말 것 (#E60012는 PLAY X 마크 + LIVE 인디케이터 한정)
✕
이모지를 본문에 쓰지 말 것 (장르 5개 + 언어 국기만)
✕
라이트 모드 만들지 말 것 (다크 only)
✕
하드코드 색 추가하지 말 것 (--px-* 토큰 사용)
✓
아이콘은 lucide-react 일관 사용 (스트로크 2, 14~22px)
✓
그린 글로우는 CTA/hover에만 (일반 카드 글로우 금지)
✓
라운딩은 토큰값 안에서 (카드 20px, nav/badge/CTA pill 9999px)
✓
신규 페이지는 처음부터 토큰 사용, 기존 페이지는 점진 마이그레이션