44 lines
1.8 KiB
Markdown
44 lines
1.8 KiB
Markdown
# 弹弹 Web — 设计方向
|
||
|
||
产品视觉基线：**shadcn/ui Dashboard**（媒体五页侧栏/顶栏导航、卡片网格、中性灰阶）；模板深空工业 token 仍可用于非媒体页，但 **`@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**：服务端输出布局 / head / 导航；页面主体（`components/pages/*Body`）`client:load` 在浏览器渲染
|
||
- 动效只在浏览器 effect 内绑定；尊重 `prefers-reduced-motion`
|
||
|
||
## 范围
|
||
`tokens.css` · `globals.css` · `AppLayout.astro` · `ThemeSwitch` · `UserMenu` · `home` / `dashboard` 视图 · `ui/*`
|