MarketPilot Design System

UI 컴포넌트 & 스타일 가이드

v1.0

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)

Button

Variants

Gradient & Highlight

Sizes

States

Badge

Default
Secondary
Outline
Destructive
Success
Warning

Input & Textarea

Input

Textarea

Select

Radix Select

Card

기본 카드

카드 설명 텍스트

카드 본문 콘텐츠가 여기에 들어가요.

액션 카드

Footer가 있는 카드

버튼이 있는 카드 예시예요.

통계 카드

1,234

총 주문 수

Avatar

User
CN
MP
AB
XL

Table

주문번호상품상태금액
ORD-001N플레이스 트래픽
완료
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