设计语言 · DESIGN LANGUAGE · v1.0
为 9–18 岁的
好奇心，升级。
知了是一套给青少年自学平台的设计语言：明亮、有秩序、带一点游戏化的奖励感——让学习像通关，但不被花哨打扰。
设计原则
四条原则
跨越 9 到 18 岁，意味着系统必须“能长大”——足够友好让小学生不害怕，足够克制让高中生不觉得幼稚。
清晰先于可爱
圆角、明亮色彩营造亲和力，但层级、留白和易读正文永远优先。装饰从不挡路。
进步看得见
进度条、连胜、徽章给予即时反馈。游戏化是“点缀奖励”，不是逼迫——可关闭、不打断。
能长大的色彩
多彩但不卡通：高饱和用于强调与奖励，大面积保持中性。同一套色在浅深两种模式下都成立。
可触可达
触控目标 ≥ 44px，对比度达 AA，焦点环清晰。手机、平板、网页一致工作。
色彩 · COLOR
明亮、调和、双模式
主色靛紫负责品牌与操作；珊瑚、暖黄、薄荷、天蓝是“学科与奖励”的彩色家族；中性色为冷调，保证大面积舒适。所有色彩以 oklch 调校，确保色相和谐、明度可控。
主色与功能色 · SEMANTIC
主色阶 · PRIMARY RAMP 50→700
中性色阶 · NEUTRAL 50→950
浅色模式 Surface
bg #FBFBFE · surface #FFF · text #1B1B35 — 白底、冷调中性、彩色作强调
深色模式 Surface
bg #121123 · surface #1B1A30 · text #F1F1FA — 深靛底，主色提亮保证对比
字体 · TYPOGRAPHY
有个性的标题，省心的正文
标题用圆润几何的 Fredoka 建立友好个性；正文用人文无衬线 Nunito 保证长文易读；中文统一系统字体；标签与数据用等宽 JetBrains Mono。
间距 · 圆角 · 投影
秩序来自系统
4px 基准间距、圆润的圆角阶梯、柔和带轻微着色的投影——共同营造“友好但不松散”的秩序感。
间距阶梯 · 4px base
圆角 · RADIUS
投影 · ELEVATION
图标 · 插画
线性图标 · 扁平插画
界面图标统一 24px 网格、2px 圆头描边、圆润转角，与标题字气质一致。叙事性画面用扁平彩色插画（此处以占位示意，正式素材由插画师产出）。
UI 图标 · 24px / 2px stroke / round
组件 · COMPONENTS
组件库
主操作按钮带一点“可按下”的厚度——这是知了轻游戏化的签名手感，但仅用于关键动作，其余保持克制。
按钮 · BUTTONS
↓ 试着按下主按钮，感受 3px 下沉
输入 · INPUTS
标签与学科色 · CHIPS / TAGS
反馈 · FEEDBACK
测验选项卡 · QUIZ（点击作答）
Which word means “好奇的”?
默认 / 选中 / 正确 / 错误 四种状态
课程卡片 · COURSE CARDS
代数入门
细胞的秘密
每日英语
底部导航 · BOTTOM NAV
头像 · AVATARS
游戏化 · GAMIFICATION
奖励，而非催促
连胜、XP、徽章给予即时正反馈。它们是页面里的“小亮点”——颜色鲜亮、体量克制，并且全部可在设置中关闭。
状态指标 · STAT PILLS
进度环 · RINGS
进度条 · PROGRESS
课程进度
距离下一级 · 320 / 500 XP
徽章 · BADGES
学习路径节点 · LESSON PATH
范例 · IN CONTEXT
放进真实界面
把令牌与组件组合成一个移动端主页，验证系统在真实场景下的协调度。