Colors
Primary#00B0F0
Primary Hover#009dd6
Primary Light#e6f7fd
Destructive#ef4444
Success#22c55e
Warning#f59e0b
Background#ffffff
Foreground#0a0a0a
Muted#f5f5f5
Muted FG#737373
Border#e5e5e5
Accent#f5f5f5
Typography
Font: Pretendard Variable
Heading 1 — 제목 텍스트 (4xl/bold)
Heading 2 — 제목 텍스트 (3xl/bold)
Heading 3 — 제목 텍스트 (2xl/semibold)
Heading 4 — 제목 텍스트 (xl/semibold)
Heading 5 — 제목 텍스트 (lg/medium)
Body — 본문 텍스트 (base/normal)
Small — 보조 텍스트 (sm/normal)
Caption — 캡션 텍스트 (xs/muted)
Variants
Gradient & Highlight
Sizes
States
Badge
Default
Secondary
Outline
Destructive
Success
Warning
Input & Textarea
Input
Textarea
Select
Radix Select
Card
기본 카드
카드 설명 텍스트
카드 본문 콘텐츠가 여기에 들어가요.
액션 카드
Footer가 있는 카드
버튼이 있는 카드 예시예요.
통계 카드
1,234
총 주문 수
Avatar
CN
MP
AB
XL
Table
| 주문번호 | 상품 | 상태 | 금액 |
|---|---|---|---|
| ORD-001 | N플레이스 트래픽 | 완료 | 50,000원 |
| ORD-002 | 블로그 리뷰 | 진행중 | 120,000원 |
| ORD-003 | 인스타 팔로워 | 취소 | 30,000원 |
Tabs
첫 번째 탭 콘텐츠예요. 개요 정보가 표시돼요.
Dialog
Sheet
Dropdown Menu
Popover
Calendar
2026년 3월
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
Skeleton
Separator
Horizontal
위 영역
아래 영역
Vertical
왼쪽가운데오른쪽
Spacing & Border Radius
Border Radius
sm6px
md8px
lg12px
xl16px
full9999px
Shadow
sm
default
md
lg