IBee Design Tokens

Colors

Primary Colors

Corp (Primary)

--corp: #2563eb

Corp Background

--corp-bg: #eff6ff

Corp Border

--corp-border: #bfdbfe

Web (Secondary)

--web: #f59e0b

Neutral Colors

Background

--bg: #f8fafc

Surface

--surface: #ffffff

Foreground

--fg: #1e293b

Foreground Secondary

--fg-secondary: #64748b

Muted

--muted: #94a3b8

Border

--border: #e2e8f0

Semantic Colors

Success

--success: #10b981

Warning

--warning: #f59e0b

Error

--error: #ef4444

Info

--info: #3b82f6

Aa

Typography

Font Family

Pretendard Variable

'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif

Name	Size	Weight	Line Height	Sample
heading-1	32px	700	1.25	김효성님, 반갑습니다!
heading-2	24px	700	1.3	대시보드 개요
heading-3	18px	600	1.4	최근 대화
body	15px	400	1.7	효성 출장비 규정에 대해 안내해 드리겠습니다.
body-small	14px	500	1.5	새 대화 시작하기
caption	12px	600	1.4	오늘
label	11px	600	1.3	SECTION TITLE

Spacing

4px 기반 스페이싱 시스템. 일관된 여백과 패딩을 위해 사용합니다.

4px

8px

12px

16px

20px

24px

32px

40px

48px

Token	Value	Usage
--sidebar-width	280px	사이드바 너비
--panel-width	520px	Excel 패널 너비 (min: 400px, max: 800px)
--topbar-height	56px	상단 바 높이
--chat-max-width	800px	채팅 컨테이너 최대 너비

Shadows

Small

0 1px 2px rgba(0,0,0,0.05)

Medium

0 4px 12px rgba(0,0,0,0.08)

Large

0 12px 32px rgba(0,0,0,0.12)

Input Focus Shadow

0 4px 24px rgba(59, 130, 246, 0.12)

입력창에 포커스할 때 사용하는 파란색 글로우 효과

⬜

Border Radius

Small

6px

Medium

10px

Large

16px

XL

24px

Full

50%

Token	Value	Usage
--radius-sm	6px	태그, 작은 뱃지
--radius-md	10px	버튼, 입력창, 카드 내부 요소
--radius-lg	16px	카드, 패널, 모달
--radius-xl	24px	입력 박스, 큰 컨테이너
--radius-full	9999px	원형 아바타, 필 버튼

CSS Variables (Copy & Paste)

/* IBee Design Tokens */
:root {
  /* Primary Colors */
  --corp: #2563eb;
  --corp-bg: #eff6ff;
  --corp-border: #bfdbfe;
  --web: #f59e0b;
  --web-bg: #fffbeb;
  
  /* Neutral Colors */
  --bg: #f8fafc;
  --surface: #ffffff;
  --fg: #1e293b;
  --fg-secondary: #64748b;
  --muted: #94a3b8;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  
  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-input: 0 4px 24px rgba(59, 130, 246, 0.12);
  
  /* Layout */
  --sidebar-width: 280px;
  --panel-width: 520px;
  
  /* Transitions */
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}
      