--- name: 11번가 design_system_name: 11STREET Design System slug: 11st category: commerce last_updated: "2026-05-29" created_at: 2026-05-27 sources: - https://design.11stcorp.com/brand/principle/ - https://design.11stcorp.com/brand/logos/ - https://design.11stcorp.com/foundation/color/ - https://design.11stcorp.com/brand/font/ - https://design.11stcorp.com/foundation/spacing/ - https://design.11stcorp.com/foundation/iconography/ - https://design.11stcorp.com/foundation/typography/ - https://design.11stcorp.com/components/toast-notification/ - https://designcompass.org/en/2024/05/21/11st-design-system/ - https://design.11stcorp.com/foundation/accessibility/ - https://design.11stcorp.com/foundation/grid/ - https://design.11stcorp.com/components/badge/ - https://design.11stcorp.com/components/buttons/ - https://design.11stcorp.com/components/accordion/ - https://design.11stcorp.com/components/checkbox/ - https://design.11stcorp.com/components/chip/ - https://design.11stcorp.com/components/dialog/ - https://design.11stcorp.com/components/radio-button/ - https://design.11stcorp.com/components/text-field/ - https://design.11stcorp.com/components/navigation/ - https://design.11stcorp.com/components/overflow-menu/ - https://design.11stcorp.com/components/pagination/ - https://design.11stcorp.com/components/stepper/ - https://design.11stcorp.com/components/tab/ - https://design.11stcorp.com/components/title/ - https://design.11stcorp.com/components/toggle-switch/ - https://design.11stcorp.com/components/tooltip/ related_services: - gmarket lang: ko logo: https://getdesign.kr/logos/11st.png --- ## Brand & Style 11번가(11STREET)는 SK Group 계열사가 운영하는 모바일 우선의 종합 이커머스 마켓플레이스이며, 디자인 시스템의 목적은 "고객에게 효율적인 커뮤니케이션과 일관되고 통일된 디자인으로 서비스 경험을 제공"하는 데 있다 [src:1][src:9]. 브랜드 가치는 Technology, Trust, Hope 세 단어로 정의되며, Street Sign(이정표)을 형상화한 로고는 다양한 상품과 차별적인 서비스로 새로운 라이프스타일을 안내한다는 메시지를 미니멀하게 표현한다 [src:2]. 다섯 가지 디자인 원칙 — Universal, Intuitive, Customer, Data, Interaction — 이 시스템 전체를 관통하며, 트렌드가 아닌 사용자 패턴의 정량적 분석을 토대로 결정을 내린다 [src:1]. 시각적 시그니처는 오렌지에서 레드, 마젠타로 이어지는 3-stop 대각 그라디언트이며, 강렬한 적색이 브랜드 모먼트를 지배한다 [src:3]. 카드는 그림자나 큰 라운드 대신 1px divider로 구분되고, 위계는 깊이가 아니라 간격과 타입 굵기로 표현된다. 브랜드 만트라는 **"더 11번가답게"** 이다 — "쇼핑의 즐거움을 생동감 있게 더 11번가답게 기본과 원칙의 개념을 제공하고 기준을 제시합니다" 라는 가치 선언이 디자인 시스템 전 섹션에 반복되는 북극성 문구로 자리한다 [src:1]. 콘텐츠 톤 레지스터는 정중한 격식체(-습니다)와 부드러운 격식체(-요)로 양분되며, 반말은 절대 사용하지 않는다. 워드마크는 국문에서 **11번가**(11과 번가 사이 띄어쓰기 없음, 숫자만 사용), 영문에서 **11STREET**(한 단어, 전체 대문자)로 표기하며, 본문에서 11ST 또는 11st 같은 약어로 줄여 쓰지 않는다 [src:2]. ## Colors 11번가의 색 체계는 브랜드 그라디언트(시그니처), Primary(인터랙티브 워크호스), 14단계 Grayscale, Secondary(정보 유형 강조), Service Color(서브 서비스 식별)의 다섯 묶음으로 구성된다 [src:3]. 토큰 값은 Claude Design 합성의 `colors_and_type.css`를 정답으로 삼아 OKLCH로 표기한다. **Brand gradient (시그니처)** — 메인 서비스 플랫폼, 모바일 앱 아이콘, 광고에 사용 [src:3]. ```yaml brand-gradient-orange: oklch(0.66 0.21 32) # #FF5A2E brand-gradient-red: oklch(0.60 0.26 18) # #FF0038 brand-gradient-magenta: oklch(0.65 0.36 332) # #FF00EF brand-gradient: "linear-gradient(135deg, oklch(0.66 0.21 32) 0%, oklch(0.60 0.26 18) 50%, oklch(0.65 0.36 332) 100%)" ``` **Primary (11STREET_Red)** — 주요 버튼, 라디오/체크박스 선택 상태, 탭 인디케이터, 뱃지 fill, 에러 텍스트, 로딩 스피너 [src:3]. ```yaml primary: oklch(0.60 0.26 18) # #FF0038 11STREET_Red primary-pressed: oklch(0.49 0.22 19) # #CC002D — primary를 어둡게 primary-soft: oklch(0.95 0.02 18) # #FFEBEF — selected chip fill / hover tint ``` **Grayscale (14단계)** — 정확히 14단계로 정의된다 [src:3]. ```yaml gray-01: oklch(0 0 0) # #000000 gray-02: oklch(0.16 0 0) # #111111 gray-03: oklch(0.30 0 0) # #333333 — fg-primary (기본 본문) gray-04: oklch(0.49 0 0) # #666666 — fg-secondary gray-05: oklch(0.55 0 0) # #777777 — fg-tertiary (힌트/비활성) gray-06: oklch(0.65 0 0) # #949494 gray-07: oklch(0.67 0 0) # #999999 — fg-disabled gray-08: oklch(0.79 0 0) # #BBBBBB gray-09: oklch(0.84 0 0) # #CCCCCC — strong border / disabled bg gray-10: oklch(0.88 0 0) # #DDDDDD gray-11: oklch(0.93 0 0) # #EEEEEE — divider/border (기본) gray-12: oklch(0.96 0 0) # #F4F4F4 — bg-surface gray-13: oklch(0.98 0 0) # #FAFAFA — subtle bg gray-14: oklch(1 0 0) # #FFFFFF — page/elevated bg ``` **Secondary palette** — 정보 유형 강조용 [src:3]. ```yaml secondary-blue: oklch(0.61 0.18 245) # #0B83E6 — 배송예정일/배송정보 secondary-yellow: oklch(0.79 0.16 70) # #FFA700 — Review 별점 secondary-green: oklch(0.56 0.14 150) # #249356 — 성공/신선 secondary-bluegray: oklch(0.64 0.07 246) # #6D96C0 secondary-brown: oklch(0.56 0.04 25) # #937676 ``` **Service colors** — 서브 서비스 식별용 [src:3]. ```yaml service-amazon: oklch(0.66 0.10 224) # #49A3C7 Amazon_Bluegreen service-tuniverse: oklch(0.36 0.27 276) # #3617CE T_Blue service-ooah: oklch(0.38 0.30 269) # #0F0FD9 OOAH_Blue service-freshtable: oklch(0.67 0.13 187) # #00B4A5 Freshtable_mint service-money: oklch(0.51 0.28 282) # #5C38F5 Money_purple service-seller: oklch(0.62 0.20 264) # #5483FD Seller_blue ``` **Semantic overlay** — Claude Design 합성에서 명시 [src:8]. ```yaml bg-overlay: oklch(0 0 0 / 0.5) # rgba(0,0,0,.5) — dialog scrim bg-toast: oklch(0 0 0 / 0.8) # rgba(0,0,0,.8) — toast 배경 ``` ## Typography **Families** — OS별로 폰트가 분기된다 [src:7]. - Android: 국문 `Noto Sans CJK KR`, 영문/숫자 `Roboto` [src:7] - iOS: 국문 `Apple SD Gothic Neo`, 영문/숫자 `SF Pro Text` [src:7] - 브랜드 전용 웹폰트: **11STREET Gothic** — 이정표 로고를 글자 형태에 반영한 자체 서체. Light/Regular/Bold 3종, 이탤릭 없음 [src:4][src:7]. 사용 범위는 OS 공통으로 **'가격' 및 일부 컴포넌트(Home tab menu, Button, Caption Carrier, Promotion Banner 등)에 한정**해 적용된다 [src:7]. Claude Design 합성에서는 11STREET Gothic 라이선스 파일 부재로 **국문은 Pretendard, Latin은 Inter**가 폴백으로 적용되며, 실제 woff2 파일이 제공되면 `--font-brand`가 우선 적용된다. **Type Scale (Android baseline; iOS는 모든 단계에 +1pt)** [src:7] ```yaml headline-0: { weight: Regular, android: 28, ios: 29 } headline-1: { weight: Bold, android: 24, ios: 25 } headline-2: { weight: Bold, android: 22, ios: 23 } headline-3: { weight: Bold, android: 20, ios: 21 } title-bold: { weight: Bold, android: 18, ios: 19 } title-regular: { weight: Regular, android: 18, ios: 19 } subtitle-1: { weight: Regular, android: 16, ios: 17 } subtitle-2: { weight: Regular, android: 15, ios: 16 } body-1: { weight: Regular, android: 14, ios: 15 } body-2: { weight: Regular, android: 13, ios: 14 } caption-1: { weight: Regular, android: 12, ios: 13 } caption-2: { weight: Regular, android: 11, ios: 12 } ``` - Line-height: 모든 단계 "Auto"(플랫폼 기본). Claude Design 합성은 한국어 가독성을 고려해 **1.4**를 사용한다 [src:7]. - letter-spacing: Headline 계열에 `-0.01em` 적용. - 권장 범위: 본문 14, 최대 28, 최소 11(11pt는 한정적으로만 사용) [src:7][src:12]. 가격, 할인율, 카운트다운, 랭킹 뱃지(`1위`, `베스트`)가 시스템에서 가장 표현력 있는 타입이며, **11STREET Gothic이 존재하는 이유는 이 숫자들을 브랜드처럼 보이게 하기 위함**이다. ## Spacing **8-Point Grid** — 8로 나누어떨어지는 주요 디바이스 스크린에서 1.5배수 시 렌더링 이슈가 최소화된다는 이유로 채택되었다 [src:5]. Guideline은 8/10dp grid, 컴포넌트 내부는 4dp grid를 따른다 [src:5]. ```yaml spacing-scale: [2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 72] spacing-base: 8 ``` **Grid (좌우 마진)** — 화면 컨텍스트에 따라 두 모드를 운영한다 [src:11]. ```yaml grid-standard: { margin: 16, columns: 4, gutters: 12 } # 일반 화면 grid-narrow: { margin: 10, columns: 4, gutters: 12 } # SRP, Cart, Order, MY ``` 표준 화면은 `16pt` 마진을 적용하지만, 정보 밀도가 높은 SRP(검색 결과), 장바구니, 주문서, 나의11번가는 마진을 `10pt`로 좁혀 더 많은 상품/리스트를 한 화면에 노출한다 [src:11]. **Component-specific spacing** — 자주 인용되는 고정 값들 [src:13][src:14][src:15][src:16][src:17][src:22][src:27]. - 좌측 마진 `16` 고정(Accordion, Checkbox, Radio, Badge, Title, Chip 공통) [src:13][src:14][src:15][src:16] - 컨트롤 아이콘과 레이블 사이 패딩 `8` [src:13][src:15] - Chip 간 간격 `6` [src:16] - Dialog Contents 상하 `24`, Title-Body `16`, 버튼 높이 `48` 고정 [src:17] - Tooltip 좌우 `12`, 상하 `7` [src:27] - Pagination Dot 사이즈 `16`, 간격 `12` [src:22] **Touch target** — 아이콘이 24×24로 표기될 때 패딩을 포함한 터치 영역은 **최소 48×48dp**(약 9mm)이며, 한국 사용자의 노안/저시력을 명시적으로 고려한 정량 가이드다 [src:10]. ## Rounded 라운드는 강하지 않다. 카드와 디바이더 중심의 무드 위에서 버튼과 뱃지는 4px, 시트와 다이얼로그는 8~16px 범위에 머무른다. 값은 Claude Design 합성을 정답으로 삼는다. ```yaml radius-none: 0 radius-xs: 2px radius-sm: 4px # buttons, badges radius-md: 8px # dialogs, cards radius-lg: 12px radius-sheet-top: 16px # bottom-sheet 상단 코너 radius-pill: 9999px # chips radius-full: 50% # avatar ``` Chip은 항상 `{rounded.pill}`을 사용하고, Button과 Badge는 `{rounded.sm}` 또는 `{rounded.md}` 범위에 둔다. Bottom Sheet의 상단 모서리만 `{rounded.sheet-top}`(16px)을 적용해 시트가 화면에서 떠오르는 감각을 만든다. ## Elevation & Depth 전체적으로 그림자는 거의 사용되지 않는다. 카드는 그림자 대신 1px Gray_11 divider로 구분되며, 위계는 깊이가 아니라 간격과 타입 굵기로 표현된다. 그림자는 사실상 **하단 Tabbar**(상단 엣지가 살짝 떠 보이도록), **Dropdown 레이어**, **Toast** 세 곳에만 한정해 사용한다 [src:20]. ```yaml shadow-tabbar: "0 -1px 4px oklch(0 0 0 / 0.06)" shadow-dropdown: "0 4px 12px oklch(0 0 0 / 0.08)" shadow-toast: "0 4px 16px oklch(0 0 0 / 0.16)" ``` **Motion** ```yaml ease-standard: cubic-bezier(.2, .0, .2, 1) ease-emphasized: cubic-bezier(.2, .0, 0, 1) duration-fast: 120ms duration-base: 200ms duration-slow: 320ms ``` ## Shapes 11번가의 셰이프 언어는 **명료한 직사각형 + 작은 라운드**가 기본이다. 이정표(Street Sign)를 형상화한 로고가 시각 정체성의 출발점이며, 아이콘은 24×24 그리드 위에서 1.5pt 스트로크, 모서리 라운드를 가진 outline 스타일로 통일된다 [src:6]. 키라인 셰이프는 Circle, Square, Horizontal Rectangle, Vertical Rectangle 네 종류이며, 모든 아이콘이 이 키라인 안에서 그려진다 [src:6]. Filled variant는 **active 탭과 홈 탭의 home 아이콘**에만 한정 적용되며, 브랜드 그라디언트로 렌더된다 [src:6]. 사내 outline 폰트가 없는 외부 구현에서는 **Lucide 아이콘**으로 대체하는 것이 Claude Design 합성의 권고다. 전체 셰이프 무드는 "쇼핑이 빽빽한 화면"과 "정돈된 화면"의 두 모드를 컨텍스트별로 전환하는 방식이다 — 검색 결과/장바구니/주문서는 마진과 라운드를 줄여 정보를 밀도 있게, 홈/마이는 마진과 여백을 확보해 정돈된 감각을 만든다 [src:11]. ## Components ### button-speciality 가장 강한 강조의 버튼이며, **브랜드 그라디언트를 fill로 받는 단 하나의 컴포넌트**다 [src:13]. UI 최하단에 고정되고 full-width 배치가 기본이다. 결제, 구매 확정처럼 화면에서 가장 무거운 단일 액션에만 사용한다. ```tsx 구매하기 // background: {colors.brand-gradient} // border-radius: {rounded.sm} // padding: {spacing.16} // typography: {typography.title-bold} // position: fixed bottom (UI 최하단) ``` ### button-primary `{colors.primary}`(11STREET_Red) 솔리드 fill. 화면의 주요 클릭 유도(장바구니 담기, 다음 단계 진행 등)에 사용한다 [src:13]. 패딩 `{spacing.16}` 고정, States는 Normal/Pressed/Disabled [src:13]. ```tsx 장바구니 // background: {colors.primary} // color: {colors.gray-14} // border-radius: {rounded.sm} // padding-x: {spacing.16} ``` ### button-primary-pressed Pressed 상태는 fill을 `{colors.primary-pressed}`로 어둡게 처리한다. 트랜지션은 `{motion.duration-fast}` + `{motion.ease-standard}`. ### button-primary-disabled Disabled 상태는 fill을 `{colors.gray-09}`, 텍스트를 `{colors.gray-07}`로 처리한다. 클릭 인터랙션은 차단되며 cursor는 not-allowed. ### button-secondary 텍스트 버튼보다 강조가 필요할 때 사용한다 [src:13]. Secondary는 outline + 텍스트 컬러 `{colors.primary}` 조합으로 운영되며, 패딩 `{spacing.16}` 고정이다. ### button-tertiary 화면 하위 작업이나 덜 눈에 띄는 액션에 사용한다 [src:13]. Normal–X-small 단계까지는 패딩을 `{spacing.8}`로 줄여 인라인 텍스트 액션처럼 보이게 한다. 긍정 행동은 오른쪽, 부정 행동은 왼쪽 정렬을 따른다 [src:13]. ### badge-basic 할인이나 혜택을 표시하는 기본 뱃지다 [src:12]. 높이 `18` 고정, 컨테이너-레이블 패딩 `8`, 1개 이상 배치 시 가로/세로 패딩 `4` [src:12]. Color spec는 Text 100%, Fill 4%, Border 40%, Background `{colors.gray-14}` 100% [src:12]. ```tsx 10% 할인 // height: 18 // padding-x: {spacing.8} // border-radius: {rounded.sm} // typography: {typography.caption-1} ``` ### badge-special 상품의 속성(예: 무료배송, 신선식품)을 강조하는 뱃지로, Basic과 동일한 18 높이 규칙을 따른다 [src:12]. ### badge-ranking 순위 노출용 뱃지다. `1위`, `베스트` 같은 숫자/단어가 가장 표현력 있는 타입이라 **11STREET Gothic**으로 렌더링되는 대표 위치다 [src:12]. ### chip-choice 다중 선택 가능한 기본 칩이다 [src:16]. 최대 글자 수 `10자(22byte, 공백 포함)`이며 초과 시 자른다. 칩 간 간격은 `{spacing.6}` [src:16]. Selected 상태는 핑크 fill(`{colors.primary-soft}`) + 레드 border(`{colors.primary}`) 조합으로 소프트하게 표현된다. ```tsx 여성 // border-radius: {rounded.pill} // gap-between: {spacing.6} // selected: background {colors.primary-soft}, border {colors.primary} ``` ### chip-input 사용자가 입력해 만들고 `×` 버튼으로 삭제 가능한 칩 [src:16]. ### chip-filter 검색 결과 필터로 사용되는 칩으로, 활성/비활성 두 상태를 가진다 [src:16]. ### tabbar 화면 하단 3~5개 아이콘 메뉴 [src:20]. 컨테이너 높이 `64`(그림자 포함), 아이콘 사이즈 `36` 고정. `{shadow.shadow-tabbar}`가 적용되어 상단 엣지가 살짝 떠 보인다 [src:20]. Selected 탭은 아이콘에 브랜드 그라디언트가 들어간 Filled 아이콘으로 전환된다 [src:6]. ### tabbar-home-icon Lottie 링크로 제공되는 시스템 유일의 히어로 인터랙션이며, 터치 영역은 `72×72` [src:20]. 11번가 로고가 집(home) 모양으로 모핑되는 시그니처 모션을 가진다 [src:20]. ### gnb 앱 상단 고정 영역으로, Previous / Home / Search / Cart 아이콘 + Divider line + Badge area로 구성된다 [src:20]. 스크롤 시 유지되거나 압축된다 [src:20]. ### title-cap-box 홈 전용 타이틀로 높이 `60` 고정 [src:25]. 4 variants(기본 / 서브타이틀 / 버튼 / 타임)를 가진다 [src:25]. ### title-sub 좌측 또는 중앙 정렬의 일반 섹션 타이틀, 높이 `56` 고정 [src:25]. ### dialog Alert / Simple / Confirmation 3종 [src:17]. 중앙 정렬, 좌우 마진 `16`, Contents 상하 `24`, Title–Body 마진 `16`, 버튼 높이 `48` 고정 [src:17]. 버튼은 최대 2개이며, 우선순위가 높은 버튼의 텍스트 컬러는 `{colors.primary}`로 처리한다 [src:17]. ```tsx 주문을 취소하시겠어요? 취소된 주문은 복구할 수 없어요. // border-radius: {rounded.md} // padding-y: {spacing.24} // title-body-gap: {spacing.16} // action-height: {spacing.48} ``` ### bottom-sheet-modal Overflow Menu의 Modal 타입으로, scrim(`{colors.bg-overlay}`)이 뒤 콘텐츠를 비활성화한다 [src:21]. 좌우 상단 패딩 `16`, 상단 코너 `{rounded.sheet-top}` [src:21]. ### bottom-sheet-drag Handlebar로 시트 영역을 확장/축소할 수 있다. Full 높이일 때 최소 높이 `40`을 유지해 사용자가 시트를 닫을 수 있는 영역을 남긴다 [src:21]. ### toast-info 텍스트만 노출하는 기본 토스트 [src:8]. 한 줄 높이 `48` 고정, 두 줄까지, 배경은 `{colors.bg-toast}`(검정 80% 반투명) [src:8]. CTA나 내비게이션 앞에 배치하지 않는다 [src:8]. ```tsx 장바구니에 담겼습니다 // height: 48 // background: {colors.bg-toast} // box-shadow: {shadow.shadow-toast} // border-radius: {rounded.md} ``` ### toast-success 아이콘 + 텍스트 조합 [src:8]. ### toast-error 닫기 버튼을 포함하며 사용자가 닫을 때까지 지속된다 [src:8]. ### tooltip Standard / Small 2종 [src:27]. Caret tip(▲)이 트리거 요소에 밀접 연결되며, 컨테이너 패딩은 좌우 `12`, 상하 `7` [src:27]. ### loading `{colors.primary}` 색상의 원형 인디케이터, `60×60` 중앙 정렬 [src:8]. 1초 이상(2~5초) 대기 시에만 노출하며, 첫 화면 로드/새로고침이 아닌 한 화면당 1개만 운영한다 [src:8]. ### pagination-dot Active = `{colors.gray-01}`, Inactive = `{colors.gray-01}` 30% opacity, Dot 사이즈 `16`, 간격 `12` [src:22]. ### pagination-number Active = `{colors.primary}`, Inactive = `{colors.gray-14}`. 컨테이너 높이 `44`, 숫자 너비 `40`, 이전/다음 버튼 너비 `60` [src:22]. ### stepper Plus Minus / Number Input 2종 [src:23]. 컨트롤 아이콘 `32` 고정, 숫자 입력 영역은 가변(센터 정렬). 기본값을 반드시 가진다(보통 1) [src:23]. ### tab Fixed(2~3 섹션) / Scrollable(홈처럼 섹션이 많을 때) 2종 [src:24]. Selected indicator와 Label은 `{colors.primary}`로 표시된다 [src:24]. ### text-field InActive / Active / Disabled / Focused / Error 5상태 [src:19]. Input area는 좌측 정렬, 좌측 패딩 `12`, 임의의 컬러 적용을 금지한다 [src:19]. ### checkbox Selected 상태에 `{colors.primary}`를 사용해 시각적 명확성을 확보한다 [src:15]. ### radio-button Selected 상태에 `{colors.primary}`를 사용한다 [src:18]. ### toggle-switch Android(MW 포함) / iOS 2종. 우측 정렬, 우측 패딩 `16` [src:26]. MW에서는 안드로이드 형태를 따른다(MW의 안드로이드 사용자 비중이 높다는 점이 명시적으로 반영됨) [src:26]. ### accordion Closed(기본) / Open 2상태. Chevron 아이콘은 시작 또는 끝에 일관 배치하며, 좌우 마진 `16`, 컨트롤–레이블 패딩 `8` [src:14]. ## Do's and Don'ts **Do** - 브랜드 그라디언트(`{colors.brand-gradient}`)는 **Speciality Button과 active 탭/홈 아이콘 Filled variant**에만 한정해 사용한다 [src:13]. - 솔리드 적색이 필요한 모든 인터랙션은 `{colors.primary}`(11STREET_Red)를 일관되게 사용한다 — 주요 버튼, 라디오/체크박스 selected, 탭 인디케이터, 뱃지 fill, 에러 텍스트, 로딩 스피너 [src:3]. - 카드와 리스트의 경계는 **그림자가 아닌 1px `{colors.gray-11}` divider**로 표현한다. - 가격, 할인율, 카운트다운, 랭킹 뱃지(`1위`, `베스트`)는 가능하면 11STREET Gothic(폴백: Pretendard)으로 렌더해 숫자를 브랜드처럼 보이게 한다. - SRP, 장바구니, 주문서, 마이페이지는 좌우 마진을 `10pt`(narrow grid)로, 일반 화면은 `16pt`(standard grid)로 적용한다 [src:11]. - 모든 버튼 레이블은 **2~4 음절 액션 동사**로 작성한다(`구매하기`, `장바구니`, `확인`, `취소`). - 모든 숫자는 아라비아 숫자로 표기한다(spell-out 금지). - 톤은 가이드라인 문서에서 **-습니다**(정중한 격식체), 토스트/다이얼로그/상품 카피에서 **-요**(부드러운 격식체)로 운영한다. - 브랜드 워드마크는 **국문 "11번가", 영문 "11STREET"** 로만 표기한다 [src:2]. - 터치 영역은 아이콘 크기와 무관하게 `48×48dp` 이상을 확보한다 [src:10]. **Don't** - 본문 카피에 1인칭/2인칭 대명사를 쓰지 않는다(예: ✗ "Add it to your cart" / ✓ "Add to cart"). - 본문에서 워드마크를 `11ST`, `11st`로 약어화하지 않는다(slug `11st`는 URL/식별자에만 사용) [src:2]. - 반말(`해`, `했어`)이나 챗봇 톤(`~해보세요!`)을 사용하지 않는다. - chrome(시스템 UI) 영역에 이모지, 유니코드 불릿, ASCII 아트를 넣지 않는다(셀러 머천다이징 배너만 예외). - 브랜드 그라디언트를 본문 텍스트, 배경, 칩, 일반 버튼 fill로 확장하지 않는다 — 그라디언트는 시그니처 모먼트 전용이다 [src:13]. - 카드와 패널에 그림자를 추가하지 않는다 — 그림자는 Tabbar, Dropdown, Toast 세 곳에만 한정한다. - `{colors.primary}` 외의 적색을 마음대로 추가하지 않는다(주황은 그라디언트 stop으로만 등장). - 컴포넌트 컬러에 임의 컬러를 적용하지 않는다(특히 Text Field) [src:19]. - 11pt 미만 폰트 사이즈를 사용하지 않는다 [src:7][src:10]. - 화면당 로딩 인디케이터를 2개 이상 노출하지 않는다 [src:8]. - 11번가의 e커머스 도메인(쇼핑·구매/결제 전환 흐름, SRP·장바구니·주문 같은 거래 화면 패턴)과 브랜드 고유 자산(가격·랭킹 전용 11STREET Gothic, "더 11번가답게" 카피 정체성)을 성격이 다른 제품에 그대로 이식하지 않는다 — 차용할 것은 시각 언어(3-스톱 브랜드 그라디언트를 Speciality 버튼·active 탭에만 한정·gray-11 1px 디바이더 위주의 그림자 회피·48×48dp 터치 타깃·정보 밀도용 듀얼 그리드 마진)이지 11번가의 커머스 도메인이 아니다 [src:1]. ## Responsive Behavior 11번가는 **모바일 우선(iOS/Android 네이티브 앱)** 설계가 기본이며, MW(모바일웹)는 안드로이드 사용자 비중이 높다는 전제로 운영된다 [src:7][src:26]. 데스크탑 웹의 명시적 브레이크포인트는 공개된 디자인 시스템에서 surfacing되지 않았다 — 아래 표는 디자인 시스템이 명시한 컨텍스트별 마진 전환에 한정한다. | 컨텍스트 | 좌우 마진 | Key Changes | 출처 | |---|---|---|---| | 일반 화면(홈, 카테고리, 상품 상세) | 16pt | 표준 grid(`{spacing.16}`), 4 columns / 12 gutters | [src:11] | | 트랜잭션·탐색 밀도 화면(SRP, Cart, Order, MY) | 10pt | narrow grid(`{spacing.10}`), 정보 밀도 우선, 4 columns / 12 gutters | [src:11] | | MW 토글 스위치 | — | Android 형태 채택 | [src:26] | | iOS 타입 스케일 | — | Android 대비 +1pt 모든 단계 | [src:7] | **Touch target rule**: 아이콘이 24×24로 표기되더라도 패딩 포함 터치 영역은 **최소 48×48dp**(약 9mm)를 확보한다 [src:10]. Tabbar의 home 아이콘은 `72×72`로 가장 넓은 터치 영역을 갖는다 [src:20]. **Per-component collapsing**: - Tabbar: 화면 하단 고정, 스크롤 시 유지. 컨테이너 높이 `64`(그림자 포함) [src:20]. - GNB: 스크롤 시 유지 또는 압축 [src:20]. - Tab: 섹션 수가 많으면 Fixed → Scrollable 전환 [src:24]. - Dialog: 화면 폭과 무관하게 좌우 마진 `16` 고정, 가운데 정렬 [src:17]. - Bottom Sheet: Drag 타입은 Handlebar로 사용자 의도에 따라 높이 가변 [src:21]. 데스크탑 웹 브레이크포인트 시스템은 공개되지 않아 (no published desktop breakpoint system surfaced) 표시한다. ## Known Gaps - **데스크탑 웹 브레이크포인트와 그리드**: 디자인 시스템 문서가 모바일 앱(iOS/Android)과 MW 중심으로 작성되어 있어 데스크탑 웹의 명시적 브레이크포인트(예: 768/1024/1280px), 컬럼 수, 사이드 네비 패턴은 공개되지 않았다. - **Dark mode**: 14단계 grayscale은 단일 라이트 팔레트로만 정의되어 있으며, 다크 모드의 시맨틱 매핑(특히 fg/bg/surface 토큰)이 공개 자료에 없다. - **Form validation states**: Text Field는 InActive/Active/Disabled/Focused/Error 5상태가 정의되어 있으나 [src:19], Error 메시지의 정확한 노출 패턴(인라인 vs 하단, 아이콘 동반 여부, 다중 필드 에러 처리)은 surfacing되지 않았다. - **Lottie home icon 모션 곡선**: 11번가 로고가 집 모양으로 모핑되는 시그니처 인터랙션 [src:20]의 정확한 keyframe/easing 정의는 Lottie 링크 외부로는 공개되지 않았다. - **11STREET Gothic의 외부 사용**: 라이선스 파일이 비공개이므로 외부 구현은 Pretendard로 폴백하지만, 가격 숫자의 글리프 특성(예: 균등 폭, 0의 사선 슬래시 유무)이 Pretendard로는 완전히 재현되지 않을 수 있다. ## References 1. https://design.11stcorp.com/brand/principle/ 2. https://design.11stcorp.com/brand/logos/ 3. https://design.11stcorp.com/foundation/color/ 4. https://design.11stcorp.com/brand/font/ 5. https://design.11stcorp.com/foundation/spacing/ 6. https://design.11stcorp.com/foundation/iconography/ 7. https://design.11stcorp.com/foundation/typography/ 8. https://design.11stcorp.com/components/toast-notification/ 9. https://designcompass.org/en/2024/05/21/11st-design-system/ 10. https://design.11stcorp.com/foundation/accessibility/ 11. https://design.11stcorp.com/foundation/grid/ 12. https://design.11stcorp.com/components/badge/ 13. https://design.11stcorp.com/components/buttons/ 14. https://design.11stcorp.com/components/accordion/ 15. https://design.11stcorp.com/components/checkbox/ 16. https://design.11stcorp.com/components/chip/ 17. https://design.11stcorp.com/components/dialog/ 18. https://design.11stcorp.com/components/radio-button/ 19. https://design.11stcorp.com/components/text-field/ 20. https://design.11stcorp.com/components/navigation/ 21. https://design.11stcorp.com/components/overflow-menu/ 22. https://design.11stcorp.com/components/pagination/ 23. https://design.11stcorp.com/components/stepper/ 24. https://design.11stcorp.com/components/tab/ 25. https://design.11stcorp.com/components/title/ 26. https://design.11stcorp.com/components/toggle-switch/ 27. https://design.11stcorp.com/components/tooltip/