Physics Lab
面向高中物理课堂的交互实验工作台。按学科与物理现象浏览模型，观察运动、受力与变化过程。
physics-lab.farstrides.com留白有序，
内容在前。
一套面向个人作品与长文阅读的视觉系统。用排版建立秩序，用留白组织节奏，让每一次强调都有理由。
视觉系统 v1 / 排版与交互样张
从实际作品开始
标题说明作品是什么，正文说明它解决什么问题。项目并列呈现，保留各自的性格。
打开 Physics Lab
积跬致远 Farstride
从目标走向日常行动的个人规划工具。记录待办、讨论与采用计划，在执行和回顾中持续调整。
planner.farstrides.com设计的基本单位
变量控制数值，语义决定用途。字号、颜色和动效都有明确边界，不依赖装饰维持层级。
排版
TypographyQuietly considered.
把问题想清楚
在观察中理解
从一个小的行动开始
好的工具让注意力留在问题本身。正文保持舒适的行距和适中的行宽，让一段完整的想法自然展开。
辅助说明保留可读性，不承担主要内容。
图注、日期与技术标记
Display 只用于每页至多一处品牌表达。常规页面以 Body、H2、H3 为主，Caption 按需出现。标题视觉样式与 HTML 语义独立，样张不会为展示字号而增加多个 H1。
色彩角色
Sand + Jadebackground#fdfdfcsurface#f9f9f8text-primary#21201ctext-secondary#63635emuted#63635eborder#dad9d6accent#1e7a61accent-foreground#ffffffMuted 用于元信息，仍保持正文级对比度。Border 用于非交互分隔；输入和选择控件使用对比更强的 border-control。强调色用于链接、焦点和主要动作。
空间与节奏
4 px base4812162432486496128关联内容间距 8–16 px，组件间距 24–32 px，章节间距随视口在 48–96 px 之间变化。中文正文最多约 36 个全角字符，英文正文最多 65ch。
边界与层次
分隔线 1 px。控件圆角 4 px，有限容器 8 px，图片 12 px。作品列表直接排版；阴影只留给确有遮挡关系的浮层。
这是一块承载补充信息的 surface。正文可直接阅读，操作具有清楚的边界。
查看阅读样张动效有因
即时反馈 120 ms，局部状态变化 200 ms，必要的展开 280 ms。进入使用 ease-out，往返状态使用 ease-in-out。弹簧保留给直接拖拽，本样张无需加载动画库。
内容默认可见，不做滚动入场。主题立即切换。减少动态偏好下，过渡与动画归零；键盘焦点保持清晰。
响应式边界
Mobile first| 断点 | 默认换算 | 使用方式 |
|---|---|---|
| Base | 0 | 单栏阅读，导航自然换行 |
| sm | 40rem / 640px | 排版样本与标注并排 |
| md | 48rem / 768px | 项目编号、内容、链接分列 |
| lg | 64rem / 1024px | 增加列间距，保留阅读行宽 |
| xl | 80rem / 1280px | 内容外框最多 1200px |
让阅读成为默认体验
正文样张 / 1.8 行高 / 中文 36em 行宽