11번가
11STREET
더 11번가답게.
쇼핑의 즐거움을 생동감 있게.
오렌지에서 레드, 마젠타로 이어지는 시그니처 그라디언트와 14단계의 정교한 그레이스케일이 만드는 정돈된 커머스 시스템.
Colors
01Brand · Primary · Grayscale · Service (dark)
Brand gradient · Primary
Brand Gradient
orange → red → magenta
linear-gradient(135deg)
linear-gradient(135deg)
Gradient · Orange
oklch(0.66 0.21 32)
Primary · 11STREET Red
oklch(0.65 0.26 18)
Primary · Pressed
oklch(0.54 0.22 19)
Primary · Soft (dark)
oklch(0.28 0.10 18)
Gradient · Magenta
oklch(0.65 0.36 332)
Grayscale · 14 steps (warm-tinted dark surfaces)
01
02
03
04
05
06
07
08
09
10
11
12
13
14
Secondary palette · 정보 강조 (dark)
Secondary · Blue
oklch(0.68 0.18 245)
Secondary · Yellow
oklch(0.82 0.16 70)
Secondary · Green
oklch(0.65 0.14 150)
Secondary · Bluegray
oklch(0.70 0.07 246)
Secondary · Brown
oklch(0.62 0.04 25)
Service colors · 서브 서비스 식별 (dark)
Amazon
0.70 0.10 224
T우주
0.46 0.27 276
OOAH
0.48 0.30 269
신선밥상
0.72 0.13 187
머니한잔
0.58 0.28 282
셀러오피스
0.68 0.20 264
Typography
02Pretendard · Korean primary
Headline 1
디자인 시스템 · 11번가
24 / 700 / -0.01em
Headline 3
오늘의 베스트 상품
20 / 700 / -0.01em
Title Bold
장바구니에 담긴 상품
18 / 700
Body 1
한국어 본문 샘플 — 정중한 격식체로 정보를 전달합니다. 가격, 할인율, 재고를 명확히 표시해 구매 결정을 돕습니다.
14 / 400 / 1.55
Caption 1
2026.05.27 · 무료배송 · 11STREET 단독 혜택
12 / 400
11STREET Gothic 라이선스 미공개 — Pretendard로 폴백, 가격·랭킹 숫자 글리프 일부 차이 가능
Buttons
03Speciality · Primary · Secondary · Tertiary
Variants — gradient · solid · outline · neutral
States — normal · pressed · disabled
Chips & Badges
04Pill chips · 18px badges
Choice
전체
패션
뷰티
디지털
품절
Input
서울×
10만원 이하×
Filter
무료배송
신상품
쿠폰
Basic
10% 할인
쿠폰
내일도착
Ranking
1
2
3
— 1위 · 베스트는 브랜드 타입 모먼트
Status
신선식품
단독특가
Selection Controls
05Checkbox · Radio · Toggle Switch
Checkbox
Radio Button
Toggle Switch · Android
Accordion · Tooltip
06FAQ · Anchored hint pill
Accordion · Chevron toggle
주문한 상품은 언제 오나요?
▲
일반 배송은 영업일 기준 1~3일, 새벽 배송은 자정 전 주문 시 다음 날 새벽 7시 이전에 도착합니다. 신선식품은 산지직송 컨디션에 따라 도착일이 변동될 수 있어요.
주문을 취소하거나 변경하고 싶어요
▼
상품 준비 단계 이전까지 마이페이지에서 직접 취소할 수 있습니다.
쿠폰은 어디서 받을 수 있나요?
▼
홈 화면 하단 쿠폰존에서 매일 새로 발급되는 쿠폰을 받을 수 있어요.
Tooltip · Caret 12·7 padding
할인 적용됨
29,900원
정가 35,000원 · 14% 할인
Standard tooltip · radius 4 · 92% alpha · 다크 반전
Inputs · Toast · Dialog
075-state field · 80% pill · confirmation
Active · Red focus border
장바구니에 담겼어요
주문이 완료되었어요
주문을 취소하시겠어요?
취소된 주문은 복구할 수 없어요.
Stepper · Pagination · Loading
08Quantity · Dot strip · Spinner 60×60
2
Plus / Minus Stepper
Pagination · 5 dots · 3rd active
잠시만 기다려주세요
Iconography
0924×24 keyline · stroke 1.5 · outline
검색
홈
장바구니
찜
마이
설정
알림
공유
Lucide fallback substitution — 사내 outline 폰트가 없는 외부 구현은 Lucide로 대체
Navigation & Screen
10GNB · Tabbar · Order tracking
GNB · Top app bar 56h
Previous · Home · Search · Cart · Divider line 1px
Tabbar · 64h · Active gradient
11STREET 단독 혜택
11번가 앱 단독 · 신규 가입 혜택
앱 첫 구매 5천원 쿠폰 · 무료배송
5,000원
생활가전 · 인기상품 모음
무료배송 · 11번가 멤버십 5% 추가
29,900원
신선식품 · 산지직송
내일도착 · 새벽배송 가능
12,500원
Screen mock · Order tracking
주문 추적
✓
결제
✓
상품준비
3
배송중
4
배송완료
주문 요약
- 주문번호
- 11ST-20260527-04829
- 상품금액
- 29,900원
- 배송비
- 무료
- 결제금액
- 29,900원
Stepper · Speciality CTA · 1px dividers