숏트렌드 디자인 가이드

숏트렌드 서비스의 디자인 시스템과 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 클래스 - 흰색 텍스트, 핑크색 배경

버튼 스타일

프라이머리 버튼

bg-pink-500 hover:bg-pink-600

세컨더리 버튼

bg-gray-100 hover:bg-gray-200

아웃라인 버튼

border-pink-500 hover:bg-pink-50

그라디언트 버튼

bg-gradient-to-r from-pink-500 to-purple-500

아이콘 버튼

flex items-center justify-center space-x-2

비활성화 버튼

bg-gray-300 text-gray-500 cursor-not-allowed

카드 스타일

기본 카드

심플 카드

기본적인 카드 스타일로, 정보를 간결하게 표시합니다.

헤더 카드

색상 헤더가 적용된 카드 스타일입니다.

아이콘 카드

아이콘이 포함된 정보 카드입니다.

통계 카드

총 게시물
1,250
평균 좋아요
12.5K
평균 댓글
324
참여율
3.2%

프로필 카드

프로필

사용자이름

@username

1.5K
팔로워
420
팔로잉
85
게시물
프로필

비즈니스계정

비즈니스

비즈니스 프로필 설명이 여기에 표시됩니다.

www.example.com
프로필
연관계정
팔로워 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%
@username
사용자 전체 이름 12.5K

인기 릴스 콘텐츠 제목이 이 곳에 표시됩니다. 내용이 길어질 경우 2줄까지만 표시됩니다.

Instagram
릴스 예시
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
@regular_user
일반 사용자 5.6K

일반 순위 릴스 콘텐츠입니다. 이 콘텐츠는 프리미엄 잠금이 없습니다.

Instagram

폼 요소

입력 필드

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

슬라이드 업

slide-up
animate-slide-up

바운스

bounce
animate-bounce

아이콘 시스템

사용자
더 보기
성장
북마크
알림
추가
로그인