Chalk: Friendly Education Design System

Web · Light · Playful · Bold · Education

Chalk

Bright, rounded and encouraging, like a good classroom.

Chalk makes learning feel approachable: warm cream pages, a confident blue for actions, cheerful amber and green for progress, and rounded Nunito set large enough for young and tired eyes alike. Lessons are broken into small, clearly labeled steps.

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/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

Online courses and bootcamps
Schools, tutoring and kids' learning
EdTech product sites
Workshops and study guides

Do's and don'ts

Do show progress on every course and lesson.
Do keep body text at 18px, even in dense lessons.
Don't mark wrong answers in red without a short explanation.
Don't stack more than three colors in one card.