ANSWERS DESIGN SYSTEM / V3
清晰，
自有分量。
让内容先被看懂，再被喜欢。用准确的层级、安静的材质和有目的的动态，呈现每一份答案。
01 / MOTION
一个答案，如何出现。
结论先到，解释跟上，证据落定。轻微的位移帮助建立层级，文字始终完整、可读。
先给结论，再展开依据。
一个区块只回答一件事。通过留白和字号区分主次，让读者自己决定阅读的深度。
完整文本始终保留，可以选择与复制。
160 ms颜色与按压反馈
320 ms卡片与控件过渡
640 ms内容进入视野
02 / COMPOSITION
少一点装饰。多一点秩序。
留白，让重点站出来。
首页内容宽度 1088 px，阅读页正文宽度 844 px。正文 16 px 起，首屏标题随屏幕缩放；同一层级保持一致。
玻璃，有自己的位置。
半透明与背景模糊只用于导航和少量悬浮组件。正文卡片使用实色表面，保证文字稳定、清楚。
色彩，用来传递信息。
大面积保持中性。蓝色标记主要入口，浅色背景区分内容主题。浅色与深色都有独立的语义颜色。
动效，跟着操作发生。
内容上移 14 px 并淡入；同组错峰 55 ms，上限 180 ms。卡片悬停上移 3–5 px，按钮按压缩至 97.5%。没有常驻漂浮和正文模糊。
03 / MATERIAL
浅与深，都读得舒服。
默认跟随系统外观。顶部按钮可在当前站点切换并记住选择。
画布 · --bg
内容表面 · --surface
主要文字 · --ink
交互强调 · --tint
04 / ACCESSIBILITY
体验，包含不播放的权利。
- 默认显示全部正文。JavaScript 未加载或动画接口不可用时，页面依然可读。
- 尊重系统的“减少动态效果”，取消入场、位移和动效重播。
- 固定导航不参与内容入场，避免定位与动画相互覆盖。
- 只给进入视野的短区块播放一次动效，不隐藏整段长文。
- 保留键盘焦点、语义化按钮与搜索状态提示；不拦截浏览器的正常导航。
05 / START HERE
下一份答案，从这里开始。
共享同一套样式与脚本。结构围绕内容安排，不必把所有段落都放进卡片。
最小页面模板
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>页面标题</title>
<link rel="stylesheet" href="https://answers.xn--ltr42g543b.cn/base.css?v=20261021a">
<script defer src="https://answers.xn--ltr42g543b.cn/motion.js?v=20261021a"></script>
</head>
<body>
<main class="page" id="main">
<header class="page-head" data-reveal>
<p class="kicker">主题 / 日期</p>
<h1>先说清楚结论。</h1>
<p class="lead">用两句话说明读者能获得什么。</p>
</header>
<section>
<h2 data-reveal>证据与解释</h2>
<div class="card" data-reveal>正文默认可见。</div>
</section>
</main>
</body>
</html>当前资源版本：20261021a。变更共享资源时更新版本号，并同步页面引用与设计记忆。