| version | alpha | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| name | Code Course Atlas | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| description | Shared visual identity for the Code Course Atlas portal and its codebase-to-course lesson pages. Warm paper, vermillion accent, rounded surfaces, and soft warm shadows — one token system across the atlas entry and every course. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
Code Course Atlas 的视觉身份：温暖纸感底色 + 朱红强调色 + 圆角表面 + 暖色柔影。门户首页（portal.css）与各课程详情页（<course>/styles.css）共享同一套设计令牌，让"图鉴入口"与"课程正文"读起来像同一份出版物。气质是"编辑级的克制"遇上"教学产品的亲和"——大字标题用 Bricolage Grotesque 建立结构感，正文用 DM Sans 保证可读，等宽 JetBrains Mono 承担眉题、标签与代码。
强调色默认为朱红 vermillion #D94F30；每门课程可在自己的 _base.html 中仅覆盖四个 --color-accent* 变量换色（vermillion / coral / teal / amber / forest），底色、圆角、阴影、间距、字号等令牌保持不变。门户首页使用默认朱红，作为整站基调。
- bg / neutral (#FAF7F2): 温暖石灰底，比纯白更柔和，是所有页面的基础画布；body 叠加一层极淡的朱红径向渐变制造光感。
- bg-warm (#F5F0E8) / surface-warm (#FDF9F3): 略深 / 略暖的表面，用于路由面板、聊天气泡、卡片内嵌区，制造轻微层次。
- text (#2C2A28): 深墨色正文与标题，带暖调，避免冷硬纯黑。
- text-secondary (#6B6560) / text-muted (#9E9790): 二级与弱化文字，用于副标题、元信息、页脚、路由路径。
- accent (#D94F30): 朱红——唯一的交互驱动色，用于按钮、链接悬停、强调字
<em>、路由指示点。 - accent-hover (#C4432A): 朱红加深，用于按钮悬停。
- accent-light (#FDEEE9) / accent-muted (#E8836C): 强调色的浅底与中间调，用于选中态、悬停描边、callout 背景。
- border (#E5DFD6) / border-light (#EEEBE5): 暖灰描边，分隔卡片与区块。
- surface (#FFFFFF): 卡片与容器白底。
- semantic: success
#2D8B55/ error#C93B3B/ info#2A7B9B（及各自 light），用于课程内测验反馈、提示框、正确/错误态。 - bg-code (#1E1E2E): 代码块深色底，配 Catppuccin 风格语法高亮。
- on-accent (#FFFFFF): 朱红底之上的文字色。
三套字族贯穿全站，与课程页完全一致：
- Bricolage Grotesque (display): 标题与数字。门户 hero 大标题用 fluid
clamp(54px, 7vw, 96px)，课程模块标题用 2.25rem；字重 700，行高 1.1，字距 -0.02em。 - DM Sans (body): 正文与 UI 文案，1rem，行高 1.6；中文回落到 Noto Sans SC。
- JetBrains Mono (mono): 眉题、标签、路径、代码，0.75rem，字距 0.03em，常配
text-transform: uppercase。
类型刻度 --text-xs … --text-6xl（0.75rem → 3.75rem）逐级递增；移动端在 768px / 480px 断点下调 4xl–6xl，保证大标题不溢出。
- 门户内容宽度
--content-width: 1180px，两侧留白calc(100% - 64px)；课程正文 800px / 宽栏 1000px。 - 间距刻度
--space-1 … --space-24（0.25rem → 6rem），所有内边距、外边距、网格间距均引用刻度，不使用裸数值。 - 门户采用编辑式分栏：hero 双栏（文案 / 图像）、project-card 内双栏（描述 / 路由）、about 三栏；≤820px 退化为单栏。
阴影一律暖调（基于 #2C2A28 的半透明，绝不用纯黑），四级：
--shadow-sm：卡片静态态、浮标签。--shadow-md：卡片悬停、容器。--shadow-lg：hero 视觉框、浮层。--shadow-xl：术语 tooltip。
交互通过 transform: translateY(-2px / -4px) + 阴影升一档表达"抬起"，而非旧版的硬偏移阴影或水平位移。动效用 --ease-out cubic-bezier(0.16,1,0.3,1)，时长 fast / normal / slow = 150 / 300 / 500ms。
圆角四级：
--radius-sm8px：按钮、浮标签、wordmark 标记。--radius-md12px：路由面板、代码块、step-card、callout。--radius-lg16px：project-card、hero 视觉框、容器。--radius-full9999px：路由圆点、chip。
门户旧版的硬边方框与 14px 14px 0 硬偏移阴影已全部替换为圆角 + 暖色柔影，与课程页一致。
- button-primary: 朱红底 + 白字 + 8px 圆角，大写等宽标签，悬停加深为 accent-hover 并抬起。门户 hero CTA 与课程主按钮（
.btn-primary/.quiz-check-btn）共用。 - button-primary-hover: 背景 accent-hover
#C4432A，阴影升至 md。 - project-card: 白底 + 16px 圆角 + sm 阴影；悬停抬升 4px、阴影升至 md、描边变 accent-muted。
- project-footer: 弱化文字色，承载模块数与课程入口链接。
- language-switch: 扁平文字按钮（中 / EN），无描边无底色；悬停仅文字加深。
- hero-visual: surface-warm 底 + 16px 圆角 + lg 阴影；图像做
grayscale + 轻微 sepia暖调处理。 - route-panel: bg-warm 底 + 左侧 3px 朱红边 + 12px 圆角，承载课程入口路径。
- nav-link: 二级文字色；悬停转朱红。
- wordmark: 2×2 方块标记，墨 + 朱红，8px 圆角。
- callout-accent / callout-info / callout-warning: 课程内的提示框，左侧 4px 边 + 浅底 + 对应语义色文字。
- code-block: bg-code 深底 + 12px 圆角，Catppuccin 语法高亮。
- step-card / quiz-option-correct: 课程内的步骤卡与测验正确态，复用同一令牌。
课程页在此基础上还用同一令牌系统实现了 translation-block、drag-and-drop、group-chat、flow-animation、arch-diagram、pattern-card 等组件（见各课程 styles.css）。
Do:
- 所有颜色、圆角、阴影、间距、字号都引用令牌，不要写裸值。
- 换主题强调色时，只覆盖四个
--color-accent*变量（在课程_base.html内），其余令牌保持不变。 - 阴影用暖调半透明黑，圆角用四级刻度中最接近的一档。
- 中文环境确保字体栈包含
Noto Sans SC回落。
Don't:
- 不要重新引入冷蓝
#2455ff、纯黑、或硬偏移阴影——会破坏与课程页的统一。 - 不要在按钮 / 链接之外滥用朱红；它是唯一的交互驱动色。
- 不要为单一组件自创圆角或间距数值。
- 不要让长段正文低于 WCAG AA 对比度；朱红底配白字（对比约 4.2:1）仅用于大写加粗的短标签按钮，不用于正文。需要正文朱红时改用纯朱红文字配浅底（accent-light）。