# Carbon Design System (IBM)

> 데이터 중심 B2B/엔터프라이즈 UI. 명확성과 효율성 최우선.

## 핵심 원칙
- **Clarity**: 복잡한 정보를 명확하게
- **Efficiency**: 전문가 사용자의 생산성
- **Consistency**: 제품 간 일관된 경험
- **Beauty**: 기능적 아름다움

---

## 컬러 시스템 (White Theme 기준)

```
Blue (Interactive)
  Blue 10:  #EDF5FF
  Blue 20:  #D0E2FF
  Blue 30:  #A6C8FF
  Blue 40:  #78A9FF
  Blue 50:  #4589FF
  Blue 60:  #0F62FE   ← Interactive / Primary
  Blue 70:  #0043CE
  Blue 80:  #002D9C
  Blue 90:  #001D6C
  Blue 100: #001141

Gray
  Gray 10:  #F4F4F4   ← UI Background
  Gray 20:  #E0E0E0   ← UI 02
  Gray 30:  #C6C6C6   ← UI 03
  Gray 40:  #A8A8A8   ← Disabled
  Gray 50:  #8D8D8D
  Gray 60:  #6F6F6F   ← Helper text
  Gray 70:  #525252   ← Secondary text
  Gray 80:  #393939   ← Primary text
  Gray 90:  #262626
  Gray 100: #161616   ← Main bg (dark)

Support
  Red 60:    #DA1E28  ← Error
  Orange 40: #FF832B  ← Warning
  Green 50:  #198038  ← Success
  Teal 50:   #009D9A  ← Info
```

## 타이포그래피 (IBM Plex Sans / IBM Plex Sans KR)

```
Code-01: 12px / Line 16 / Weight 400 (monospace)
Code-02: 14px / Line 20 / Weight 400 (monospace)
Label-01: 12px / Line 16 / Weight 400 / Spacing 0.32px
Label-02: 14px / Line 18 / Weight 400 / Spacing 0.16px
Helper-01: 12px / Line 16 / Weight 400 / Spacing 0.32px
Body-01:   14px / Line 20 / Weight 400 / Spacing 0.16px
Body-02:   16px / Line 24 / Weight 400 / Spacing 0px
Body-Compact-01: 14px / Line 18 / Weight 400
Heading-01: 14px / Line 18 / Weight 600 / Spacing 0.16px
Heading-02: 16px / Line 22 / Weight 600
Heading-03: 20px / Line 28 / Weight 400
Heading-04: 28px / Line 36 / Weight 400
Heading-05: 36px / Line 44 / Weight 400
Heading-06: 42px / Line 50 / Weight 300
Heading-07: 54px / Line 64 / Weight 300
Display-01: 42px / Line 50 / Weight 300
Display-02: 54px / Line 64 / Weight 300
Display-03: 60px / Line 70 / Weight 300
Display-04: 92px / Line 100 / Weight 100
```

## 스페이싱 (8px 기반)

```
2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 160px
```

## 컨테이너 높이

```
Small:       24px
Medium:      32px
Large:       40px  ← 기본
Extra Large: 48px
```

## Border Radius
```
대부분: 0px (각진 스타일)
예외:   Tags = 100px, Tooltip = 2px
```

---

## 주요 컴포넌트 패턴

### 버튼
```
Primary:   bg=#0F62FE, text=#FFF, h=48px, px=16, radius=0
Secondary: bg=#393939, text=#FFF, h=48px, px=16, radius=0
Tertiary:  border=1px #0F62FE, text=#0F62FE, h=48px, px=16
Danger:    bg=#DA1E28, text=#FFF, h=48px, px=16
Ghost:     bg=transparent, text=#0F62FE, h=48px, px=16
Small:     h=32px
```

### 입력 필드
```
bg:         #F4F4F4
border-bottom: 1px solid #8D8D8D
focus:      border-bottom: 2px solid #0F62FE
오류:       border-bottom: 2px solid #DA1E28
h:          40px (medium), 32px (small), 48px (large)
px:         16px
label:      위쪽, 12px, Gray 70
```

### 데이터 테이블
```
header-bg:  #E0E0E0
row-bg:     #F4F4F4 / #FFFFFF 교차
border:     1px solid #E0E0E0
row-h:      48px (normal), 32px (compact), 64px (relaxed)
```

### 알림 / 토스트
```
Error:   bg=#FFF1F1, left-border=4px #DA1E28
Warning: bg=#FFF8F0, left-border=4px #F1C21B
Success: bg=#DEFBE6, left-border=4px #198038
Info:    bg=#EDF5FF, left-border=4px #0F62FE
```

---

## React 구현 가이드

```bash
npm install @carbon/react
```

```jsx
import { Button, TextInput, DataTable } from '@carbon/react';
import '@carbon/styles/css/styles.css';

<Button kind="primary">Primary</Button>
<Button kind="secondary">Secondary</Button>
<TextInput labelText="이메일" id="email" />
```

## 아이콘
```bash
npm install @carbon/icons-react
```
```jsx
import { Add, TrashCan, Edit } from '@carbon/icons-react';
<Add size={16} />
```

## 금지 사항
- 이모티콘 사용 금지 → @carbon/icons-react 사용
- 컬러 토큰 무시 금지 → 반드시 Carbon 토큰 사용
- 임의 border-radius 추가 금지 (각진 스타일이 Carbon 철학)