AI 思维与认知 · 设计规范 Design System

品牌定位

「AI 思维与认知」是浙大设计出品的可视化知识卡片系统，把 AI 教育从"技能普及"推向"认知启蒙"。视觉风格关键词：知性、温暖、克制、东方感。

主色调走米色（cream）+ 紫色（accent）的组合，避免高饱和度
字体衬线（Noto Serif SC）承担标题，非衬线（Inter）承担正文
所有动效控制在 200-400ms 之间，用 cubic-bezier(0.4, 0, 0.2, 1) 缓动

色彩系统

主色（Brand）

Cream底色 · 全站背景#f8f5f2

Accent · 紫主要交互色#6941c6

CoralCTA 按钮渐变#f45d48 → #e44d3a

Ink Strong主标题#1a1614

层级色（按 L0-L5）

L0 总论#7a1f45

L1 概念#1f5fbf

L2 工具#d83386

L3 思维#df4b42

L4 价值#6941c6

L5 哲学#0f766e

对比度

所有文字与背景的对比度 ≥ WCAG 2.1 AA（正常字体 4.5:1，大字体 3:1）。装饰性元素允许 3:1。

字体与字号

字体家族

用途	字体	引用
正文 / UI	Inter	var(--font-sans)
中文标题 / 引文	Noto Serif SC	var(--font-serif)
英文标题 / 副标题	Source Serif 4	"Source Serif 4", serif
等宽 / 代码	JetBrains Mono	"JetBrains Mono", monospace

字号阶梯

H1 · Display

AI 不是一场技术竞赛

H2 · Section

为什么这张卡值得读

H3 · Subtitle

第一性变化：从治疗疾病到管理生命系统

Body · 16px

AI 真正能做的，是把这些过去分散、连续、微弱的生命信号——统一变成可以被理解、被预测、被干预的模型。

Caption · 12px

L4-022 · AI价值的认知 · 行业新秩序 · 案例 · 方法论

间距与栅格

变量	数值	用途
页面 padding-x	clamp(20px, 4vw, 56px)	左右安全留白
section gap	60-80px	章节间距
card grid gap	1.4rem (22px)	卡片网格
p line-height	2.05	正文段落
p margin-bottom	1.05rem	段落间距
触摸目标 min	30-44px	WCAG 2.5.5

核心组件

按钮（Buttons）

标签（Tag）

#健康本质 #结构重构 #主动预测

核心金句框（Pull Quote）

「AI 不会让人自动变健康，但会让健康成为一个可建模、可预测、可干预的系统工程。」

文章小节（Section Head）

把 AI+健康当工具升级，是最常见的误读

卡片（Card）

L4-022 AI+健康的第一性原理

从治疗疾病到管理生命系统

动效原则

缓动函数：默认 cubic-bezier(0.4, 0, 0.2, 1)
常用时长：交互反馈 150-200ms，过渡动画 280-380ms，进场动画 400-600ms
顶部栏滚动收缩：380ms，从 100% 宽到 pill 形态
卡片翻转：500ms，rotateY(180deg)
reveal 动画：IntersectionObserver 触发，opacity + translateY(12px)
prefers-reduced-motion：自动禁用所有动效

项	规则
焦点指示	所有可交互元素 `:focus-visible` 显示 2px 紫色 outline + 4px 阴影光晕
对比度	正文 ≥ 4.5:1，标题 ≥ 4.5:1，装饰元素 ≥ 3:1
触摸目标	主交互元素 ≥ 44×44px（标签等次要交互 ≥ 30×30px + padding 扩展）
ARIA	所有 button / tab / pressed 状态同步 `aria-pressed` / `aria-selected`
键盘	Space/Enter 触发，方向键切换 tab，Tab 顺序符合视觉顺序
分隔符	视觉分隔 `·` 一律 `aria-hidden="true"`
动态内容	状态变化使用 `role="status" aria-live="polite"`

代码片段

引入字体

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&family=Source+Serif+4&family=JetBrains+Mono&display=swap" />

CSS 变量

:root {
  --accent: #6941c6;
  --coral: #f45d48;
  --cream: #f8f5f2;
  --ink-strong: #1a1614;
  --font-sans: "Inter", "PingFang SC", sans-serif;
  --font-serif: "Noto Serif SC", serif;
}

全局焦点

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

核心金句框

.pull-quote {
  font-family: "Noto Serif SC", serif;
  font-size: 1.1rem;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 0 12px 12px 0;
}

设计规范 Design System