设计系统手册

四个高饱和主色负责记忆点，浅色系负责贴纸底色，纸与墨负责文字与描边。日间与夜间是同一套语义 token，只是 light-dark(日, 夜) 的两端；切换主题只改color-scheme。色块左半为日间、右半为夜间；小字号文字改用加深色（--coral-deep、--ink-soft），保证正文对比度 ≥ 4.5:1。

高饱和主色 4 COLORS MAX

贴纸浅色 TINTS · 大面积底色

纸与墨 PAPER & INK

主题专用 THEME TOKENS

日间文本对比度 DAY · ACCESSIBILITY CHECK

夜间文本对比度 NIGHT · ACCESSIBILITY CHECK

※ 珊瑚 #ef6f5e直接配纸白只有 2.9:1，只允许出现在装饰性印章、24px 以上大字或描边里；小字一律换--coral-deep。夜间把墨色反转为月光墨后，所有双值 token 由 light-dark() 自动重算，切换只改color-scheme。

标题一律使用站点自有的 ChillRoundF（只有 400 一个字重，所以不做伪粗：用字号、硬阴影与细描边建立层次）；正文使用系统中文黑体（Noto Sans SC / PingFang SC / 微软雅黑按系统可用性回落）；拉丁数字用 Baloo 2（OSS 自托管分片）；元信息用 Cascadia Mono；手写体 HappyZcool-2016 只做小面积点缀。

以 4px 为基准的间距刻度；页面内容最大宽度 1210px，左侧装订条 86px（手机转顶部活页条 54px），纸页内边距 clamp(18px, 3.4vw, 52px)，正文阅读宽度 700px，文章整体 970px。

间距刻度 4PX BASE

布局常量 LAYOUT

• 页面最大宽 1210px（.notebook-wrap）
• 装订条 86px；≤960px 变 54px 顶部活页条
• 纸页内边距 clamp(18px, 3.4vw, 52px)
• 正文阅读宽 700px；文章布局 970px
• 卡片圆角 14 / 16 / 20 / 22 / 24 / 28px
• 内容节奏 区块间距 clamp(34px, 4.6vw, 54px)
• 断点 1260 / 1080 / 960 / 820 / 700 / 420px
• 页签 / 胶带 绝对定位，≤1260px 隐藏右侧页签

所有纸片都是 2–3px 墨色描边 + 圆角 + 向外偏移的硬阴影（印刷贴纸感），禁止模糊投影堆叠与玻璃拟态。阴影只分两档：贴纸级 2–4px 实墨，纸片级 4–8px 半透明墨。

圆角 RADIUS

描边与阴影 BORDER & HARD SHADOW

手帐质感零件 TEXTURE PARTS

旋转纪律：纸片 ≤ ±1.5°，小贴纸 / 印章 ≤ ±8°；≤700px 时大卡片旋转归零，只保留小贴纸的轻微倾斜。

所有可交互元素都要有 hover 上浮 + focus-visible 珊瑚虚线描边。按钮最小高度 46px，导航 42px，主题票签 40px，触控目标 ≥ 40px。

动效只负责“贴上去”和“翻一页”的感觉，不负责表演。默认进场 rise-in 0.55s、贴纸 hover 150–250ms、下沉 2–4px；prefers-reduced-motion: reduce时全部动画与过渡降到 0.001ms。

• 进场 rise-in 0.55s ease（卡片错峰 0–0.16s）
• hover transform 150–250ms + 阴影加深 1 档
• 旋转回正 旋转卡片 hover 时 rotate → 0deg
• 滚动 仅 html scroll-behavior: smooth（可被 reduced-motion 关闭）
• 不做 视差、全屏粒子、自动轮播、循环抖动
• 翻页 归档分页使用 :target 纯 CSS 切换，不依赖 JS

• 焦点 3px 珊瑚虚线 + offset 3px（:focus-visible）
• 触控 导航/按钮 ≥ 42px，主要按钮 ≥ 46px，主题票签 40px，触控目标 ≥ 40px
• 对比度 日/夜正文均 ≥ 4.5:1；大标题/装饰印章 ≥ 3:1；珊瑚小字加深
• 主题 三档 radio group（日/自动/夜），方向键可切换；无 JS 时跟随系统并隐藏控件
• 语义 header / nav / main / footer / article / aside + aria-label
• 装饰 SVG 与胶带一律 aria-hidden，不进入无障碍树
• 跳转 首元素为 skip-link，直达 #main
• 缩放 字号用 rem/clamp；390px 下无横向滚动
• 字体 ChillRoundF 仅 400，不用伪粗体；正文回退系统中文黑体

这套稿子的每个页面都对应正式站点的真实路由与 Astro 组件；主题 token 定义在 src/styles/theme.css，用light-dark(日, 夜) 描述两端，由html[data-theme] 上的color-scheme 决定生效值。

• HTML 契约 html[data-theme="auto|light|dark"]
• 存储键 lotusland:theme（缺省 / 非法值回落 auto）
• 首屏 head 内联脚本先落 data-theme 与 html 背景，再渲染 body
• 换页 astro:after-swap / astro:page-load 同步 checked 与 meta theme-color
• 无 JS auto + light-dark() 仍跟随系统；切换器因 data-theme-ready 不存在而隐藏
• 动效 用户点击时 220ms View Transition 交叉淡入；系统变化与 reduced-motion 不做动画

:root {
  color-scheme: light dark;
  --paper: light-dark(#fffdf6, #1b2438);
  --ink: light-dark(#22314f, #f4efe3);
  --blue: #6db0ec;
  --coral: #ef6f5e;
  --mint: #79cdb4;
  --butter: #f7c948;
  --on-accent: #16203a;
  --shadow-ink: light-dark(#22314f, #080d17);
  --code-bg: light-dark(#22314f, #0b1220);
  --font-title: "ChillRoundF";
  --bd: 3px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="auto"]  { color-scheme: light dark; }

※ 本页与 404 为内部页面，不进入主导航；它们与其它页面共用同一套 Header / Footer / 纸页外壳。