App Components

칩 · 태그 · 뱃지

앱 대시보드의 칩 · 태그 · 뱃지 계열 전체 — 상태 뱃지, 타입 칩, color-mix 동적 색 태그칩, 체크 시 solid로 바뀌는 태그 선택, 해치 DEMO 뱃지, 그리고 컴플라이언스 가드레일 카드. 전부 화이트 표면 · 9999px pill / 6px 라운드 · 퍼플 액센트.

상태 뱃지

스마트링크·캠페인 라이프사이클 표시 pill — .badge.live/.draft/.archived. padding 3·9 · pill 라운드 · 11px/700.

상태 3종

live draft archived

표 행 인라인

Golden Hour live Supernova draft

.badge.live(#E8F8EE/#16A34A) · .draft(muted) · .archived(muted-2)

타입 칩

스토어/채널 종류 라벨 — .lk-type = surface-2 칩 + 좌측 색 dot + 라벨. radius 6px.

Spotify Apple Music YouTube Melon SoundCloud

.lk-type + .dot(7×7 원) · 라벨은 muted, dot만 브랜드 색

태그칩

장르·무드 태그 — .tagchip. 색은 --tc 하나로 텍스트·배경(16%)·보더(40%)·dot을 color-mix로 파생.

기본

K-pop R&B Dance Comeback Ballad

작게 (.sm)

Title B-side Remix

color-mix(in srgb, --tc 16% / 40%) · ::before dot · .sm = 11px/1·8 pad

태그 선택

다중 선택 토글 — .tagpick / .tagopt. 미선택은 점선 보더 + opacity .45, input:checked 시 solid + 불투명.

.tagopt input(숨김) → .tagchip 점선/.45 · :checked+ → solid/1 · 클릭해 토글

DEMO 뱃지

실데이터가 없을 때 예시 수치 옆에 붙는 해치 마커 — .demo-badge. 45° 앰버 반복 그라데이션.

이번 주 클릭 12,480DEMO

예상 청취자 38.2KDEMO

repeating-linear-gradient(45deg, amber .18/.08) · 10px/800 · 항상 추정치임을 명시

가드레일 카드

컴플라이언스 경고 박스 — .guardrail. 앰버 라이트(#FBF1DF) 배경 · accent-3 제목 · 불릿 목록. 캠페인 발행 전 정책 안내.

발행 전 확인

미발매 스토어 링크는 발매일 이전 비공개로 유지하세요.
구매 유도 문구는 플랫폼 정책을 준수해야 합니다.
응모권·리워드 수량은 실제 재고와 일치해야 합니다.

.guardrail(#FBF1DF / #EAD9B0 보더 / radius 12) · .gh · li b = 강조

태그 필터 바

링크 목록 상단 가로 필터 — .lk-tagfil. 좌측 "전체 태그" 텍스트 링크(active=text) + 태그칩(--tc + small 카운트), 미선택은 opacity .6. 아래 .lk-tags는 카드 내부 컴팩트 태그 목록.

필터 바

전체 태그 K-pop 24 R&B 11 Dance 9 Comeback 6 Ballad 4

카드 내부 태그 목록 (.lk-tags)

K-pop Comeback Title

.lk-tagfil > a:first-child(전체·text) · a.tagchip(.6→1) small(카운트) · .lk-tags(gap 5)

사용 규칙

권장

· 상태는 .badge 색으로만 구분(live=green·draft=muted)
· 태그 색은 --tc 하나만 지정 — 나머지는 color-mix 파생
· 타입 칩은 라벨 muted, 식별색은 .dot에만
· 예시 수치엔 반드시 .demo-badge 부착

금지

· 태그칩 텍스트·배경 색을 각각 따로 하드코딩
· 칩에 큰 라운드(16/24) — pill 또는 6px만
· 가드레일을 일반 알림처럼 남발(발행 정책 한정)
· 밝은 배경 위에 다크 칩 배치