neko233-com kanban233 UI — Apple 审美规范
设计原则
- 清晰 — 层级靠字号/字重/颜色，不靠粗边框
- 克制 — 单一强调色（系统蓝
#0A84FF），状态色仅用于 badge/危险操作 - 深度 — 背景分层 + 轻微阴影 + 毛玻璃顶栏，不用霓虹渐变
- 动效 — 150–250ms ease，hover/active 微反馈
字体
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
-webkit-font-smoothing: antialiased;
| 用途 | 大小 | 字重 |
|---|---|---|
| 大标题 | 28px | 700 |
| 区块标题 | 17px | 600 |
| 正文/按钮 | 15px | 400–500 |
| 说明/caption | 13px | 400，secondary 色 |
色板（Dark）
| Token | 值 | 用途 |
|---|---|---|
--bg-base |
#000000 |
页面底 |
--bg-elevated |
#1c1c1e |
卡片/侧栏 |
--bg-secondary |
#2c2c2e |
列/输入框 |
--bg-tertiary |
#3a3a3c |
分段控件底 |
--label-primary |
#ffffff |
主文字 |
--label-secondary |
rgba(235,235,245,0.6) |
次要文字 |
--tint |
#0a84ff |
主操作 |
--separator |
rgba(84,84,88,0.65) |
分隔线 |
组件约定
- 顶栏：
backdrop-filter: saturate(180%) blur(20px)+ 半透明底 - 主导航：
.segmented-control分段控件，不用独立描边 pill - 按钮：
.btn.primary填充蓝；.btn.ghost纯文字；.btn灰色填充 - 卡片/列：无边框或极淡 separator，圆角 12–16px
- 对话框：
<dialog>+::backdrop模糊；禁止alert/confirm/prompt - Toast：右上角，毛玻璃小条
禁止
- 高饱和霓虹渐变、多重阴影堆叠
- 原生
alert/confirm/prompt - 纯
#4f8cff等非 Apple 系统色作为主色 - Segoe UI 作为首选字体
文件
web/styles.css 设计 token + 组件
web/login.html 认证页
web/board.html 工作台
web/common.js uiPrompt / uiConfirm / uiToast
修改 UI 时只动 web/，保持 class 名稳定以免破坏 board.js 选择器。