Chalk: 친근한 교육 디자인 시스템

Web · Light · Playful · Bold · Education

Chalk

밝고, 둥글고, 격려하는 분위기. 좋은 교실처럼.

Chalk는 배움을 가깝게 느끼게 합니다. 따뜻한 크림색 페이지, 행동에는 자신감 있는 파랑, 진행 상황에는 밝은 앰버와 초록, 어린 눈과 지친 눈 모두를 위해 충분히 크게 둔 둥근 Nunito. 수업은 분명한 이름이 붙은 작은 단계로 나뉩니다.

Preview

Rendered live from the tokens below, in the system's own fonts.

New in 2026Plan, ship and measure in one place

A calm workspace for small teams. Every number you need, nothing you don't.

Start freeBook a demo

Active users12,480

Revenue$48.2k

Retention86%

Invite your teamWork emailyou@company.comRoleEditor ▾Send invite

Recent ordersCustomerStatusAmountAda ParkPaid$1,240Lukas WeberPending$380Mei ChenRefunded$96

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Chalk design system. Its spec is at https://codexdesign.io/ko/design-systems/chalk.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

background#FFF8ECoklch(0.981 0.018 81.333)
foreground#1C2333oklch(0.257 0.032 265.974)
card#FFFFFFoklch(1 0 0)
card-foreground#1C2333oklch(0.257 0.032 265.974)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1C2333oklch(0.257 0.032 265.974)
primary#1F5FD6oklch(0.52 0.194 261.461)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#FFE7B8oklch(0.936 0.066 84.017)
secondary-foreground#5A3B00oklch(0.379 0.08 75.782)
muted#F6EEDFoklch(0.951 0.022 83.264)
muted-foreground#5A6070oklch(0.49 0.027 269.134)
accent#FFEFD0oklch(0.957 0.044 83.913)
accent-foreground#1C2333oklch(0.257 0.032 265.974)
destructive#C22F2Foklch(0.538 0.184 25.962)
border#EADFCBoklch(0.907 0.029 82.593)
input#DDCFB6oklch(0.859 0.037 82.163)
ring#1F5FD6oklch(0.52 0.194 261.461)
chart-1#1F5FD6oklch(0.52 0.194 261.461)
chart-2#F59E0Boklch(0.769 0.165 70.08)
chart-3#16A34Aoklch(0.627 0.17 149.214)
chart-4#E0457Boklch(0.625 0.195 3.518)
chart-5#0EA5B7oklch(0.661 0.112 208.672)

Dark theme

background#141A26oklch(0.218 0.025 263.828)
foreground#F3EEE4oklch(0.95 0.014 84.584)
card#1B2232oklch(0.253 0.032 265.946)
card-foreground#F3EEE4oklch(0.95 0.014 84.584)
popover#1B2232oklch(0.253 0.032 265.946)
popover-foreground#F3EEE4oklch(0.95 0.014 84.584)
primary#7BA4FFoklch(0.728 0.14 264.763)
primary-foreground#141A26oklch(0.218 0.025 263.828)
secondary#2A2F3Boklch(0.305 0.023 267.284)
secondary-foreground#F3EEE4oklch(0.95 0.014 84.584)
muted#1F2635oklch(0.269 0.03 265.06)
muted-foreground#A2A9B8oklch(0.734 0.023 265.71)
accent#262E40oklch(0.302 0.035 265.827)
accent-foreground#F3EEE4oklch(0.95 0.014 84.584)
destructive#FF7A7Aoklch(0.735 0.163 21.864)
border#2C3446oklch(0.326 0.034 265.934)
input#364056oklch(0.372 0.04 265.526)
ring#7BA4FFoklch(0.728 0.14 264.763)
chart-1#7BA4FFoklch(0.728 0.14 264.763)
chart-2#FBBF4Aoklch(0.839 0.146 80.739)
chart-3#4ADE80oklch(0.8 0.182 151.711)
chart-4#F582A7oklch(0.744 0.145 0.747)
chart-5#4FD1E0oklch(0.796 0.114 205.941)

Fonts

Headings: Nunito · 800
Body: Nunito · 500
Monospace: JetBrains Mono

Type scale

display · 64/1.05 · -0.02emThe quick brown fox
h1 · 44/1.1 · -0.015emThe quick brown fox
h2 · 30/1.2 · -0.01emThe quick brown fox
h3 · 21/1.3The quick brown fox
body · 18/1.6The quick brown fox
small · 15/1.45The quick brown fox

Radius, spacing and shadow

Corner radiussm 12pxmd 14pxlg 16pxxl 20px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowSoft, low and wide, on cards and sheets only.

Layout

Max width: 1200px
Text width: 66ch
Columns: 12
Gutter: 24px

Best for

온라인 강의와 부트캠프
학교, 과외, 어린이 학습
에듀테크 제품 사이트
워크숍과 학습 가이드

Do's and don'ts

모든 강의와 수업에 진행 상황을 보여 주세요.
내용이 빽빽한 수업에서도 본문은 18px을 유지하세요.
짧은 설명 없이 오답을 빨간색으로 표시하지 마세요.
카드 하나에 색을 세 가지보다 많이 쌓지 마세요.