숏트렌드 디자인 가이드
숏트렌드 서비스의 디자인 시스템과 UI 구성요소를 일관성 있게 적용하기 위한 가이드입니다.
색상 팔레트
브랜드 컬러
Pink 500
#ec4899
프라이머리
Pink 600
#db2777
프라이머리 다크
Pink 100
#fce7f3
프라이머리 라이트
Purple 500
#a855f7
보조 색상
중립 컬러
Gray 900
#111827
텍스트 컬러
Gray 50
#f9fafb
배경 컬러
액센트 컬러
Emerald 600
rgb(5 150 105)
액센트 컬러
색상 사용 예시
텍스트 컬러
프라이머리 텍스트 #ec4899
보조 텍스트 #a855f7
일반 텍스트 #111827
보조 텍스트 #6b7280
배경 컬러
프라이머리 버튼
보조 버튼
아웃라인 버튼
타이포그래피
헤드라인
숏트렌드 헤드라인
text-4xl font-bold font-['Noto_Sans_KR']
서브헤드라인
숏트렌드 서브헤드라인
text-2xl font-semibold font-['Noto_Sans_KR']
본문 텍스트
숏트렌드는 인스타그램 인기 릴스와 인플루언서 트렌드를 분석하는 서비스입니다. 실시간 인기 릴스 순위와 계정별 성장 분석을 확인하세요.
text-base leading-relaxed font-['Noto_Sans_KR']
로고 텍스트
숏트렌드
logo-text text-4xl text-pink-500
로고 스타일
기본 로고 - 텍스트만
숏
big-shot 클래스 - 핑크색 텍스트, 그림자 효과
반전 로고 - 배경 포함
숏
big-shot-inverse 클래스 - 흰색 텍스트, 핑크색 배경
버튼 스타일
카드 스타일
기본 카드
심플 카드
기본적인 카드 스타일로, 정보를 간결하게 표시합니다.
헤더 카드
색상 헤더가 적용된 카드 스타일입니다.
아이콘 카드
아이콘이 포함된 정보 카드입니다.
통계 카드
총 게시물
1,250
평균 좋아요
12.5K
평균 댓글
324
참여율
3.2%
프로필 카드
사용자이름
@username
1.5K
팔로워
420
팔로잉
85
게시물
연관계정
팔로워 2.4K
상세 분석 보기 →
게시물 카드
이미지
1.2K
45
게시물 설명이 여기에 표시됩니다. 두 줄까지 표시됩니다.
2023.05.15
자세히 보기
비디오
1:24
비디오 게시물 설명이 여기에 표시됩니다. 두 줄까지 표시됩니다.
2023.06.22
자세히 보기
최적 포스팅 시간
21:00 KST
지난 7일간 활동
+24%
비디오/릴스 카드
TOP 1
2023.06.15
+125.7%
125K
일
+12.3%
주
+45.7%
15.2K
일
+8.5%
주
+32.1%
342
일
+5.2%
주
+18.9%
Premium
멤버십 사용자 전용
모든 순위의 릴스를 확인하려면
멤버십에 가입하세요
TOP 2
2023.06.14
+85.2%
87.2K
8.4K
215
@premium_content
프리미엄 콘텐츠
45.1K
프리미엄 콘텐츠 제목입니다. 멤버십 가입 시 모든 콘텐츠를 볼 수 있습니다.
10위
2023.06.10
+42.8%
45.3K
일
+6.7%
3.2K
98
폼 요소
입력 필드
border focus:ring-2 focus:ring-pink-500
에러 메시지가 여기에 표시됩니다
체크박스 & 라디오
향상된 체크박스
rounded-md text-pink-500 focus:ring-pink-500
향상된 라디오 버튼
토글 스위치
알림 및 메시지
성공 메시지입니다. 작업이 완료되었습니다.
정보 메시지입니다. 참고해주세요.
경고 메시지입니다. 주의가 필요합니다.
오류 메시지입니다. 문제가 발생했습니다.
배지 및 라벨
상태 배지
기본
중요
성공
진행중
오류
카운터 배지
인기
순위 배지
TOP 1
TOP 2
TOP 3
10위
증가율 배지
+125.5%
+85.2%
일
+12.3%
주
+45.7%
카테고리 배지
쇼핑
멤버십 배지
Premium
프리미엄
VIP
애니메이션
페이드 인
fade-in
animate-fade-in
슬라이드 업
animate-slide-up
바운스
bounce
animate-bounce
아이콘 시스템
홈
사용자
더 보기
성장
북마크
알림
추가
로그인