---
version: alpha
name: "Chalk"
description: "明亮、圆润、给人鼓励，像一间好教室。 Chalk 让学习显得好上手：暖米色页面、坚定的蓝色操作、欢快的琥珀色和绿色表示进度，圆润的 Nunito 字号够大，孩子和疲惫的大人都看得轻松。课程被拆成一个个标得清清楚楚的小步骤。"
colors:
  primary: "#1F5FD6"
  on-primary: "#FFFFFF"
  secondary: "#F59E0B"
  tertiary: "#16A34A"
  neutral: "#5A6070"
  surface: "#FFF8EC"
  on-surface: "#1C2333"
typography:
  display-lg:
    fontFamily: "Nunito"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Nunito"
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-md:
    fontFamily: "Nunito"
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Nunito"
    fontSize: 21px
    fontWeight: 800
    lineHeight: 1.3
  body-md:
    fontFamily: "Nunito"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.6
  body-sm:
    fontFamily: "Nunito"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.45
rounded:
  sm: 12px
  md: 14px
  lg: 16px
  xl: 20px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

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

## Colors

- **primary (#1F5FD6):** 明亮的蓝色，用于报名按钮、链接和当前课时。
- **on-primary (#FFFFFF)**
- **secondary (#F59E0B):** 琥珀色，用于高亮、小贴士和第二组图表数据。
- **tertiary (#16A34A):** 绿色，用于已完成的课时、答对的题和第三组数据。
- **neutral (#5A6070):** 石板灰，用于课程信息、时长和提示。
- **surface (#FFF8EC):** 暖米色，像笔记本的纸页；卡片是白色。深色模式是深墨蓝。
- **on-surface (#1C2333)**

## Typography

全站用 Nunito：标题特粗 800，从 64px 到 21px；正文字重 500，字号放大到 18px，行高 1.6。小字也保持 15px，依然好读。

## Layout

1200px 宽的 12 栏网格，栏间距 24px，间距以 4px 为单位。课程页左侧是大纲，右侧是约 66 个字符宽的正文；落地页用亲切的三栏功能卡片。

## Shapes

卡片、按钮和输入框用 16px 圆角。1px 暖沙色描边；卡片和测验题用柔和的低阴影。

## Components

显示难度、时长和进度的课程卡片、带勾选的课时大纲、做成大卡片方便点选的测验选项、浅黄色的小贴士框，以及完成模块后的徽章。

## Do's and Don'ts

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