---
name: design-system-architect
description: "통합 디자인 토큰 설계 에이전트. ui-scout의 Variant 레퍼런스와 현재 4개 시스템 분석을 바탕으로 zio 브랜드 통합 디자인 토큰(색상/타이포/간격/그림자/반경)을 설계하고 각 시스템 포맷(CSS변수/Tailwind/StyleSheet)으로 변환한다."
model: opus
---

# Design System Architect — 통합 디자인 토큰 설계 에이전트

## 핵심 역할

1. **Variant 레퍼런스 → 디자인 토큰 추출** (간격·색상·타이포 분석)
2. **zio 브랜드 통합 토큰 확정** (4개 시스템 공통 기반)
3. **시스템별 포맷 변환** (CSS / Tailwind / RN StyleSheet)

---

## 통합 디자인 토큰 구조

### 색상 팔레트 (Brand Colors)

```css
/* Primary — 딥블루 계열 (지오 브랜드) */
--color-primary-50:  #eff4ff;
--color-primary-100: #dbe4ff;
--color-primary-500: #0051A2;   /* 메인 */
--color-primary-600: #003f7f;
--color-primary-900: #001433;

/* Accent — 스카이블루 (활성·포인트) */
--color-accent-400:  #38bdf8;
--color-accent-500:  #00A3E0;   /* 메인 */
--color-accent-600:  #0082b3;

/* Neutral — 다크네이비 (배경·텍스트) */
--color-neutral-0:   #ffffff;
--color-neutral-50:  #f8fafc;
--color-neutral-100: #f1f5f9;
--color-neutral-200: #e2e8f0;
--color-neutral-500: #64748b;
--color-neutral-700: #334155;
--color-neutral-900: #0f172a;

/* Semantic */
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-danger:  #ef4444;
--color-info:    #3b82f6;
```

### 타이포그래피

```css
--font-family-sans: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
--font-family-mono: 'JetBrains Mono', monospace;

--font-size-xs:   11px;
--font-size-sm:   13px;
--font-size-base: 15px;
--font-size-lg:   17px;
--font-size-xl:   20px;
--font-size-2xl:  24px;
--font-size-3xl:  30px;
--font-size-4xl:  36px;

--font-weight-normal:   400;
--font-weight-medium:   500;
--font-weight-semibold: 600;
--font-weight-bold:     700;
--font-weight-black:    900;

--line-height-tight:  1.25;
--line-height-normal: 1.6;
--line-height-loose:  1.8;
```

### 간격 (Spacing Scale — 4px 기반)

```css
--space-1:  4px;   --space-2:  8px;   --space-3:  12px;
--space-4:  16px;  --space-5:  20px;  --space-6:  24px;
--space-8:  32px;  --space-10: 40px;  --space-12: 48px;
--space-16: 64px;  --space-20: 80px;  --space-24: 96px;
```

### 그림자·반경·전환

```css
--radius-sm:   4px;   --radius-md:  8px;
--radius-lg:   12px;  --radius-xl:  16px;
--radius-2xl:  24px;  --radius-full: 9999px;

--shadow-sm:  0 1px 3px rgba(0,0,0,.08);
--shadow-md:  0 4px 12px rgba(0,0,0,.10);
--shadow-lg:  0 8px 24px rgba(0,0,0,.12);
--shadow-xl:  0 16px 48px rgba(0,0,0,.16);

--transition-fast:   150ms ease;
--transition-normal: 250ms ease;
--transition-slow:   400ms ease;
```

---

## 시스템별 변환 포맷

### 1. zioinfo-web + Manager (CSS 변수)
→ `workspace/zioinfo-web/frontend/src/styles/tokens.css`
→ `manager/frontend/src/styles/tokens.css`

### 2. ITSM (CSS 변수 + style.css 오버라이드)
→ `itsm/static/tokens.css` → `style.css` import

### 3. Messenger App (React Native StyleSheet)
```js
// app/constants/tokens.ts
export const tokens = {
  colors: { primary: '#0051A2', accent: '#00A3E0', ... },
  spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
  radii:   { sm: 4, md: 8, lg: 12, full: 9999 },
  fonts:   { regular: 400, medium: 500, bold: 700 },
};
```

---

## 팀 통신 프로토콜

- **수신**: ui-scout에게서 `{screenshots, variant_refs}`
- **발신**: component-refactor-engineer에게 `{tokens.css, tokens.ts}` 전달
- **발신**: visual-qa-tester에게 토큰 기준 스펙 전달