KPOPVIEW V2.0 — Phase 0
Style Guide
이 페이지는 V2.0 디자인 시스템의 현재 구현 상태를 보여줍니다. 디자인 토큰 값은 임시값이며,
Phase 0 Figma 산출물이 도착하면 design-handoff/phase-0-foundation/tokens.json을 읽어 자동 교체됩니다.
Color Tokens
--kv-bg · Background --kv-surface · Surface --kv-surface-elevated · Surface Elevated --kv-border · Border --kv-primary · Primary (KV Pink) --kv-secondary · Secondary (KV Violet) --kv-highlight · Highlight --kv-up · Up --kv-down · Down --kv-text-primary · Text Primary --kv-text-secondary · Text Secondary --kv-text-muted · Text Muted Typography
.kv-display-xl
KV HOT 100
.kv-display-l
K-POP AUTHORITY
.kv-display-m
Where Views Become Value
.kv-h1
KPOPVIEW V2.0
.kv-h2
유튜브 기반 K-POP 권위 차트
.kv-h3
KV Index 공식 공개
.kv-body-lg
빌보드, 써클차트, AOTY처럼 투명한 집계 로직으로 권위를 구축합니다.
.kv-body-md
유튜브 API를 유일한 데이터 소스로 하여, 케이팝뷰 고유의 산출 로직으로 집계한 유튜브 시대의 K-POP 권위 차트.
.kv-body-sm
작은 본문 텍스트. 설명·메타 정보·보조 안내용.
.kv-caption
WEEK OF APR 14-20, 2026
.kv-overline
KV HOT 100™
.kv-rank-number (차트 순위)
1
Button
Variants
Sizes
Input
로그인 및 알림에 사용됩니다.
비밀번호는 8자 이상이어야 합니다.
Tabs
Chip (Pill)
전체
걸그룹
보이그룹
솔로
데뷔 12개월 이내
Card
NEW RELEASE
앨범 제목 예시
아티스트명 · 2026-04-20
ELEVATED
높은 표면 카드
중요 콘텐츠 강조용.
COMPACT
작은 패딩
Badge
NEW
HOT
RISING
EXCLUSIVE
MUST HEAR
AI 생성 · Gemini
Tooltip
유튜브 데이터 기반 고유 순위 지표입니다.
Toast (JS)
Viewport
현재 뷰포트
loading...
Breakpoints
- 모바일: 375-767px
- 태블릿: 768-1279px
- 데스크탑: 1280-1439px
- 와이드: 1440px+