App Components
카드 · 리스트
제품(대시보드)의 카드 · 리스트 언어입니다 — 스마트링크 풀 · 아티스트 필터 · 미니 리스트. 전부 .shell 화이트 표면 위에서 동작하므로, 각 데모는 앱 토큰을 재선언한 라이트 스테이지 안에 배치했습니다. 라운드 11–14px · 퍼플 액센트 · tabular-nums.
링크 툴바 · 필터
.lk-search(아이콘 인셋 검색) + .lk-fil pill 필터. active는 accent 채움.
.lk-search input(radius 10) · .lk-fil a(pill) · .on=accent
아티스트 필터칩
.lk-art 원형 아바타 — 선택 시 accent 링(box-shadow tint) + 라벨 강조. 우하단 .cnt 링크 수.
.lk-art .av(58·2px) · .on .av=accent ring · .cnt(badge)
링크 카드
.lk-card 풀 — 썸네일 50 + 제목/타입 pill + short URL/복사 + 클릭 KPI 18px/800. 우측 상태점.
.lk-thumb(50·11) · .lk-type pill · .lk-clicks b(18/800 tabular)
아티스트 그리드 카드
.art-card — 원형 아바타 + 이름 + 핸들(mono) + 메타. auto-fill 168px 그리드.
.art-av(72) · .art-name(14.5/700) · .art-handle(mono) · .art-meta b
미니 리스트
.flist — 사이드/위젯용 컴팩트 행. 상태 dot + 제목/서브 + 우측 수치(tabular). 행 사이 hairline.
.flist a(9px·hairline) · .dot(8) · .ti b(12.5/600) · .mt(tabular)
아티스트 상세 스탯
아티스트 페이지 헤더 — .av-lg(60px 아바타) + 4열 .astat-row 스탯 타일. 각 타일은 .k(아이콘 라벨) + b(26px) + small.
.av-lg(60) · .astat-row(4열) · .astat .k/b(26)/small
캠페인 행
.camp-row — 제목 + 메타 + 진행 바(.bar > i) + 상태 뱃지. 발송/소진 비율을 accent 바로, 라이프사이클을 뱃지로.
.camp-row(hairline) · .bar>i(accent) · .camp-badge.live/.draft
사용 규칙
- · 카드/리스트는 항상 화이트 표면(
.shell) 위에 배치 - · 모든 클릭/링크 수치는
tabular-nums - · 상태는 점 색으로 일관 — live=green · draft=amber · archived=muted
- · active 필터/아티스트는 accent 하나만(채움 또는 링)
- · 링크 카드는 11–14px, 미니 리스트는 hairline 구분선
- · 밝은 배경 위에 앱 카드 직접 배치
- · 마케팅 라운드(16/24)로 카드 키우기 — 앱은 11–14px
- · 한 행에 active 색 두 개 이상(accent 남발)
- · KPI 숫자에 비례 폰트(자리 흔들림) 사용
- · 앱 데모 안에서 마케팅
icon()SVG 사용 — uicons만