# 设计规范

应用默认沿用主站的纸张贴纸风：浅色背景、白色卡片、淡紫色控件、圆角和轻柔阴影。`platform.ui` 提供基础组件，复杂应用可以使用原生 DOM 和包内 CSS 自定义布局、编辑器与交互。这些组件是起点，不是固定的页面模板。运行时默认表单样式使用低优先级选择器，应用的类名样式可以覆盖它们。

## 颜色与字体

| 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` 文件自动注入，详见[多文件应用包](/doc/packages)。

## 响应式与交互

```css file="styles/app.css"
@media (max-width: 600px) {
  .lo-app-row { flex-direction: column; }
  .lo-pane-side { width: 100%; }
}
```

窄屏避免固定页面宽度。点击区域应至少 44px，主按钮默认为 50px 高；输入区域文字保持 16px，减少手机自动缩放。

为输入框提供标签，为图片提供替代文字，按钮使用清楚的动作名称。原生 DOM 组件允许通过 `setAttribute` 设置必要的 ARIA 属性。

遵循 `prefers-reduced-motion`，不要让页面切换闪白。当前部分组件仍需要应用补充键盘交互与焦点管理，特别是自定义弹层和多页面跳转。