文档 / 设计规范
设计规范
应用默认沿用主站的纸张贴纸风：浅色背景、白色卡片、淡紫色控件、圆角和轻柔阴影。platform.ui 提供基础组件，复杂应用可以使用原生 DOM 和包内 CSS 自定义布局、编辑器与交互。这些组件是起点，不是固定的页面模板。运行时默认表单样式使用低优先级选择器，应用的类名样式可以覆盖它们。
具体界面应先阅读 UI 设计原则 和 应用设计清单。颜色、字体和布局类只是实现约束，不能代替对结构、注意力、状态和用户经验的判断。
颜色与字体
| CSS 变量 | 用途 |
|---|---|
--ink、--muted | 正文与次要说明。 |
--paper、--surface | 纸张背景与卡片表面。 |
--line | 分隔线。 |
--accent | 链接与强调文字。 |
--mark、--mark-on | 标记和选中状态。 |
--btn、--btn-ink | 主按钮背景和文字。 |
--error | 错误文字。 |
--shadow | 轻柔阴影。 |
--font、--serif | 系统字体与数字衬线字体。 |
金额、日期与统计数字使用 lo-num，保持数字宽度一致。不要引入外部字体或独立深色主题。
布局类
| 类名 | 用途 |
|---|---|
lo-app | 页面容器。 |
lo-stack | 纵向排列。 |
lo-app-row | 横向分栏。 |
lo-pane | 白色面板。 |
lo-pane-side、lo-pane-main | 侧栏与主栏。 |
lo-chip、lo-chip on | 标签与选中状态。 |
lo-icon-btn | 圆形图标按钮。 |
lo-app 默认是纵向布局；横向分栏需要嵌套 lo-app-row，或使用自定义 CSS Grid 容器。不要只设置 display: flex 就假定容器会横向排列。
platform.ui 自动使用对应的 lo-* 类。自定义布局也优先组合这些类。所有 .css 文件自动注入，详见多文件应用包。
响应式与交互
@media (max-width: 600px) {
.lo-app-row { flex-direction: column; }
.lo-pane-side { width: 100%; }
}窄屏避免固定页面宽度。点击区域应清晰可用，主按钮默认为 50px 高；输入区域文字保持 16px，减少手机自动缩放。
为输入框提供标签，为图片提供替代文字，按钮使用清楚的动作名称。原生 DOM 组件允许通过 setAttribute 设置必要的 ARIA 属性。
遵循 prefers-reduced-motion，不要让页面切换闪白。当前部分组件仍需要应用补充键盘交互与焦点管理，特别是自定义弹层和多页面跳转。