--- 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 저장하기 ``` ### button-secondary ESSENTIAL 레이블 + OPTIONAL 아이콘, Primary와 동일한 Size/State/Icon 축 [src:17]. **Do**: 설정 화면처럼 복수 버튼을 나열해야 하는 UI에 사용. **Don't**: 가장 강조할 버튼에는 사용하지 말 것 [src:17]. ```tsx 취소하기 ``` ### button-tertiary Primary/Secondary Properties에 `Color gray/purple`가 추가된다 [src:17]. **Do**: Primary와 함께 써야 하는 주요 행동에는 Tertiary(purple)를 사용. **Don't**: Full width 사용 불가 [src:17]. ```tsx 더 알아보기 ``` ### button-text `Color gray/purple` Properties. Chevron 외 아이콘은 좌측 배치를 권장한다. **Do**: "네 글자를 권장, 상황에 따라 '~하기'로 Writing 규칙 준수" — 시스템 전체에서 유일하게 명시된 문안 규칙이다 [src:17]. Usage에 Don't는 없다 [src:17]. ```tsx 더보기 ``` ### button-icon 아이콘만으로 구성되며(다른 4개 버튼 서브타입과 달리 레이블이 필수가 아닌 유일한 예외), Size L/M/S, State, `Color default/invert`를 갖는다 [src:17]. **Do**: 다운로드·복사·삭제·초기화·북마크 등 **유니버설 의미 아이콘만** 사용. Usage에 Don't는 없다 [src:17]. ```tsx ``` ### 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 ``` ### bottom-sheet Anatomy: 백드롭·바디(ESSENTIAL) + 헤더·푸터(OPTIONAL). 백드롭 터치 시 닫힌다. Properties: Title/Close/Footer [src:16]. 모바일 width는 뷰포트 100%이며 "주로 모바일 환경 적합, PC에서는 사용 비권장"이다. Select 컴포넌트는 모바일에서 Dropdown 대신 이 컴포넌트로 교체된다 [src:16]. **Don't**: 다중 선택 상황에서 [적용하기] 버튼을 제거하지 말 것 [src:16]. ```tsx ... ``` ### checkbox **Clickable Area = 레이블을 포함한 행 전체**. 리스트 항목 간격 최소 12px. Properties: Selected/Label/Description/State(default·hover·disabled)/Size L·S [src:19]. **Don't**: 하나만 선택 가능한 경우 Radio Button을 권장 [src:19]. ```tsx ``` ### 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 ``` ### 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 ``` ### 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 변경사항을 저장할까요? 취소하기 저장하기 ``` ### pagination **부분 문서화** — Anatomy 4요소(첫 페이지 버튼·페이지 버튼·페이지 이동·마지막 페이지 버튼)만 확보되고 Properties/Spec/Usage는 크롤 캐시에 없다 [src:23]. ```tsx ``` ### radio-button Clickable Area = 행 전체. 리스트 항목 간격 최소 12px. Properties: Selected/Label/Description/Size L·S/State [src:24]. **Do**: 필수 선택 항목이면 기본 선택값 제공. **Don't**: 옵션 5개 이상이면 드롭다운을 권장 [src:24]. ```tsx ``` ### select **부분 문서화** — Anatomy 2요소(선택 영역 / 인디케이터 아이콘, 하단 방향 화살표 ▼)만 확보 [src:25]. 모바일에서는 이 컴포넌트가 Dropdown 대신 Bottom Sheet로 교체된다는 반응형 규칙이 문서화돼 있다 [src:16]. ```tsx