Chalk：教育课程设计系统

网页 · 浅色 · 活泼 · 醒目 · 教育

Chalk

明亮、圆润、给人鼓励，像一间好教室。

Chalk 让学习显得好上手：暖米色页面、坚定的蓝色操作、欢快的琥珀色和绿色表示进度，圆润的 Nunito 字号够大，孩子和疲惫的大人都看得轻松。课程被拆成一个个标得清清楚楚的小步骤。

预览

直接用下面的设计变量和这套系统自己的字体实时渲染。

2026 新功能规划、上线和复盘，都在一个地方

为小团队准备的安静工作台。该有的数字都在，多余的一个没有。

免费开始预约演示

活跃用户12,480

收入$48.2k

留存率86%

邀请团队成员工作邮箱you@company.com角色编辑 ▾发送邀请

最近订单客户状态金额Ada Park已付款$1,240Lukas Weber待付款$380Mei Chen已退款$96

在你的项目里使用

粘贴到 Codex 或 Claude Code 里。agent 会把规范保存为 DESIGN.md，之后一直按它来设计。

这个项目使用 Chalk 设计系统，规范在 https://codexdesign.io/zh/design-systems/chalk.md 。把它保存为项目根目录的 DESIGN.md，之后所有界面都遵循它。

设计变量

颜色

浅色主题

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)

深色主题

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)

字体

标题: Nunito · 800
正文: Nunito · 500
等宽: JetBrains Mono

字号阶梯

display · 64/1.05 · -0.02em设计让界面更好用
h1 · 44/1.1 · -0.015em设计让界面更好用
h2 · 30/1.2 · -0.01em设计让界面更好用
h3 · 21/1.3设计让界面更好用
body · 18/1.6设计让界面更好用
small · 15/1.45设计让界面更好用

圆角、间距和阴影

圆角sm 12pxmd 14pxlg 16pxxl 20px

间距xs 4pxsm 8pxmd 16pxlg 24pxxl 48px

阴影柔和、低而宽的阴影，只用在卡片和面板上。

布局

最大宽度: 1200px
正文宽度: 66ch
栏数: 12
栏间距: 24px

适合

在线课程和训练营
学校、辅导和少儿学习
教育科技产品官网
工作坊和学习指南

要做和不要做

每门课和每个课时都显示进度。
正文保持 18px，内容再密也不缩小。
答错时不要只标红，要附一句解释。
一张卡片里不要叠超过三种颜色。