app-template/DESIGN.md

44 lines
1.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# App Template — 设计方向
脚手架视觉基线:**深空工业中控终端**。不绑定具体产品叙事;下游可在此 palette / type 上换肤,但 **`@app/design-tokens` 色板 token 路径约定不变**(改值可以,改结构需同步全局)。
## Style anchor
深色工业 HUD / 控制台:近黑底、信号黄强调、发丝线框、等宽铭牌。
## Palette
| 角色 | 值 |
|------|-----|
| 背景(近黑) | `#0E0F0E` |
| 表面 | `#191919` |
| 下沉 | `#121212` |
| 线框 | `#2E2E2E` |
| 线框(强) | `#35373C` |
| 墨色 | `#F2F2F2` |
| 弱化文字 | `#999999` |
| 更弱文字 | `#666666` |
| 强调(信号黄) | `#FFFA00` |
| 信号绿 | `#00FFA2` |
| 信号品红 | `#FF1AAC` |
| 亮色背景(对照) | `#FAFAFA` |
## Typography
- Display:`Space Grotesk` + `Noto Sans SC` 900
- 正文 CJK:`Noto Sans SC` / `PingFang SC`
- 等宽:`JetBrains Mono`(编号、快捷键、路径、状态读出)
- 字阶:10–11px 铭牌 / 13–14px 正文 / 28–48px 标题;标签全大写 + `0.16–0.22em` 字距
## Layout
- 左侧固定竖栏(品牌 + 导航 + 主题)
- 内容壳 + 顶栏;分隔用点线 `u-dotline` / 虚线
- 按钮 `u-btn`;卡片 `u-card`;间距 4px 节奏;小圆角 3–12px
- **克制装饰**:禁贴纸堆叠;色彩以 tokens 为准
## Interaction
- 主题:系统 / 亮 / 暗(`app-theme`)
- 语言:cookie `app-lang` + Accept-Language
- SSR 输出结构与内容;动效只在浏览器 effect 内绑定
- 尊重 `prefers-reduced-motion`
## 范围
`tokens.css` · `globals.css` · `AppLayout.astro` · `ThemeSwitch` · `UserMenu` · `home` / `dashboard` 视图 · `ui/*`