Trafix Component Library — Tangerine Signal
디자이너 참고용 스펙 시트 · 각 카드 하단 캡션은 코드 클래스명입니다.
버튼
참여하기
.btn .btn--primary
나중에
.btn .btn--secondary
건너뛰기
.btn .btn--ghost
계정 탈퇴
.btn .btn--danger
항소 제출
.btn .btn--danger-solid
비활성 상태
.btn .btn--primary:disabled
작은 버튼
.btn .btn--primary .btn--sm
전체 너비 버튼
.btn--block
상단 앱바
캠페인 상세
.appbar .appbar__back .appbar__title
설정
.appbar .appbar__action
카드
기본 카드
surface + border + shadow-card
.card
총 수익
₩60,000
ID · L5AS7
.hero .hero__label .hero__amount .hero__meta
버블리 (Bubbly)
여름 신제품 체험단
₩2,500 / 1천뷰
D-3 마감
참여 128명
.campaign-hero .campaign-hero__brand .campaign-hero__title .campaign-hero__rate
버블리
₩2,500 / 1천뷰
.card .reco .reco__info .reco__thumb
프리미엄 캠페인
₩5,000 / 1천뷰
Silver 이상 참여
.tier-lock-container .tier-lock .tier-lock__icon .tier-lock__label
등급 배지 (5종)
Copper
.badge-tier .badge-tier--copper
Silver
.badge-tier .badge-tier--silver
Gold
.badge-tier .badge-tier--gold
Platinum
.badge-tier .badge-tier--platinum
Diamond
.badge-tier .badge-tier--diamond
Copper
.badge-tier--on-dark (그라디언트 배경용)
필(Pill) · 칩
XP 120
.pill .pill--xp
3
.pill .pill--streak
LIVE
.live-pill .live-pill__dot
전체
수당 높은순
참여 가능
.chip-group .chip .chip--selected
YouTube
.platform-chip .platform-chip--youtube
Instagram
.platform-chip .platform-chip--instagram
TikTok
.platform-chip .platform-chip--tiktok
실시간 티커 · 랭킹 행
하
hara_films
방금 적립
+₩25,800
.ticker-row .ticker-row__avatar .ticker-row__amount
1
소
soyeon_kim
₩8,420,000
.medal-row .medal-row--gold (1위)
2
지
jihoon.makes
₩6,150,000
.medal-row .medal-row--silver (2위)
3
민
minji_clip
₩5,930,000
.medal-row .medal-row--bronze (3위)
4
하
hara_films
₩4,820,000
.rank-row (4위 이하)
나
나의 현재 순위
#142
.self-rank
폼 컨트롤
닉네임
2~12자, 한글/영문/숫자
.field .field__label .input .field__hint
계좌번호
계좌번호 형식이 올바르지 않습니다
.input--error .field__error
출금 금액
₩
.input-amount .input-amount__prefix .input-amount__field
수당 높은순
인기순
.select
4
2
8
.code-boxes .code-box .code-box--filled .code-box--active
알림 받기
.switch .switch--on .switch__knob
리스트 행
알림 설정
.list-row .list-row--settings .list-row__icon .list-row__chevron
새 캠페인이 열렸어요
3분 전
.list-row--notification .list-row--unread .list-row__unread-dot
여름 신제품 체험단 적립
2026.07.02
+₩25,800
.list-row--transaction .list-row__amount--positive
바텀시트 · 모달 (정적 스펙)
설정
로그아웃
.overlay .sheet .sheet__handle .sheet__header
출금 신청 완료
₩47,200이 영업일 기준 1~2일 내 입금됩니다.
확인
.overlay--center .modal .modal__icon .modal__title .modal__body
콜아웃 (경고/안내)
#광고 표시 필수
게시물 캡션 첫 줄에 반드시 포함해야 합니다.
.callout .callout--warning .callout__title
3.3% 원천징수 안내
출금 시 사업소득세 3.3%가 자동 공제됩니다.
.callout--info
제출 반려
URL이 캡션 요건을 충족하지 않습니다.
.callout--danger
아코디언 (플레이북/가이드)
필수 포함 요소
캡션 첫 줄에 #광고 표시, 제품 태그, 브랜드 계정 멘션이 필요합니다.
촬영 가이드
.accordion .accordion__item--open .accordion__head .accordion__body
단계 표시기
.steps .steps__item .steps__item--done .steps__item--active
1
2
3
.steps--numbered .steps__dot--done .steps__dot--active
진행 바 (티어/XP)
티어 진행도
.progress-block .progress-bar .progress-bar__fill
빈 상태 (Empty state)
아직 알림이 없어요
새 캠페인이나 정산 소식이 도착하면
여기에서 확인할 수 있어요.
.empty-state .empty-state__icon .empty-state__title .empty-state__body
토스트
제출이 완료되었습니다
.toast .toast--success
URL이 이미 사용되었습니다
.toast .toast--error
하단 탭바
홈
캠페인
랭킹
MY
.tabbar .tabbar__item .tabbar__item--active
아바타 색상 세트
A
.avatar--1
B
.avatar--2
C
.avatar--3
D
.avatar--4
E
.avatar--5
F
.avatar--6