Aham UI
v7.0.2
供 AI 消费的设计系统 · 活样板
DESIGN SYSTEM · LOCAL-FIRST · macOS AI
Aham UI
为 local-first 的 macOS AI 工具打造的设计系统。一份机读、可消费、自洽的视觉语言——这一页本身就用它做成。
规范层级8层原则→布局
组件~75个全状态变体
分类9类动作→媒体
配色2套亮 / 暗
Token 分层3层原始→语义→组件
HIG 审计补全30项Apple HIG 对照
02
设计性格
北极星:Claude desktop 气质
01
冷色的纸
三层中性灰,无暖调。界面像一张安静的纸,内容是主角,背景退后。
02
克制的金属感
扁平、精确、无材质。深度靠层差不靠模糊;蓝是点缀不是填充。
03
对话式
对标 Claude desktop。安静、留白优先、内容先行,工具退到注意力之外。
清晰
Clarity — 内容是主角,文字易读,层级分明。
克制
Restraint — 默认是「不加」。每个颜色、字体、装饰都要有理由。
层次
Depth — 深度靠三层背景层差,绝不靠材质 / 模糊 / 阴影。
03
色板
三层灰 · 单蓝 · 文字四级 · 极弱语义 · 标 HEX 与对比度
三层表面 Surface
深度的唯一来源——层差,无暖调。
点缀,非填充——logo / 主操作 / 选中 / 链接。
文字四级 Ink
对齐 Apple label 不透明度递减;取值 Aham。
主 / 正文
#262626
15.1:1 ✓
次要
#6E6E6E
5.1:1 ✓
三级 / 占位
#9B9B9B
2.78 · 仅占位
四级 / 分隔
#C4C4C4
1.70 · 不载文字
语义色 Semantic
极弱、仅真风险。禁红黄绿灯。
成功
#5A7A60
警示
#8A7333
风险
#9E3D31
04
文本样式
11 语义样式 · 层级靠字号+字重,单一无衬线,禁衬线
Display
44 / 1.15 / 600 · Display
Aham 设计系统
Title
32 / 1.2 / 600 · Display
Aham 设计系统
Heading
24 / 1.25 / 600 · Display
Aham 设计系统
Subheading
20 / 1.3 / 600 · Display
Aham 设计系统
Aham 设计系统 — UI 与正文主力档,14px 基准。
0123456789 · $1,284.50 · 2026-06-19
05
图标
Lucide(ISC) · 线性单色 currentColor · 分轨:web/Office/邮件用本集,macOS 用 SF Symbols(后续)
1.6尺寸与用法currentColor 继承 ink · 状态=图标+文字双通道
状态双通道 Status = icon + text
<svg class="icon"><use href="design-system/icons/aham-icons.svg#i-search"/></svg>
1.6语义图标51 件 · Lucide(ISC) · 语义名稳定,底层 Lucide 名见 icons.json
通用20
方向6
状态5
媒体与对话7
账户与导航9
其它4
图标来自 Lucide(ISC),许可见 design-system/icons/LICENSE;语义映射 design-system/icons/icons.json。SF Symbols 属 Apple,仅苹果端,不入库。
06
页面布局
第 8 层 · 页面骨架 / 搜索筛选 / 状态 / 预览(网页轨居中,应用轨铺满)
8.4页眉 + 工具栏三段式
页眉 / 工具栏 Page header / Toolbar
8.7状态布局
还没有项目
创建第一个项目后,这里会列出项目与最近活动。
空状态 Empty state
保存失败:网络连接中断,请检查后重试。
设置已保存,变更立即生效。
配额已用 90%,请留意用量。
页面内通知 Notices
8.9预览模式 + 检查器
检查器
| 创建 | 2026-06-18 |
| 修改 | 2026-06-21 |
| 类型 | PNG |
预览 / 检查器 Preview / Inspector
05
组件库
9 大类 · 约 75 个组件 · 每个守 Aham 铁规
2.2
录入 Inputs
13 组件
六月 2026‹ ›
一二三四五六日
16171819202122
日历 Calendar
2.4
数据展示 Data Display
11 组件
| 项目 | 状态 | 时长 | 字数 |
|---|
| 访谈 01 | 已转写 | 12:40 | 3,182 |
| 访谈 02 | 处理中 | 08:15 | 1,940 |
| 合计 | | 20:55 | 5,122 |
数据表 Data table · 只横线 / 数字右对齐 mono / 合计加粗
设计本地优先DOCX
标签 Tag / Chip
▸查看元数据
采样率 48kHz · 单声道 · 本机处理
行内展开 Disclosure
aham export \
--format=pdf
代码块 Code
2.5
可视化 Data Viz
灰阶 + 至多一个蓝高亮
2.6
反馈 Feedback
12 组件
提示转写在本机完成,未上传云端。
注意剩余空间不足 200MB。
警示条 Alert
进行中已完成待处理失败
状态点 Status dot
2.7
浮层 Overlays
8 组件 · 仅此处有阴影
2.9
媒体与对话 Media & Conversation
9 组件 · v6.1
00:02主持人
先过一下这周进度,转写引擎离线化基本完成了。
逐句转写 + 说话人标记 Transcript
会议纪要 · 周会
本周核心进展:本地离线转写已完成,说话人分离跑通。
- 转写引擎离线化 — 已完成
- 声纹跨录音认人 — 进行中
正文排版 Prose
06
铁规速览
全文强约束 · 交付前必过校验
01
状态 = 6px 点 + 文字。绝不用 pill / 徽章 / 色块 / 红黄绿灯。
02
表格只横线。无竖线 / 无整行底色;数字右对齐 mono;表头与合计靠加粗。
03
卡片无边框无阴影。选中态 = 扁平灰 #E7E7E7,不是蓝。
04
蓝只用于 logo / 主操作 / 发送 / 选中。第一眼注意到蓝就超标。
05
静置与 hover 一律无阴影。仅浮层有一层柔和阴影。
06
内容区用 • + 文字。图标仅用于导航 / 发送栏;禁 emoji。
07
一组只一个 primary。主次靠颜色,不靠距离。
08
单一无衬线 Inter。禁衬线;数字用等宽 JetBrains Mono。
07
八层结构
从原则到系统支撑,逐层堆叠
0原则
清晰 / 克制 / 层次。默认是「不加」,每个决定都要有理由。
1基础
颜色 / 字体 / 间距 / 圆角 / 图标 / 动效 / 无障碍 / 国际化 / 隐私。
2组件
约 65 个控件与组件,覆盖全状态与全变体。
3组合规则
同心圆角 / 对齐网格 / 动作主次 / 间距贯穿——把孤立组件变成一套。
4模式
表单 / 列表 / 详情 / 设置 / 仪表盘 / 对话等页型,组件 + 规则拼成。
5介质落地
网页 / macOS 桌面 / Office,一处改源,全端派生更新。
6输入
指针与光标映射 / 标准快捷键 / 焦点分组与键盘导航。
7系统支撑
命名 / AI 消费入口 / 交付校验 / 治理——单一事实源 tokens.json。
08
介质落地
同一套 token,派生到三个方向
CSS 变量 + 文本样式类 + 断点。支持亮 / 暗双色,纯 CSS 即可拼原型。
aham-ui.css.text-*@media
三栏窗口 + 原生菜单栏。暗色跟随系统;取值派生为 Swift 常量。
三栏窗口原生菜单Swift 常量
Word · PPT · Excel。字体映射(雅黑 / Inter / Consolas),HEX 取色,表格只横线;文档不做暗色。
WordPPTExcel