코드잇

---
name: 코드잇
slug: codeit
category: education
last_updated: "2026-07-16"
sources:
  - https://design.codeit.com
  - https://www.codeit.kr
  - https://design.codeit.com/brand
  - https://design.codeit.com/brand/value
  - https://design.codeit.com/brand/color
  - https://design.codeit.com/brand/logo
  - https://design.codeit.com/foundations
  - https://design.codeit.com/foundations/color
  - https://design.codeit.com/foundations/typography
  - https://design.codeit.com/foundations/radius
  - https://design.codeit.com/foundations/layout
  - https://design.codeit.com/foundations/spacing
  - https://design.codeit.com/foundations/iconography
  - https://design.codeit.com/components
  - https://design.codeit.com/components/accordion
  - https://design.codeit.com/components/bottom-sheet
  - https://design.codeit.com/components/buttons
  - https://design.codeit.com/components/buttons/detail
  - https://design.codeit.com/components/checkbox
  - https://design.codeit.com/components/dropdown
  - https://design.codeit.com/components/label
  - https://design.codeit.com/components/modal
  - https://design.codeit.com/components/pagination
  - https://design.codeit.com/components/radio-button
  - https://design.codeit.com/components/select
  - https://design.codeit.com/components/snackbar
  - https://design.codeit.com/components/table
  - https://design.codeit.com/components/tabs
  - https://design.codeit.com/components/textfield
  - https://design.codeit.com/components/textarea
  - https://design.codeit.com/components/toast
  - https://design.codeit.com/components/tooltip
  - https://design.codeit.com/patterns
  - https://design.codeit.com/patterns/empty-section
  - https://design.codeit.com/patterns/filter
  - https://design.codeit.com/patterns/title
  - https://design.codeit.com/patterns/loading
  - https://design.codeit.com/ux-writing
  - https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css
  - https://cdn.jsdelivr.net/npm/spoqa-han-sans@3.3.0/css/SpoqaHanSansNeo.css
related_services:
  - teamsparta
  - class101
lang: ko
logo: https://getdesign.kr/logos/codeit.png
---

## Brand & Style

코드잇은 프로그래밍 교육 서비스이며, `design.codeit.com`은 그 공개 디자인 시스템 사이트다(Framer 호스팅, 전 문서 한국어) [src:1]. 슬로건은 "배움의 기쁨을 세상 모두에게"이며 [src:1], 시스템 자체를 "'배움의 기쁨'을 일관되게 전하기 위한 약속"으로 정의한다. "명확한 원칙과 유연한 컴포넌트로 협업을 효율화하고, 더 나은 사용자 경험을 제공"하는 것이 목적이다 [src:1].

3대 디자인 원칙은 다음과 같다 [src:1]: (1) 변함없는 경험의 약속 — 어디서든 같은 원칙으로 일관된 경험을 제공, (2) 함께 일하는 즐거움 — PM·디자이너·개발자 간 협업을 위한 약속, (3) 일관성 속의 자율성 — 방향은 제시하되 창의성을 제한하지 않음.

브랜드 키워드 6종 — 긍정적인·진정성 있는·몰입하는·깔끔한·보편적인·스마트한 — 은 각각 "…서비스" 형식의 한 줄 정의를 동반하며, 그중 "몰입하는"은 학습자가 학습에만 온전히 집중할 수 있는 서비스로 정의된다 [src:4]. 로고는 워드마크(소문자 `codeit;`, 세미콜론 포함)와 심볼(`C`와 세미콜론을 결합해 90도 회전한 스마일 페이스 — 문서가 말하는 "기쁨과 즐거움"의 형태적 확인) 2요소로 구성된다 [src:6]. 워드마크는 "서체 변경·자간 조정 등 임의 변형 금지"가 시스템 전체에서 유일하게 명시된 로고 원칙이다 [src:6].

시스템 계층은 **Brand**(Value·Logo·Color) → **Foundations 6종**(Color·Typography·Radius·Layout·Spacing·Iconography) → **Components 17종** → **Patterns 4종**의 4단 구조다 [src:7] [src:33]. Brand 계층은 "코드잇의 정체성을 시각적으로 전달하며, 사용자와 만나는 모든 접점에서 일관된 메시지를 전달하도록 지원"하는 층으로 정의된다 [src:3]. Foundations는 "모든 컴포넌트와 패턴 설계의 기준"으로, Patterns는 "컴포넌트보다 상위 개념"으로 각각 텍스트로 정의된다 [src:7] [src:33]. 운영 조직은 채용 페이지 기준 BX Designer 1인 + Product Designer 3인으로 노출되며, 문서는 Framer, 컴포넌트 데모는 Figma Sites 임베드로 구성된 소수 인력의 노코드 운영 구조다 [src:1].

타깃은 국내 학습자와 협업 조직이다 — 전체 문서가 한국어 전용이고 영문 버전이 없다 [src:1] [src:14]. 전반적 톤은 차분하고 절제된 교육 서비스의 신뢰감에 가깝다: 유채색은 단일 바이올렛 액센트로 수렴하고 [src:5], 여백을 넉넉히 쓰며 밀도를 낮춘 배치를 취한다 [src:12]. 문서 자체의 어조는 "~합니다/~해야 합니다"의 정중한 설명체이며, 규칙 강도를 "권장"·"비권장"·"금지"로 구분한다 [src:17] [src:10].

## Colors

코드잇의 색 시스템은 차갑고 밝은(high-key) 무채색 베이스에 단일 바이올렛 액센트로 수렴한다 [src:2] [src:5]. 브랜드 컬러는 "브랜드 분위기를 형성하는" 유채색 단일 핵심색이고, White/Black은 그 브랜드 컬러를 돋보이게 하는 보조 배경색으로 정의된다 [src:5].

토큰 아키텍처는 Leaf(162개, 라이트/다크 스와치 쌍) → Mapping(104개) → Semantic(카테고리-역할 구조) 3계층이다 [src:2] [src:8]. 시맨틱 토큰은 docs와 번들에서 **이름이 다르게 노출된다** — docs의 축약명 `txt-`/`bg-`가 번들에선 풀-워드 `--text-`/`--background-`로 나온다 [src:2] [src:8]. 아래 표는 docs 표기를 따르고, 리터럴 yaml 블록은 번들 표기를 따르되 주석으로 대응 관계를 병기한다. 스케일은 gray/purple/blue/pink/yellow/green 6개 패밀리 × 13스텝(00, 05, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100)이며 [src:2], **이 스텝들의 hex는 `design.codeit.com`에 스와치 이미지로만 존재하고 텍스트로 공개되지 않는다** — 아래 스케일 값은 전부 프로덕션 번들(`www.codeit.kr`)의 CSS 실측이다 [src:2] [src:8].

가장 특징적인 사실 — **purple 패밀리는 13스텝 전부가 라이트=다크 동일값**이며, 이는 추출 버그가 아니라 원시 CSS에 라이트/다크 리프가 개별 선언된 의도적 설계다(단일 선언, 충돌 없음) [src:2]. 나머지 5개 패밀리(gray/blue/pink/yellow/green) 중 blue/pink/yellow/green은 `dark-X ≈ light-(100-X)` 반전 패턴을 따르고, gray만 반전이 아니라 완전히 독립된 다크 램프를 갖는다 [src:2]. 반전 규칙에는 예외가 하나 있다 — `dark-green-90`은 반전 공식이 예측하는 `#d9ffdb`(≈ `oklch(0.964 0.062 146)`)가 아니라 실측 `#cdfed0`(≈ `oklch(0.951 0.079 147)`)다(원시 CSS 재확인으로 확정) [src:2].

Gray 램프는 순수 중성회색이 아니라 살짝 블루/네이비 쪽으로 기운다 — 다크 배경 베이스 `gray-00`(dark)=`#181b28`(≈ `oklch(0.225 0.026 274)`)와 `background-invert`=`#080C14`(≈ `oklch(0.154 0.019 263)`)는 hue 263~274의 남색기가 돌고, 라이트 `gray-100`(`#333236` ≈ `oklch(0.320 0.007 297)`)만 hue 297로 미세하게 웜(마젠타)하다 [src:2] [src:8].

브랜드 바이올렛은 공식 문서가 `#6500C3`(PANTONE 2090 C, CMYK 80/95/0/0 — ≈ `oklch(0.439 0.240 296)`)로 명시하나 [src:5], 프로덕션 번들의 `purple-90`은 `#6500c2`(≈ `oklch(0.438 0.239 296)`)로 1-unit 차이가 난다 [src:2]. OKLCH로 환산하면 L·C가 0.001씩 어긋나는 반올림 수준의 차이로 육안 구분이 불가능하다 — 공식값을 primary로 채택하고 번들 값은 주석으로 병기한다.

텍스트 위계는 별도 회색 팔레트가 아니라 **`gray-100` 위의 opacity 램프**(100/80/60/50/30%)로 구현된다 [src:8] [src:2]. 접근성 원칙은 "배경 요소 위의 계층 명암비는 WCAG 기준을 준수해야 함"만 텍스트로 명시하고 구체 등급(AA/AAA)은 없다 [src:8].

⚠ **docs-번들 불일치 2건**은 실제 렌더(번들) 기준으로 채택하고 docs 서술은 주석으로만 병기한다: `border-secondary`는 docs가 opacity 20이라 하나 번들은 15로 렌더하고 [src:8] [src:2], 다크 `status-positive`는 docs가 `green-30`이라 서술하나 번들은 라이트·다크 양쪽에서 이름이 같은 `var(--green-70)`만 참조해 다크 실값이 캐스케이드로 `#9bf59f`(≈ `oklch(0.892 0.145 145)`)가 된다 [src:8] [src:2].

### 브랜드 및 리터럴 토큰

```yaml
codeit-violet: oklch(0.439 0.240 296) # #6500C3 공식(PANTONE 2090 C); 번들 purple-90은 #6500c2로 1-unit 차이
codeit-white: oklch(1.000 0.000 0) # #FFFFFF
codeit-black: oklch(0.320 0.007 297) # #333236 — == gray-100 라이트와 정확히 일치
text-link: oklch(0.666 0.107 203) # #20A7B1 — docs 표기 txt-link, 라이트=다크 동일, 번들 --mint-60과 동일값
background-invert: oklch(0.154 0.019 263) # #080C14 — docs 표기 bg-invert, 스케일 밖 리터럴, 라이트=다크 동일
status-negative: oklch(0.561 0.216 20) # #D6173A, 라이트=다크 동일
diff-remove-bg: oklch(0.883 0.062 21) # #FFC9C7 라이트 / 다크 #650205 = oklch(0.320 0.129 28)
diff-remove-txt: oklch(0.487 0.196 21) # #B4002B 라이트 / 다크 #FBBAC6 = oklch(0.852 0.076 7)
diff-add-bg: oklch(0.939 0.072 156) # #C5FAD7 라이트 / 다크 #065433 = oklch(0.394 0.089 158)
diff-add-txt: oklch(0.458 0.110 157) # #00693D 라이트 / 다크 #B4DAC5 = oklch(0.855 0.049 161)
```

### 프리미티브 스케일 — 라이트 테마 (00~100, 6패밀리 × 13스텝)

```yaml
light-gray-00: oklch(1.000 0.000 0) # #ffffff
light-gray-05: oklch(0.988 0.000 0) # #fbfbfb
light-gray-10: oklch(0.974 0.003 286) # #f6f6f8
light-gray-15: oklch(0.947 0.004 286) # #ededf0
light-gray-20: oklch(0.923 0.007 286) # #e5e5ea
light-gray-30: oklch(0.902 0.008 279) # #dddee4
light-gray-40: oklch(0.877 0.010 280) # #d5d6dd
light-gray-50: oklch(0.819 0.014 282) # #c2c3cd
light-gray-60: oklch(0.753 0.014 281) # #adaeb8
light-gray-70: oklch(0.630 0.016 286) # #888893
light-gray-80: oklch(0.513 0.012 286) # #66666e
light-gray-90: oklch(0.409 0.010 294) # #4a494f
light-gray-100: oklch(0.320 0.007 297) # #333236

light-purple-00: oklch(0.978 0.015 312) # #fbf5ff — 테마 불변
light-purple-05: oklch(0.958 0.028 313) # #f8ecff — 테마 불변
light-purple-10: oklch(0.886 0.075 310) # #e9ccff — 테마 불변
light-purple-15: oklch(0.793 0.127 310) # #d4a4f9 — 테마 불변
light-purple-20: oklch(0.762 0.147 309) # #cd96f8 — 테마 불변
light-purple-30: oklch(0.714 0.191 308) # #c47cfd — 테마 불변
light-purple-40: oklch(0.661 0.223 305) # #b363fd — 테마 불변
light-purple-50: oklch(0.622 0.249 302) # #a64eff — 테마 불변
light-purple-60: oklch(0.582 0.273 300) # #9933ff — 테마 불변
light-purple-70: oklch(0.548 0.294 299) # #8f00ff — 테마 불변
light-purple-80: oklch(0.490 0.261 296) # #760dde — 테마 불변
light-purple-90: oklch(0.438 0.239 296) # #6500c2 — 테마 불변; codeit-violet 공식값(#6500C3)과 1-unit 차이
light-purple-100: oklch(0.380 0.206 298) # #54009e — 테마 불변

light-blue-00: oklch(0.962 0.018 258) # #ebf3ff
light-blue-05: oklch(0.944 0.027 253) # #e0eeff
light-blue-10: oklch(0.914 0.042 254) # #d0e5ff
light-blue-15: oklch(0.885 0.058 250) # #bdddff
light-blue-20: oklch(0.846 0.079 250) # #a6d1ff
light-blue-30: oklch(0.796 0.108 249) # #85c2ff
light-blue-40: oklch(0.711 0.155 251) # #4da6fe
light-blue-50: oklch(0.651 0.191 253) # #1790ff
light-blue-60: oklch(0.583 0.211 258) # #0674f4
light-blue-70: oklch(0.499 0.211 261) # #0056d8
light-blue-80: oklch(0.453 0.190 261) # #004bbd
light-blue-90: oklch(0.382 0.176 262) # #00369e
light-blue-100: oklch(0.332 0.132 260) # #003078

light-pink-00: oklch(0.959 0.027 341) # #ffebf7
light-pink-05: oklch(0.938 0.042 341) # #ffe0f3
light-pink-10: oklch(0.906 0.064 342) # #ffd0ec
light-pink-15: oklch(0.870 0.090 343) # #ffbde4
light-pink-20: oklch(0.828 0.123 344) # #ffa6db
light-pink-30: oklch(0.774 0.169 345) # #ff85ce
light-pink-40: oklch(0.705 0.229 349) # #ff52b7
light-pink-50: oklch(0.664 0.265 352) # #ff1ca5
light-pink-60: oklch(0.614 0.253 355) # #eb008d
light-pink-70: oklch(0.554 0.226 357) # #ce0075
light-pink-80: oklch(0.492 0.199 357) # #af0462
light-pink-90: oklch(0.432 0.177 354) # #920156
light-pink-100: oklch(0.365 0.153 349) # #72004b

light-yellow-00: oklch(0.978 0.025 87) # #fff7e5
light-yellow-05: oklch(0.956 0.082 98) # #fff2b2
light-yellow-10: oklch(0.928 0.135 98) # #ffe878
light-yellow-15: oklch(0.908 0.155 96) # #ffe057
light-yellow-20: oklch(0.884 0.171 93) # #ffd52e
light-yellow-30: oklch(0.863 0.176 90) # #ffcb02
light-yellow-40: oklch(0.842 0.172 85) # #ffc002
light-yellow-50: oklch(0.816 0.170 77) # #ffb200
light-yellow-60: oklch(0.786 0.171 68) # #ffa10a
light-yellow-70: oklch(0.759 0.177 61) # #ff9100
light-yellow-80: oklch(0.705 0.175 55) # #f07c00
light-yellow-90: oklch(0.626 0.170 48) # #d66000
light-yellow-100: oklch(0.513 0.138 49) # #a34900

light-green-00: oklch(0.980 0.034 145) # #ebffeb
light-green-05: oklch(0.964 0.062 146) # #d9ffdb
light-green-10: oklch(0.925 0.125 145) # #b0fdb3
light-green-15: oklch(0.892 0.145 145) # #9bf59f
light-green-20: oklch(0.867 0.176 145) # #80f188
light-green-30: oklch(0.842 0.198 145) # #68ec75
light-green-40: oklch(0.791 0.190 146) # #59da6b
light-green-50: oklch(0.743 0.209 145) # #3ccc4b
light-green-60: oklch(0.696 0.222 145) # #00be2f
light-green-70: oklch(0.648 0.202 145) # #07ac30
light-green-80: oklch(0.571 0.178 145) # #039127
light-green-90: oklch(0.483 0.149 145) # #03731f
light-green-100: oklch(0.404 0.123 146) # #025918
```

### 프리미티브 스케일 — 다크 테마

gray는 라이트에서 단순 반전되지 않는 완전히 독립된 램프이므로 전 스텝을 별도로 기록한다. purple은 라이트와 13스텝 전부 동일값이라 아래에도 참고용으로 실었다(값 중복, 사실은 하나). blue/pink/yellow/green은 `dark-X ≈ light-(100-X)` 반전 공식을 따르므로 위 라이트 표에서 대칭 스텝을 역으로 읽으면 되지만, 반전이 근사이지 항등이 아니므로 실측값을 전량 병기한다. `dark-green-90`은 반전 공식의 유일한 예외다 [src:2].

```yaml
dark-gray-00: oklch(0.225 0.026 274) # #181b28
dark-gray-05: oklch(0.250 0.023 274) # #1e212d
dark-gray-10: oklch(0.276 0.026 275) # #242735
dark-gray-15: oklch(0.292 0.028 273) # #272b3a
dark-gray-20: oklch(0.321 0.031 274) # #2e3243
dark-gray-30: oklch(0.367 0.032 273) # #393e50
dark-gray-40: oklch(0.415 0.034 272) # #454b5f
dark-gray-50: oklch(0.526 0.031 271) # #646a7d
dark-gray-60: oklch(0.695 0.024 277) # #999cac
dark-gray-70: oklch(0.800 0.017 278) # #bbbdc9
dark-gray-80: oklch(0.872 0.012 281) # #d3d4dd
dark-gray-90: oklch(0.950 0.004 286) # #eeeef1
dark-gray-100: oklch(0.976 0.001 286) # #f7f7f8

dark-purple-00: oklch(0.978 0.015 312) # #fbf5ff (라이트와 동일 — 불변)
dark-purple-05: oklch(0.958 0.028 313) # #f8ecff (불변)
dark-purple-10: oklch(0.886 0.075 310) # #e9ccff (불변)
dark-purple-15: oklch(0.793 0.127 310) # #d4a4f9 (불변)
dark-purple-20: oklch(0.762 0.147 309) # #cd96f8 (불변)
dark-purple-30: oklch(0.714 0.191 308) # #c47cfd (불변)
dark-purple-40: oklch(0.661 0.223 305) # #b363fd (불변)
dark-purple-50: oklch(0.622 0.249 302) # #a64eff (불변)
dark-purple-60: oklch(0.582 0.273 300) # #9933ff (불변)
dark-purple-70: oklch(0.548 0.294 299) # #8f00ff (불변)
dark-purple-80: oklch(0.490 0.261 296) # #760dde (불변)
dark-purple-90: oklch(0.438 0.239 296) # #6500c2 (불변)
dark-purple-100: oklch(0.380 0.206 298) # #54009e (불변)

dark-blue-00: oklch(0.332 0.132 260) # #003078
dark-blue-05: oklch(0.382 0.176 262) # #00369e
dark-blue-10: oklch(0.453 0.190 261) # #004bbd
dark-blue-15: oklch(0.499 0.211 261) # #0056d8
dark-blue-20: oklch(0.583 0.211 258) # #0674f4
dark-blue-30: oklch(0.650 0.187 252) # #1a90fc
dark-blue-40: oklch(0.711 0.155 251) # #4da6fe
dark-blue-50: oklch(0.796 0.108 249) # #85c2ff
dark-blue-60: oklch(0.846 0.079 250) # #a6d1ff
dark-blue-70: oklch(0.885 0.058 250) # #bdddff
dark-blue-80: oklch(0.914 0.042 254) # #d0e5ff
dark-blue-90: oklch(0.944 0.027 253) # #e0eeff
dark-blue-100: oklch(0.962 0.018 258) # #ebf3ff

dark-pink-00: oklch(0.365 0.153 349) # #72004b
dark-pink-05: oklch(0.432 0.177 354) # #920156
dark-pink-10: oklch(0.492 0.199 357) # #af0462
dark-pink-15: oklch(0.554 0.226 357) # #ce0075
dark-pink-20: oklch(0.614 0.253 355) # #eb008d
dark-pink-30: oklch(0.664 0.265 352) # #ff1ca5
dark-pink-40: oklch(0.705 0.229 349) # #ff52b7
dark-pink-50: oklch(0.774 0.169 345) # #ff85ce
dark-pink-60: oklch(0.828 0.123 344) # #ffa6db
dark-pink-70: oklch(0.870 0.090 343) # #ffbde4
dark-pink-80: oklch(0.906 0.064 342) # #ffd0ec
dark-pink-90: oklch(0.938 0.042 341) # #ffe0f3
dark-pink-100: oklch(0.959 0.027 341) # #ffebf7

dark-yellow-00: oklch(0.513 0.138 49) # #a34900
dark-yellow-05: oklch(0.626 0.170 48) # #d66000
dark-yellow-10: oklch(0.705 0.175 55) # #f07c00
dark-yellow-15: oklch(0.759 0.177 61) # #ff9100
dark-yellow-20: oklch(0.786 0.171 68) # #ffa10a
dark-yellow-30: oklch(0.816 0.170 77) # #ffb200
dark-yellow-40: oklch(0.842 0.172 85) # #ffc002
dark-yellow-50: oklch(0.863 0.176 90) # #ffcb02
dark-yellow-60: oklch(0.884 0.171 93) # #ffd52e
dark-yellow-70: oklch(0.908 0.155 96) # #ffe057
dark-yellow-80: oklch(0.928 0.135 98) # #ffe878
dark-yellow-90: oklch(0.956 0.082 98) # #fff2b2
dark-yellow-100: oklch(0.978 0.025 87) # #fff7e5

dark-green-00: oklch(0.404 0.123 146) # #025918
dark-green-05: oklch(0.483 0.149 145) # #03731f
dark-green-10: oklch(0.571 0.178 145) # #039127
dark-green-15: oklch(0.648 0.202 145) # #07ac30
dark-green-20: oklch(0.696 0.222 145) # #00be2f
dark-green-30: oklch(0.743 0.209 145) # #3ccc4b
dark-green-40: oklch(0.791 0.190 146) # #59da6b
dark-green-50: oklch(0.842 0.198 145) # #68ec75
dark-green-60: oklch(0.867 0.176 145) # #80f188
dark-green-70: oklch(0.892 0.145 145) # #9bf59f
dark-green-80: oklch(0.925 0.125 145) # #b0fdb3
dark-green-90: oklch(0.951 0.079 147) # #cdfed0 — ⚠ 반전 공식의 유일한 예외(공식대로면 #d9ffdb 예상, 원시 CSS 재확인으로 실측값 확정)
dark-green-100: oklch(0.980 0.034 145) # #ebffeb
```

### 시맨틱 토큰 (docs 기준, 확보 22종)

docs는 시맨틱 25종이라 서술하나 표로 확보된 것은 22종(Text 8 + Diff 4 + Background 5 + Border 3 + Status 2)이며, 나머지 3종은 크롤 캐시에 없다 [src:8].

**Text (8)** — 근거·용도는 [src:8], 실색 대입은 [src:2]. `{colors.light-gray-100}` / `{colors.dark-gray-100}` 위의 opacity 램프다.

| Token | 근거 | Light | Dark |
|---|---|---|---|
| `txt-primary` | gray-100 @ 100% | `oklch(0.320 0.007 297)` | `oklch(0.976 0.001 286)` |
| `txt-secondary` | gray-100 @ 80% | `oklch(0.320 0.007 297 / 80%)` | `oklch(0.976 0.001 286 / 80%)` |
| `txt-tertiary` | gray-100 @ 60% | `oklch(0.320 0.007 297 / 60%)` | `oklch(0.976 0.001 286 / 60%)` |
| `txt-caption` | gray-100 @ 50% | `oklch(0.320 0.007 297 / 50%)` | `oklch(0.976 0.001 286 / 50%)` |
| `txt-disabled` | gray-100 @ 30% | `oklch(0.320 0.007 297 / 30%)` | `oklch(0.976 0.001 286 / 30%)` |
| `txt-link` | 리터럴 | `oklch(0.666 0.107 203)` | `oklch(0.666 0.107 203)`(동일) |
| `txt-purple-primary` | purple-80(L) / purple-20(D) | `oklch(0.490 0.261 296)` | `oklch(0.762 0.147 309)` |
| `txt-purple-secondary` | purple-60(L) / purple-30(D) | `oklch(0.582 0.273 300)` | `oklch(0.714 0.191 308)` |

**Diff (4)** — 코드 비교 UI 전용. 시맨틱 25종 중 docs 텍스트와 번들 실측이 라이트·다크 4쌍 전부 일치하는 대조군이며, docs 정확도를 가늠하는 기준점이 된다 [src:8] [src:2].

| 토큰 | 라이트 | 라이트 OKLCH | 다크 | 다크 OKLCH |
|---|---|---|---|---|
| `diff-remove-bg` | `#FFC9C7` | `oklch(0.883 0.062 21)` | `#650205` | `oklch(0.320 0.129 28)` |
| `diff-remove-txt` | `#B4002B` | `oklch(0.487 0.196 21)` | `#FBBAC6` | `oklch(0.852 0.076 7)` |
| `diff-add-bg` | `#C5FAD7` | `oklch(0.939 0.072 156)` | `#065433` | `oklch(0.394 0.089 158)` |
| `diff-add-txt` | `#00693D` | `oklch(0.458 0.110 157)` | `#B4DAC5` | `oklch(0.855 0.049 161)` |

배경/텍스트 쌍은 라이트에서 밝은 배경 + 어두운 텍스트, 다크에서 어두운 배경 + 밝은 텍스트로 명암이 뒤집힌다 — 4쌍 모두 테마별로 독립 선언된 값이지 램프 반전의 산물이 아니다 [src:2].

**Background (5)** [src:8] [src:2]

| Token | 근거 | Light | Dark |
|---|---|---|---|
| `bg-primary` | gray-00 | `oklch(1.000 0.000 0)` | `oklch(0.225 0.026 274)` |
| `bg-secondary` | gray-05 | `oklch(0.988 0.000 0)` | `oklch(0.250 0.023 274)` |
| `bg-tertiary` | gray-10 | `oklch(0.974 0.003 286)` | `oklch(0.276 0.026 275)` |
| `bg-invert` | 리터럴(스케일 밖) | `oklch(0.154 0.019 263)` | `oklch(0.154 0.019 263)`(동일) |
| `bg-purple-primary` | purple-05 | `oklch(0.958 0.028 313)` | `oklch(0.958 0.028 313)`(purple 불변) |

**Border (3 docs)** [src:8] [src:2]

| Token | 근거 | Light | Dark | 비고 |
|---|---|---|---|---|
| `border-primary` | gray-100 | `oklch(0.320 0.007 297)` | `oklch(0.976 0.001 286)` | docs=번들 일치 |
| `border-secondary` | gray-100 @ 15% | `oklch(0.320 0.007 297 / 15%)` | `oklch(0.976 0.001 286 / 15%)` | ⚠ docs는 20%, 번들 실배선 15% — 번들 채택 |
| `border-tertiary` | gray-100 @ 10% | `oklch(0.320 0.007 297 / 10%)` | `oklch(0.976 0.001 286 / 10%)` | 일치 |

번들에만 존재하는 확장 Border 시맨틱(docs 미기재, 참고용) [src:2]: `border-primary-invert`(gray-00 참조), `border-secondary-invert`/`border-tertiary-invert`(gray-00 opacity 20%/10%), `border-purple-primary`(light purple-60 / dark purple-opacity-90), `border-purple-secondary`(light purple-30 / dark purple-opacity-70), `border-purple-tertiary`(light purple-10 / dark purple-opacity-50).

**Status (2)** [src:8] [src:2]

| Token | 근거 | Light | Dark | 비고 |
|---|---|---|---|---|
| `status-positive` | green-70 | `oklch(0.648 0.202 145)` | `oklch(0.892 0.145 145)` | ⚠ docs는 다크를 green-30이라 서술하나 번들은 양 테마 `var(--green-70)`만 참조 — 다크 실제 렌더값 채택 |
| `status-negative` | 리터럴 | `oklch(0.561 0.216 20)` | `oklch(0.561 0.216 20)`(동일) | 일치 |

기타: New 아이콘 권장색 `pink-60`(라이트 `#eb008d` ≈ `oklch(0.614 0.253 355)` / 다크 `#ffa6db` ≈ `oklch(0.828 0.123 344)`, hex는 docs 미공개·번들 실측)[src:13] [src:2]. Label의 Color 6종(purple/green/pink/yellow/gray/blue)은 토큰명만 있고 어느 스텝인지는 소스에 없다 [src:21] [src:2].

## Typography

**서체 2종만 사용한다** [src:9]: **Spoqa Han Sans Neo**(국문·영문·숫자, 제목~본문 전 구간)와 **Menlo**(코드 텍스트, 고정폭). 토큰명은 docs 기준 `glyph{N}`(N = px 절대 크기) 형식이며, 아래 표에서는 weight를 구분하기 위해 `glyph-{N}-{weight}`로 정규화해 기록한다 [src:9]. Weight는 Regular(400)/Medium(500)/Bold(600) 3단계다 [src:9]. 코드잇은 별도 디스플레이 서체를 두지 않는다 — Spoqa Han Sans Neo 하나가 glyph82부터 glyph11까지 전 구간을 담당한다 [src:9].

```yaml
font-body: 'Spoqa Han Sans Neo', Pretendard Variable, sans-serif
font-display: 'Spoqa Han Sans Neo', Pretendard Variable, sans-serif # 별도 디스플레이 서체 없음 — body와 동일 페이스
font-display-src: https://cdn.jsdelivr.net/npm/spoqa-han-sans@3.3.0/css/SpoqaHanSansNeo.css
font-code: Menlo, ui-monospace, SFMono-Regular, Consolas, monospace # Menlo는 macOS 시스템 폰트 — 로드 가능한 웹폰트 URL 없음

glyph-82-bold: { size: 82px, weight: 600, line-height: 100px } # letter-spacing -3px; 공개 웹폰트에 600 페이스 없음(아래 프로즈 참고)
glyph-68-bold: { size: 68px, weight: 600, line-height: 84px } # letter-spacing -1.5px
glyph-54-bold: { size: 54px, weight: 600, line-height: 70px } # letter-spacing -1.5px
glyph-48-bold: { size: 48px, weight: 600, line-height: 62px } # letter-spacing -1px
glyph-38-bold: { size: 38px, weight: 600, line-height: 50px } # letter-spacing -0.3px
glyph-32-bold: { size: 32px, weight: 600, line-height: 44px } # letter-spacing -0.3px
glyph-28-bold: { size: 28px, weight: 600, line-height: 40px }
glyph-28-medium: { size: 28px, weight: 500, line-height: 40px }
glyph-24-bold: { size: 24px, weight: 600, line-height: 36px }
glyph-24-medium: { size: 24px, weight: 500, line-height: 36px }
glyph-20-bold: { size: 20px, weight: 600, line-height: 32px }
glyph-20-medium: { size: 20px, weight: 500, line-height: 32px }
glyph-20-regular: { size: 20px, weight: 400, line-height: 32px }
glyph-18-bold: { size: 18px, weight: 600, line-height: 30px }
glyph-18-medium: { size: 18px, weight: 500, line-height: 30px }
glyph-18-regular: { size: 18px, weight: 400, line-height: 30px }
# glyph-17 ~ glyph-12: 원문 표에 값이 없다(생략 처리) — 보간 금지, ## Known Gaps 참고
glyph-11-bold: { size: 11px, weight: 600, line-height: 18px }
glyph-11-medium: { size: 11px, weight: 500, line-height: 18px }
glyph-11-regular: { size: 11px, weight: 400, line-height: 18px }
```

용도 구간 [src:9]: `glyph-48` 이상 = 메인 타이틀·페이지 헤더 / `glyph-38`~`glyph-24` = 서브타이틀·주요 본문·카드 타이틀 / `glyph-20`~`glyph-14`(일부 갭 포함) = 일반 본문·버튼 레이블·메뉴 텍스트 / `glyph-13` 이하 = 캡션·보조 정보·모바일 전용 세부 텍스트. **Don't**: `glyph-12` 이하는 PC에서 사용 금지(가독성 저하) [src:9].

관찰: 본문 구간 line-height는 대략 1.6배로 일정(20/32, 18/30, 11/18)하고, 디스플레이 구간으로 갈수록 조여진다(82/100 ≈ 1.22). Letter-spacing은 본문 전 구간 `-0.3px`로 고정되고 `glyph-48` 이상에서만 `-1px`~`-3px`로 커진다 [src:9]. 텍스트 컬러는 "웹 표준 체크 과정을 거쳐 가독성을 해치지 않는 범위 내의 컬러"를 사용해야 하나 구체 hex·대비 등급은 명시돼 있지 않다 [src:9].

⚠ **docs↔웹폰트 weight 불일치**: docs는 Bold를 600으로 정의하나 [src:9], 공개 웹폰트(핀 고정본 [src:40], 공식 비고정본 [src:39] 둘 다)에는 600 페이스가 없다(100/300/400/500/700만 제공). `font-weight: 600` 지정 시 브라우저가 반올림/합성한다 — docs 정의(600)를 위 표에 그대로 채택하고 웹폰트 갭은 이 문단으로 병기한다. **소비자 구현 시 주의**: 600 페이스가 실재하지 않으므로, 이 카탈로그의 프리뷰 HTML은 실제로 렌더 가능한 **700**(웹폰트가 제공하는 최근접 Bold)을 사용한다. `font-weight: 600`을 그대로 쓰면 브라우저별 합성 결과(700 또는 500로 스냅)가 달라질 수 있으니, Bold 표현은 700로 고정하는 편이 프리뷰와 일치한다. 웹폰트 로드 URL은 핀 고정본(`spoqa-han-sans@3.3.0`, [src:40])을 우선하며, 공식 경로([src:39])는 `@latest`라 재현성이 낮다.

## Spacing

**Primitive 18단계**(`spacing-2` ~ `spacing-240`). `spacing-6` 이하는 전 해상도 불변이고, `spacing-8`부터 Mobile에서 축소된다 [src:12].

```yaml
spacing-2: 2px
spacing-4: 4px
spacing-6: 6px
spacing-8: 8px # Mobile 6px
spacing-10: 10px # Mobile 8px
spacing-12: 12px # Mobile 10px
spacing-16: 16px # Mobile 12px
spacing-20: 20px # Mobile 16px
spacing-24: 24px # Mobile 20px
spacing-32: 32px # Mobile 24px
spacing-40: 40px # Mobile 32px
spacing-48: 48px # Mobile 40px
spacing-64: 64px # Mobile 52px — 축소 비율이 유일하게 어긋나는 값
spacing-80: 80px # Mobile 64px
spacing-120: 120px # Mobile 80px
spacing-160: 160px # Mobile 120px
spacing-200: 200px # Mobile 160px
spacing-240: 240px # Mobile 200px
content-gap-XS: 8px
content-gap-S: 12px
content-gap-M: 16px
content-gap-L: 24px
content-gap-XL: 32px
section-padding-40: 40px # Mobile 24px
section-padding-80: 80px # Mobile 64px
section-padding-120: 120px # Mobile 64px
section-padding-160: 160px # Mobile 80px
section-padding-200: 200px # Mobile 120px
section-padding-240: 240px # Mobile 120px
```

**Content Gap**(5종)은 "박스 및 컨텐츠 간 간격"에 쓰인다. **Section Gap**(6종)은 "섹션 간 여백, 페이지·화면 내 섹션 위·아래 여백"에 쓰이며 반응형 유연성을 위해 토큰이 px 값을 직접 갖는다(위 표의 Mobile 열) [src:12].

리듬 관찰: 2·4·6의 미세 구간 → 8~48의 4px/8px 배수 구간 → 64·80·120·160·200·240의 대형 섹션 구간, 3층 구조다. 4의 배수가 기본이되 `spacing-6`·`spacing-10` 같은 비배수가 섞이고, 모바일 `spacing-64`(52px)만 축소 비율이 스케일의 규칙에서 벗어난다 [src:12].

## Rounded

**Primitive 12단계**. PC·Tablet은 동일 px이고 **Mobile만 축소**되며, `radius-999`만 불변이다 [src:10].

```yaml
radius-2: 2px # Mobile 1px
radius-4: 4px # Mobile 2px
radius-6: 6px # Mobile 4px
radius-8: 8px # Mobile 6px
radius-10: 10px # Mobile 8px
radius-12: 12px # Mobile 10px
radius-16: 16px # Mobile 12px
radius-20: 20px # Mobile 16px
radius-24: 24px # Mobile 20px
radius-28: 28px # Mobile 24px
radius-32: 32px # Mobile 28px
radius-999: 999px # Mobile 999px — 불변(원형)
corner-radius-XL: 28px
corner-radius-L: 20px
corner-radius-M: 16px # 가장 자주 사용되는 값
corner-radius-S: 12px
corner-radius-XS: 8px
corner-radius-circle: 999px
```

개념: "값 자체에 의미를 부여하지 않고 오직 크기(둥근 정도)만 정의; 값이 클수록 원에 가까워진다" [src:10]. Semantic 6종의 가이드라인 [src:10]: `corner-radius-XL`(radius-28) = 컨테이너의 90% 이상을 차지하는 박스·대형 배경 요소, `corner-radius-L`(radius-20) = 400×350px 이상이면서 컨테이너의 35% 이상을 차지하는 큰 박스 또는 벤또(bento) 레이아웃, **`corner-radius-M`(radius-16)** = **가장 자주 사용되는 값**(width/height 400px 이하), `corner-radius-S`(radius-12) = width가 height의 3–4배 이상 긴 배너·info류, `corner-radius-XS`(radius-8) = 가장 작은 값(label, tag, button 등), `corner-radius-circle`(radius-999) = 원형(박스 높이/너비 50% 기준).

**중첩 규칙**: "박스가 여러 개 겹치는 레이아웃에서는 안쪽 박스에 바깥 박스보다 한 단계 작은 토큰을 적용" [src:10]. 아이콘 내부 코너는 별도 체계로 0–2px + corner smoothing을 쓰며, 사이즈별 정확한 매핑은 소스에 없다 [src:13].

## Elevation & Depth

코드잇 디자인 시스템은 **엘리베이션/그림자 토큰을 공개하지 않는다**. Foundations 6종(Color·Typography·Radius·Layout·Spacing·Iconography) 목록 자체에 depth 관련 카테고리가 없다 [src:7]. Modal 데모 캡처에서 아주 옅은 드롭섀도가 시각적으로 관찰되나, 이는 데모 스크린샷 관찰일 뿐이며 시스템 전체에서 shadow 토큰·규칙 서술이 0건이므로 [src:22] 수치화된 값으로 승격하지 않는다. 깊이 표현이 필요한 다운스트림 작업은 이 갭을 자체 판단으로 채워야 한다.

## Shapes

코드잇의 형태 언어는 **지오메트릭-라운드** 계열로 수렴한다. 워드마크 `codeit;`은 라운드 지오메트릭 산세리프 레터폼에 바이올렛 단색이며, 심볼은 `C`와 세미콜론을 결합해 90도 회전한 스마일 페이스를 이룬다 — 문서가 정의하는 "기쁨과 즐거움" 상징이 형태로 직접 확인된다 [src:6]. 아이콘은 라인 스타일을 기본으로 하며 round cap/join과 corner smoothing을 권장한다 [src:13]. 컨테이너 기본 라운드는 `{rounded.corner-radius-M}`(16px)로 "가장 자주 사용되는 값"이라 명시된다 [src:10] — 전반적으로 각이 거의 없는 부드러운 인상이다.

레이아웃은 여백이 넉넉하고 밀도가 낮다: 섹션 여백 토큰이 `{spacing.section-padding-240}`(240px)까지 올라가며 [src:12], 데모 캔버스에서 컴포넌트가 대량의 여백에 둘러싸여 단독 배치되는 인상을 준다(데모 스크린샷 관찰). 색은 차갑고 밝은(high-key) 무채색 베이스에 단일 바이올렛 액센트로 수렴해 [src:2] [src:5] 형태의 단순함과 색의 절제가 같은 방향을 가리킨다.

## Components

Components 계층 정의: "일관된 디자인 원칙에 따라 설계된 재사용 가능한 UI 요소입니다. 반응형 환경에 최적화되어 다양한 디바이스에서도 동일한 사용자 경험을 제공합니다." [src:14] **전 컴포넌트가 Anatomy(ESSENTIAL/OPTIONAL) → State(Properties 변형표) → Spec(수치 규칙) → Usage(Do/Don't) 4단 템플릿**으로 통일돼 있다 — 이 4단 구조 자체가 코드잇 시스템의 서명이다 [src:15] [src:22] [src:24]. 인벤토리는 17종: Accordion, Bottom Sheet, Buttons, Checkbox, Dropdown, Label, Modal, Pagination, Radio Button, Select, Snackbar, Table, Tabs, Text Field, Textarea, Toast, Tooltip [src:14].

**이 브랜드에 특징적인 패턴**: `diff-add-*`/`diff-remove-*` 4쌍이 확보된 시맨틱 컬러 22종 중 4개를 차지하는 코드 비교 UI 파운데이션(프로그래밍 교육이라는 정체성의 직접 반영) [src:8]; Toast의 "라이트 박스"(리워드 지급·수치 변화 등 게이미피케이션 피드백 전용 슬롯) [src:31]; Tabs의 "Count"(수강한 강의 수·획득 배지 개수 등 정량 정보) [src:28]; Table의 Item/Header Item 조합 모델(단일 컴포넌트가 아니라 여러 종류의 Table Item을 조합하는 컨테이너) [src:27].

Buttons는 시스템에서 가장 주요한 UI 컴포넌트로 5개 서브타입(Primary/Secondary/Tertiary/Text/Icon)으로 나뉜다. 여러 버튼이 함께 쓰일 때는 방향키 또는 Tab 키로 포커스 이동을 지원해야 한다 [src:17]. (`/components/buttons`와 `/components/buttons/detail`은 본문이 100% 동일해 하나의 근거로 취급한다 [src:17] [src:18].)

### button-primary

ESSENTIAL 레이블 + OPTIONAL 아이콘. Size L/M/S(최소 padding 24/16/12px), State default/hover/disabled, Icon-left/Icon-right [src:17]. **Do**: 여러 버튼 중 가장 우측에 배치. **Don't**: Primary 버튼을 여러 개 나열하지 말 것 [src:17]. 데모 렌더의 fill은 공식 `{colors.codeit-violet}`보다 밝아 육안상 `{colors.light-purple-60}` ≈ `oklch(0.582 0.273 300)` 계열에 가깝다 — 캡처 관찰 추정이며 공식 토큰이 아니다. 버튼 fill을 지정하는 색상 토큰은 docs·번들 어디에도 문서화돼 있지 않다.

```tsx
<ButtonPrimary size="L" icon="right" state="default">
  저장하기
</ButtonPrimary>
```

### button-secondary

ESSENTIAL 레이블 + OPTIONAL 아이콘, Primary와 동일한 Size/State/Icon 축 [src:17]. **Do**: 설정 화면처럼 복수 버튼을 나열해야 하는 UI에 사용. **Don't**: 가장 강조할 버튼에는 사용하지 말 것 [src:17].

```tsx
<ButtonSecondary size="M">취소하기</ButtonSecondary>
```

### button-tertiary

Primary/Secondary Properties에 `Color gray/purple`가 추가된다 [src:17]. **Do**: Primary와 함께 써야 하는 주요 행동에는 Tertiary(purple)를 사용. **Don't**: Full width 사용 불가 [src:17].

```tsx
<ButtonTertiary color="purple" size="M">더 알아보기</ButtonTertiary>
```

### button-text

`Color gray/purple` Properties. Chevron 외 아이콘은 좌측 배치를 권장한다. **Do**: "네 글자를 권장, 상황에 따라 '~하기'로 Writing 규칙 준수" — 시스템 전체에서 유일하게 명시된 문안 규칙이다 [src:17]. Usage에 Don't는 없다 [src:17].

```tsx
<ButtonText color="purple">더보기</ButtonText>
```

### button-icon

아이콘만으로 구성되며(다른 4개 버튼 서브타입과 달리 레이블이 필수가 아닌 유일한 예외), Size L/M/S, State, `Color default/invert`를 갖는다 [src:17]. **Do**: 다운로드·복사·삭제·초기화·북마크 등 **유니버설 의미 아이콘만** 사용. Usage에 Don't는 없다 [src:17].

```tsx
<ButtonIcon icon="bookmark" size="M" color="default" />
```

### accordion

Row gap 16px(= `{spacing.content-gap-M}` 값과 동일하나 토큰 배선은 미문서화), 텍스트 영역 max-width 700px, Width=Fill. 펼친 상태 타이틀은 `{colors.txt-purple-primary}`를 쓴다. Properties: Focused, Size L/S [src:15]. **Do**: FAQ류는 멀티 확장 권장. **Don't**: 확장·축소 의미를 벗어난 아이콘 금지 [src:15].

```tsx
<Accordion size="L">
  <AccordionItem title="환불 정책이 궁금해요" focused={false} />
</Accordion>
```

### bottom-sheet

Anatomy: 백드롭·바디(ESSENTIAL) + 헤더·푸터(OPTIONAL). 백드롭 터치 시 닫힌다. Properties: Title/Close/Footer [src:16]. 모바일 width는 뷰포트 100%이며 "주로 모바일 환경 적합, PC에서는 사용 비권장"이다. Select 컴포넌트는 모바일에서 Dropdown 대신 이 컴포넌트로 교체된다 [src:16]. **Don't**: 다중 선택 상황에서 [적용하기] 버튼을 제거하지 말 것 [src:16].

```tsx
<BottomSheet title footer>
  <BottomSheetBody>...</BottomSheetBody>
</BottomSheet>
```

### checkbox

**Clickable Area = 레이블을 포함한 행 전체**. 리스트 항목 간격 최소 12px. Properties: Selected/Label/Description/State(default·hover·disabled)/Size L·S [src:19]. **Don't**: 하나만 선택 가능한 경우 Radio Button을 권장 [src:19].

```tsx
<Checkbox size="L" selected={false} label="이용약관에 동의합니다" />
```

### dropdown

max-height 182px. Anatomy: 레이블(ESSENTIAL) + 디스크립션·체크박스·검색창(OPTIONAL). Properties: Checkbox/Description/Search Input/State(default·hover·selected)/Align(left·center) [src:20]. **Do**: 옵션 5개 이상이면 스크롤, 선택지가 많으면 검색 활성화. **Don't**: 긴 레이블 2줄 금지 [src:20]. 텍스트 오버플로우 전략은 뷰포트별로 갈린다 — PC는 말줄임+툴팁, 모바일은 루프(loop) [src:20].

```tsx
<Dropdown align="left" searchable maxHeight={182} />
```

### label

Pill 형태 칩. Properties: Invert / Shape(docs 표기 `rectangle`·`round`, 데모 컨트롤은 `rounded`·`rectangle`로 약간 다르게 표기 — docs를 정본으로 채택) / Color `purple·green·pink·yellow·gray·blue` / Size L·M·S·XS. 나열 간격 4–6px [src:21]. **Don't**: 의미가 다른 상태에 동일 컬러를 쓰지 말 것 [src:21].

```tsx
<Label shape="round" color="purple" size="M">진행 중</Label>
```

### modal

최대 높이 = 뷰포트 80%. 바디 스크롤 시 헤더에 border-bottom이 붙는다. Properties: Header icon/Close icon/Body/**Breakpoint PC·MO**(브레이크포인트를 변형 축으로 갖는 유일한 컴포넌트) [src:22]. OPTIONAL Anatomy로 "다시 보지 않기"(재노출 여부 저장) 토글이 있다 [src:22]. **Don't**: close 아이콘과 [취소하기] 버튼을 동시에 쓰지 말 것 — 인풋이 있는 모달은 [취소하기] 대신 Close 아이콘 + **ESC로 닫기 필수** [src:22]. 데모에서 관찰된 실제 카피는 "변경사항을 저장할까요?" / "저장하지 않으면 작성한 내용이 모두 삭제됩니다." / [취소하기]·[저장하기]다(데모 스크린샷 관찰).

```tsx
<Modal breakpoint="PC" onClose={handleClose}>
  <ModalHeader onCloseIcon={handleClose} />
  <ModalBody>변경사항을 저장할까요?</ModalBody>
  <ModalFooter>
    <ButtonSecondary>취소하기</ButtonSecondary>
    <ButtonPrimary>저장하기</ButtonPrimary>
  </ModalFooter>
</Modal>
```

### pagination

**부분 문서화** — Anatomy 4요소(첫 페이지 버튼·페이지 버튼·페이지 이동·마지막 페이지 버튼)만 확보되고 Properties/Spec/Usage는 크롤 캐시에 없다 [src:23].

```tsx
<Pagination currentPage={1} totalPages={10} />
```

### radio-button

Clickable Area = 행 전체. 리스트 항목 간격 최소 12px. Properties: Selected/Label/Description/Size L·S/State [src:24]. **Do**: 필수 선택 항목이면 기본 선택값 제공. **Don't**: 옵션 5개 이상이면 드롭다운을 권장 [src:24].

```tsx
<RadioButton size="L" selected label="카드결제" />
```

### select

**부분 문서화** — Anatomy 2요소(선택 영역 / 인디케이터 아이콘, 하단 방향 화살표 ▼)만 확보 [src:25]. 모바일에서는 이 컴포넌트가 Dropdown 대신 Bottom Sheet로 교체된다는 반응형 규칙이 문서화돼 있다 [src:16].

```tsx
<Select indicatorIcon="chevron-down" />
```

### snackbar

**부분 문서화** — Anatomy 5요소(아이콘 / 레이블(Bold 스타일) / 디스크립션(본문 폰트 크기, 한 문단 이내) / 닫기 버튼(우측 상단) / 버튼은 Primary Button 사용) [src:26]. Properties/Spec/Usage는 없다. 버튼 예시 카피: "의견 남기기", "참여하기", "확인하기" [src:26].

```tsx
<Snackbar icon="info" label="새로운 업데이트가 있어요">
  <ButtonPrimary size="S">참여하기</ButtonPrimary>
</Snackbar>
```

### table

단일 컴포넌트가 아니라 "여러 종류의 Table Item을 조합해 정보를 구조적으로 표현"하는 컨테이너다 [src:27]. Properties: Select(토글)/State(default·hover) [src:27]. **Do**: 데이터가 없으면 Empty Section 패턴 사용. **Don't**: 모바일 환경에서는 컨테이너에 Fill을 적용하지 말고 가로 스크롤 가능한 형태로 사용 [src:27].

```tsx
<Table>
  <TableHeaderItem>이름</TableHeaderItem>
  <TableItem selectable />
</Table>
```

### tabs

Properties 8축: State(default·hover) / Color(gray·purple) / Size(L·M·S) / Selected / **Count** / Icon-left / Icon-right / Underline. 조합 간격 0px(패딩이 각 Tab Item 내부에 포함) [src:28]. 항상 정확히 하나의 탭이 selected 상태로 렌더링된다. **Don't**: 레이블 2줄 금지 [src:28].

```tsx
<Tabs color="purple" size="M">
  <TabItem selected count={12}>수강 중인 강의</TabItem>
  <TabItem>완료한 강의</TabItem>
</Tabs>
```

### text-field

**부분 문서화** — Anatomy 2~5번(레이블 텍스트/헬퍼 텍스트/워드 리밋/텍스트 버튼)은 확보됐으나 Anatomy 1번과 ESSENTIAL/OPTIONAL 배지, Properties/Spec/Usage 대부분은 크롤 캐시에 없다 [src:29]. 데모 스크린샷에서 변형 축을 보완 회수했다(공식 텍스트가 아니라 데모 하네스 컨트롤 패널 관찰): `Filled`/`Focused`/`Helper Text`/`Right Box` 토글과 `Variant: default·error·positive`. `error`/`positive`는 `status-negative`/`status-positive` 토큰과 대응할 개연성이 크나 배선은 문서화돼 있지 않다. 접근성 규칙: 오류 등 상태 변화는 "색약/색맹 사용자를 고려해 컬러 외에도 명확한 내용"을 함께 작성해야 한다 [src:29].

```tsx
<TextField label="이메일" helperText="회사 이메일 주소를 입력하세요" variant="default" />
```

### textarea

Properties: Word Limit/Filled/State(default·disabled·focused)/Size L·S. Min-height는 최소 2줄을 작성할 수 있는 높이가 하한이고, 여기에 더해 Text Field로 오해받지 않도록 **최소 3줄 이상**을 권장 높이로 유지한다 — 원문이 두 규칙을 별도로 명시한다(하한 2줄 / 권장 3줄) [src:30]. **Don't**: 한 줄짜리 입력으로 축소해 Text Field처럼 보이게 하지 말 것 [src:30].

```tsx
<Textarea size="L" minRows={3} wordLimit={500} />
```

### toast

**부분 문서화** — Anatomy 4요소(상태 아이콘 ESSENTIAL / 레이블 ESSENTIAL / 디스크립션 OPTIONAL / "라이트 박스" OPTIONAL)만 확보, Properties/Spec(위치·지속시간)/Usage는 없다 [src:31]. 레이블 예시: "레슨을 완료했어요", "저장되었습니다" [src:31].

```tsx
<Toast icon="check" label="레슨을 완료했어요" />
```

### tooltip

**부분 문서화** — Properties만 확보: **Position 8방향**(top-start·top·top-end·bottom-start·bottom·bottom-end·left·right) / `Color gray·purple` / Close icon [src:32]. Anatomy/Spec/Usage는 없다.

```tsx
<Tooltip position="top" color="gray">추가 설명</Tooltip>
```

### pattern-empty-section

Patterns 4종 중 하나(Patterns는 "컴포넌트보다 상위 개념") [src:33]. "콘텐츠가 없거나 데이터가 비어있는 상태를 명확히 전달"하는 용도. Anatomy: ESSENTIAL Text(상태 설명) + OPTIONAL Icon/Button(CTA)/Background(회색 배경) [src:34]. Table 컴포넌트의 Do 규칙에서 명시적으로 참조된다 [src:27] [src:34].

```tsx
<EmptySection text="표시할 콘텐츠가 없습니다" icon={<EmptyIcon />} />
```

### pattern-filter

Anatomy 3요소 — Filter Button(적용 필터 유무로 on/off), Filter Header(적용 필터 개수 + 닫기), Filter Body(아코디언·체크박스·라디오·토글·선택 가능한 chips 등 유연 구성) [src:35].

```tsx
<FilterPanel>
  <FilterButton active={false} />
  <FilterHeader appliedCount={2} onClear={handleClear} />
  <FilterBody>
    <Checkbox size="S" label="입문" />
  </FilterBody>
</FilterPanel>
```

### pattern-title

"페이지나 섹션의 주요 내용을 전달하기 위한 텍스트 패턴. Label, Title, Description, Button 등을 함께 묶어 사용." Breakpoint별로 크기·정렬·요소 노출 여부가 유연하게 조정되나 구체 값은 소스에 없다 [src:36].

```tsx
<TitlePattern label="Foundations" title="Color" description="시맨틱 컬러 25종을 정의합니다" />
```

### pattern-loading

"사용자가 요청한 데이터를 시스템이 처리 중임을 시각적으로 전달"하는 패턴. 스피너 스펙 등 세부 사항은 소스에 없다 [src:37].

```tsx
<Loading />
```

## Do's and Don'ts

- **코드잇의 프로그래밍 교육 도메인 개념(강의/코스, 레슨, 커리큘럼, 학습 플레이어, 수강생 진도 등)을 그대로 가져오지 말 것** — 차용할 대상은 퍼플 액센트, Spoqa 타이포, 플랫하고 여백이 넉넉한 카드 같은 시각 처리이지, 코드잇의 프로덕트 개념·플로우·카피가 아니다.
- 텍스트 위계는 별도 회색 팔레트가 아니라 `{colors.txt-primary}`~`{colors.txt-disabled}`처럼 `gray-100` 위의 opacity 램프로 표현할 것 — 임의의 새 회색을 만들지 말 것.
- `{colors.light-purple-*}` 13스텝은 라이트=다크 동일값(테마 불변)이라는 전제로 다룰 것; 나머지 5개 패밀리(gray/blue/pink/yellow/green)에 같은 불변 가정을 적용하지 말 것 — gray는 독립 램프, blue/pink/yellow/green은 반전 램프다.
- docs 서술과 번들 실측이 갈리는 토큰(`border-secondary`, 다크 `status-positive`)은 실제 렌더(번들) 값을 채택하고 docs 서술은 주석으로만 남길 것 — 조용히 한쪽만 고르지 말 것.
- 컴포넌트 색상의 정량 스펙(hover/disabled 포함)은 코드잇 자체에 공개돼 있지 않다 — `{component.button-primary}`의 fill처럼 이 문서가 "추정"이라 명시한 값을 공식 토큰인 것처럼 재인용하지 말 것.
- 반응형은 "PC = Tablet, Mobile만 축소"라는 단일 축소 모델을 기본으로 다룰 것(실질 경계는 768px 하나) — 임의로 PC/Tablet 사이에 별도 축소 규칙을 만들지 말 것.
- `glyph-12` 이하 크기는 PC 화면에 배치하지 말 것(가독성 저하로 명시적으로 금지된 규칙).
- 코드잇 UI 카피의 종결어미를 하나로 단정하지 말 것 — 같은 Toast Anatomy 안에 "레슨을 완료했어요"(해요체)와 "저장되었습니다"(합쇼체)가 나란히 예시로 제시되며 문서가 어느 쪽이 표준인지 판정하지 않는다 [src:31]. 명시된 문안 규칙은 Text Button의 "네 글자 권장 / '~하기'" 하나뿐이다 [src:17].

## Responsive Behavior

> 제공된 데모 캡처 21종은 단일 데스크톱 뷰포트·라이트 렌더만 존재해 모바일 폭 대응 쌍이 없다. 이 섹션은 관찰이 아니라 코드잇이 텍스트로 완전 공개한 브레이크포인트 스펙에 근거한다 [src:11].

| Breakpoint | 범위 | container-padding | container-max | Key Changes |
|---|---|---|---|---|
| PC | ≥ 1200px | 40px | 1200px(고정폭, min=max) | 기본 레이아웃. 아이콘 사방 8px Hover Space [src:13] |
| Tablet | 768–1199px | 32px | 1200px(768~1200 유동) | radius/spacing 프리미티브는 PC와 동일값 유지 [src:10] [src:12] |
| Mobile | < 768px | 16px | 768px | radius·spacing 축소 유일 경계; Dropdown→Bottom Sheet 교체; Full Width 버튼 허용 [src:10] [src:12] [src:16] [src:17] |

`container-min`은 PC 1200px / Tablet 768px / Mobile 375px, `screensizeH-min`(최소 화면 높이)은 PC 800px / Tablet 1024px / Mobile 812px다 — Tablet의 최소 높이가 PC보다 크다는 점이 유일한 역전 사례다 [src:11]. 규칙: "페이지 좌우 여백은 반드시 `container-padding` 토큰을 사용" / "내부 요소는 가능한 fill(100%)로 채우고 외부 컨테이너의 min/max로 전체 폭을 제어" [src:11].

**터치 타깃**: Mobile·Tablet은 "터치 영역을 고려해 아이콘 기준 2배 크기의 여백"을 확보하고, PC는 "호버 영역을 고려해 사방 8px의 여백"을 둔다 — 원문 표현 그대로이며, 최종 px 타깃(예: 44×44px 환산)은 소스가 확정해 주지 않으므로 계산해 단정하지 않는다 [src:13]. 모바일 버튼 간 최소 gap은 12px다 [src:17].

**컴포넌트별 붕괴/전환 규칙**:

| 컴포넌트 | 반응형 동작 |
|---|---|
| Modal | `Breakpoint: PC/MO`가 Properties 축으로 명시된 유일한 컴포넌트 [src:22] |
| Bottom Sheet | 모바일 width 100%, PC 사용 비권장 [src:16] |
| Select | 모바일에서 Dropdown 대신 Bottom Sheet로 컴포넌트 자체가 교체됨 [src:16] |
| Button (Full Width) | 모바일 환경에서만 사용 권장(Tertiary는 Full Width 자체가 불가) [src:17] |
| Dropdown | 오버플로우 전략이 PC(말줄임+툴팁)/모바일(loop)로 갈림 [src:20] |
| Table | 모바일은 컨테이너 Fill 대신 가로 스크롤 채택(다열 붕괴 아님) [src:27] |
| Title 패턴 | Breakpoint별 크기·정렬·요소 노출이 유연하게 조정(구체 값 미공개) [src:36] |
| Typography | `glyph-12` 이하 PC 금지, `glyph-13` 이하는 모바일 전용 세부 텍스트 [src:9] |

이미지/aspect-ratio 관련 반응형 동작(no published breakpoint system surfaced) — Layout 페이지의 그리드 가이드는 이미지로만 존재하고 컬럼 수·거터 px가 텍스트로 공개돼 있지 않다 [src:11].

## Known Gaps

- **타이포그래피**: `glyph-17`~`glyph-12` 사이즈 값이 원문 표에서 생략돼 있어 보간하지 않고 갭으로 남겨둔다. 공개 웹폰트에는 docs가 정의하는 Bold(600) 페이스가 없다 [src:9] [src:39] [src:40].
- **레이아웃/모션/엘리베이션**: 그리드 컬럼 수·거터 px는 이미지로만 존재하고 텍스트 공개가 없다 [src:11]. transition/animation과 elevation/shadow 토큰·규칙은 시스템 전체에서 0건이다 [src:16] [src:22].
- **아이코노그래피**: 그리드·스트로크·네이밍 원칙만 공개되고 실제 아이콘 세트 SVG는 미공개다 [src:13].
- **컴포넌트 커버리지 격차**: Pagination·Select·Snackbar·Text Field·Toast·Tooltip 6종은 Anatomy 일부만 확보되고 Properties·Spec·Usage 대부분이 크롤 캐시에 없다 [src:23] [src:25] [src:26] [src:29] [src:31] [src:32].
- **정량 스펙과 접근성**: hover/disabled를 포함한 컴포넌트별 색상 적용값, 구체 대비 등급(AA/AAA), ARIA role/label 규격이 전 컴포넌트에서 공개되지 않는다 [src:8] [src:17] [src:29].
- **UX Writing**: `/ux-writing` 경로가 내비게이션에 존재하나 페이지 본문이 비어 있어 카피·보이스 가이드가 공개되지 않는다 [src:38]. 위 Do's and Don'ts의 종결어미 항목은 컴포넌트 문서에 흩어진 개별 예시를 모은 것이지 공식 라이팅 가이드가 아니다.
- **시각 근거의 한계**: 제공된 데모 캡처 21종은 라이트 렌더·단일 데스크톱 뷰포트만 존재해 다크 모드·모바일 폭에서 컴포넌트가 실제로 어떻게 조합되는지는 확인할 수 없다.
- **다크 배경의 로고 처리**: 로고에 대해 명시된 원칙은 "서체 변경·자간 조정 등 임의적 변형 금지" 하나뿐이고 [src:6], 다크 배경에서의 색 처리는 규정되지 않는다. 브랜드 바이올렛 `#6500C3`(≈ `oklch(0.439 0.240 296)`) [src:5]을 다크 베이스 `gray-00`(`#181b28` ≈ `oklch(0.225 0.026 274)`) [src:2] 위에 그대로 올리면 대비가 약 1.9:1로 그래픽 요소의 3:1 기준에 못 미친다(라이트 흰 배경에서는 약 9:1). 다크 UI에 로고를 배치해야 한다면 소비자가 직접 해결해야 하는 지점이며, 이 문서는 근거 없는 반전 규칙을 만들지 않는다.

## References

1. https://design.codeit.com — 디자인 시스템 최상위 페이지(슬로건, 시스템 정의, 3대 원칙)
2. https://www.codeit.kr — 프로덕션 번들 CSS(스케일 토큰 hex 실측 출처)
3. https://design.codeit.com/brand — Brand 계층 정의(Keyword·Logo·Color)
4. https://design.codeit.com/brand/value — 브랜드 키워드 6종
5. https://design.codeit.com/brand/color — 브랜드 컬러(Codeit Violet, PANTONE, CMYK)
6. https://design.codeit.com/brand/logo — 로고타입·심볼 원칙
7. https://design.codeit.com/foundations — Foundations 6종 개요
8. https://design.codeit.com/foundations/color — 시맨틱 컬러 25종, 접근성 원칙
9. https://design.codeit.com/foundations/typography — glyph 스케일, 서체 2종
10. https://design.codeit.com/foundations/radius — Radius 프리미티브 12단·시맨틱 6종
11. https://design.codeit.com/foundations/layout — 브레이크포인트, Layout 시맨틱 토큰 4종
12. https://design.codeit.com/foundations/spacing — Spacing 프리미티브 18단·시맨틱
13. https://design.codeit.com/foundations/iconography — 아이콘 그리드·스트로크·네이밍 원칙
14. https://design.codeit.com/components — 컴포넌트 인벤토리 17종
15. https://design.codeit.com/components/accordion — Accordion 스펙
16. https://design.codeit.com/components/bottom-sheet — Bottom Sheet 스펙
17. https://design.codeit.com/components/buttons — Buttons 5개 서브타입 스펙
18. https://design.codeit.com/components/buttons/detail — Buttons 상세(17번과 본문 동일, 독립 근거 아님)
19. https://design.codeit.com/components/checkbox — Checkbox 스펙
20. https://design.codeit.com/components/dropdown — Dropdown 스펙
21. https://design.codeit.com/components/label — Label 스펙
22. https://design.codeit.com/components/modal — Modal 스펙
23. https://design.codeit.com/components/pagination — Pagination 부분 스펙(Anatomy만)
24. https://design.codeit.com/components/radio-button — Radio Button 스펙
25. https://design.codeit.com/components/select — Select 부분 스펙(Anatomy만)
26. https://design.codeit.com/components/snackbar — Snackbar 부분 스펙(Anatomy만)
27. https://design.codeit.com/components/table — Table 스펙
28. https://design.codeit.com/components/tabs — Tabs 스펙
29. https://design.codeit.com/components/textfield — Text Field 부분 스펙
30. https://design.codeit.com/components/textarea — Textarea 스펙
31. https://design.codeit.com/components/toast — Toast 부분 스펙(Anatomy만)
32. https://design.codeit.com/components/tooltip — Tooltip 부분 스펙(Properties만)
33. https://design.codeit.com/patterns — Patterns 4종 정의
34. https://design.codeit.com/patterns/empty-section — Empty Section 패턴
35. https://design.codeit.com/patterns/filter — Filter 패턴
36. https://design.codeit.com/patterns/title — Title 패턴
37. https://design.codeit.com/patterns/loading — Loading 패턴
38. https://design.codeit.com/ux-writing — 빈 스텁(UX Writing 가이드 부재의 근거)
39. https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css — 공식 웹폰트 CSS(비고정 @latest 경로)
40. https://cdn.jsdelivr.net/npm/spoqa-han-sans@3.3.0/css/SpoqaHanSansNeo.css — 핀 고정 웹폰트 CSS(font-display-src로 채택)
</content>