个人工作台视觉参考板
2026-10-11 实拍。25 个通用参考外加暗色、不素两组共 11 个补充参考，来自官网、产品页或设计规范的真实截图，每张附自动取色与形态观察。截图只作内部设计参考，版权归各产品方，不对外发布。数据截止 2026-10-11（页面为当日抓取，营销页可能随时改版）。
读数说明：取色是对裁图像素的统计（色相聚类、面积占比），能反映「底色／面板／文字／强调」的大致范围；圆角、阴影、描边为目测估计，未逐一读取源码；部分裁图含营销背景（卡片上有标注），其底色与强调占比偏大，不能当成产品 UI 本身的色值。
一、我们现在的样子（教师版，亮／暗）
1234567
12389
- 五种填色卡拼成一张布。桃 #F7E0C9、柠檬 #ECEACC、浅蓝 #DAE7F3、浅绿 #D4EADB、灰 #E7E5DF，明度 L* 全在 90.5～92.1（极差 1.6），区分只靠色相，眼睛读不出主次。
- 柠檬卡其（#ECEACC，色相 106°）是「黄叠灰」，白晨已点名的脏色。待办卡、课表卡因此发闷。
- 右侧「等你定」整栏填桃色。最重要的一栏被染成最大一块桃色，卡内的白底子卡与外层桃色再叠一层，三层颜色互相抢。
- 层次先降后升，来回折返。页面 L*95.8 → 卡 L*90.9 → 卡内半透明白（rgba 255,253,247,.52 叠在卡上约 L*96.5）又回到页面底的亮度，内层面板读成「洞」而不是「凸起」。要说明：页面与卡的明度差 5.2 本身在参考范围内（Things 4.5、Notion Calendar 3.5、Todoist 3.8），所以问题不在差得太小，而在这一步明度差被五种色相分摊、卡内又折返；另外全站无阴影（0 处）、无描边，层次完全交给颜色。
- 黑色药丸按钮（记下、确认、复制）：整页最重的一块黑，却出现在每张卡里；主次不分。
- 标签、圆点、进度条、徽标叠用。一张卡里同时有彩色圆点、药丸标签、进度条、角标（如「落后 1 课时」），强调手法至少四种。
- 演示控制带厚重。底部约 100px 的黑色带占了视口 11%，并自带一套黄色主按钮，抢走桌面注意力。
- 字号阶梯太碎。可见文字用了 10.5／11／11.5／12／12.5／13／13.5／14／14.5／15／20／30 共 12 档，10.5～15px 之间就有 10 档、相邻差仅 0.5px，层级读不出来。
- 暗色把同一明度的彩色铺满。棕 #4E331A、橄榄 #3D3A15、深蓝 #1A3C55、灰褐 #3A3935 的 L* 全是 23.9–24.0，色度 19～23（灰褐除外）；橄榄与棕是白晨 0920 点名的「脏」暗色（回修七只接受琥珀）。
青年版同样的问题（缩略）
二、暗色：顶级产品怎么做，我们差在哪里
取样范围是各产品官网自带的暗色界面或应用截图；L*、C* 为裁图内的聚类取样。
| 对象 | 页面底 L* | 卡面 L* | 相邻一级的台阶 | 卡面色度 C* |
|---|---|---|---|---|
| Linear | 8.3 | 10.5～13.6 | +2.2、+3.1 | ≤1.5 |
| Obsidian | 7.8 | 11.7～15.4 | +3.9、+3.7 | 0 |
| Resend | 0.8 | 3.5～8.6 | 每级 +2.5～2.7 | 0 |
| Oura | 9.2 | 11.1～15.9 | +1.9、+3.0、+1.8 | 2～3 |
| Mercury | 11.6 | 13.5～26.2 | 每级 +2～3 | 7.5～9.5（统一靛调） |
| Copilot Money | 2.1 | 3.3～3.9 | 每级约 +1 | 10～14（统一海军蓝） |
| 我们（暗色） | 5.8 | 23.9 | 一步 +18 | 19～23.5（棕、橄榄、蓝各一色） |
- 台阶一步跳到底。页面 L*5.8，彩卡直接 L*23.9（+18），参考里相邻一级只高 2～4，卡面最亮的也不过 L*15～26（Mercury 的玻璃）。结果卡是「一块块亮色板」，不是「暗里浮起的面」。
- 卡面带强色。棕 #4E331A（C*22.5）、橄榄 #3D3A15（C*23.5）、深蓝 #1A3C55（C*19）；参考卡面色度 ≤3，或整页统一一个冷调（Copilot、Mercury）。
- 暖色在低明度必成棕与橄榄。橙色降到 L*24 就是棕，黄降到 L*24 就是橄榄，这是色彩规律不是调参问题；参考里暖色（Raycast 红、Copilot 橙标签）只出现在 L*≥26 的发光小点里。
- 没有光，没有边。大卡 0 处阴影、0 处描边、0 处背景图或渐变，全页平涂；Raycast、Resend、Mercury 的质感都来自一个光源与 1px 高光边，我们的暗色缺这一层，所以「闷」。
- 强调色亮度不够。暗底上有效的强调色 L*≥40、C*≥50（Copilot 绿 L*52.7、Mercury 靛 L*41、Reflect 紫 L*32）且面积 <6%；我们取样的暖色面积约 8%、L*39、C*22，是低饱和的棕。
- 四块卡同亮度。四块卡 L* 全是 23.9～24.0，层次只能靠色相；参考是 3～5 级明度阶梯。
Obsidian 暗色
可借鉴纯中性（C* 0）石墨：#171717 → #1F1F1F → #272727，卡片只比页面亮一档；强调紫仅在按钮。
不适合紫是品牌色，不照搬。
Resend 暗色·光感
可借鉴近纯黑底（L* 0.8），光来自一个斜射光源与 3D 物件，卡面用 1px 白描边；全页无彩色。
不适合物件是品牌资产，不适合工作台。
Raycast 暗色·光感
可借鉴底 L* 2 的近黑，选中态只提亮一档；红光仅在背景光斑，是「光」不是「面」。
不适合红光属白晨不要的红紫风；只借「光不是面」。
Copilot Money（界面） 暗色·数据
可借鉴整个暗色界面统一一个冷调（海军蓝 C*10～14，L*2～4），卡面只比底亮一两级；红绿数据色出现在小面积图表与徽章里。
不适合底偏蓝黑，教师用户未必喜欢。
Mercury（暗色面板放在照片上） 暗色·玻璃
可借鉴靛蓝灰面板（L*11～21，C*8）做成半透明玻璃浮在风景照上，五级阶梯每级 +2～3；照片给景深，面板本身不花。
不适合整体偏金融，信息密度过高。
Oura（应用内暗色） 暗色·大数字
可借鉴石墨 #1A1A1D → #242426（C*2～3），一个「5,203」大数字加一道弧线就是焦点；各屏用一种低饱和色（紫、青、绿）区分，而不是卡片填色。
不适合应用截图是五屏并排，不是桌面。
三、「不素」：丰富而不乱靠什么
我们首屏的实测（1440×900，教师版亮色）：81 个文字节点；最大字号 30px，且只用在一个「0」上，页面标题「今天」20px；图标 30 个，中位数 14px、最大 30px；图片、视频、画布 0 个；背景图或渐变 0 处；正在运行的动画 0 个。素的原因就在这里：没有主视觉、没有大数字、没有小图表、没有材质、没有景深、不动。
- 首屏没有焦点。参考（Momentum、Oura、Dia）一屏只放一个大物，其余留白；我们是一排 chips 加三列文字卡，每块权重差不多。
- 没有大数字。「下一节 08:00」「待办 5 件」「家长会还有 2 天」被做成 14px 的 chip；参考把这类数字放大到正文的 3 倍以上（Oura 的 5,203、Copilot 的 $1,000、Apple 小组件的 247.77）。
- 没有小图表。只有一条进度条；参考每张卡有折线、柱、环或热力图中的一种。
- 尺寸节奏单调。近乎等宽三列；参考是 1×1、2×1、1×2 混排，大卡放焦点、小卡放信号（Copilot bento、Apple 小组件 S／M／L）。
- 图标只是点缀。14px 线性图标，没有存在感；参考的图标要么大而有色块底（钉钉、Fantastical），要么成为数据的一部分（Copilot 的类别徽章）。
- 没有材质与景深，也不动。平涂、0 阴影、0 动画；参考有光、玻璃、纹理、景深，并带缓慢的背景运动（Apple 与 Dia 的首屏截图里有循环动画的暂停键）。
Momentum（新标签页仪表盘） 首屏主视觉
可借鉴一张风景照作满屏背景，正中是大时钟与一句话，右上一个小天气与右下一小块待办；其余全是空白。丰富来自照片与大字，不来自模块数量。
不适合照片会干扰读字，要加暗层或磨砂。
Copilot Money（bento 卡片） 尺寸节奏＋数据
可借鉴卡片有 1×1、2×1、1×2 多种尺寸，每张一个小图表（折线、柱、列表）或大数字；卡面统一，彩色只在图表线与标签里。
不适合卡内有 5 种彩色标签，要收到 2 种。
Apple macOS 27（玻璃面板） 材质与光
https://www.apple.com/os/macos/
可借鉴米金色光场里的玻璃面板，质感来自背后的光与面板边缘高光。
不适合需要背景光场才成立。
Apple 小组件三种外观 图标与尺寸节奏
https://developer.apple.com/design/human-interface-guidelines/widgets
可借鉴一个组件同一内容给三种外观；大数字（247.77）占卡面一半，小图表是一条线，其余是极小的字。
不适合只是单个组件。
Granola（纸面＋纹理） 纹理与层叠
可借鉴暖白纸面窗口压在黄绿色块与颗粒纹理上，窗口之外有「桌面」感；质感来自纹理与错位层叠。
不适合色块偏鲜，需要降到一角。
Bonjourr（起始页） 首屏主视觉
可借鉴整屏一张按时段变化的照片，中央是大时钟、「Good Morning」与一行天气，其余全空；字加轻微阴影而不加卡片。
不适合照片依赖用户选择；工作台要叠暗层保证读字。
Bonjourr（照片底＋问候） 氛围背景
可借鉴同一布局换一张照片（野狼），问候与天气不变：版式固定、氛围可换；官网明说「照片情绪随一天时段变化」。
不适合暗色照片上白字对比度要逐张核对。
Apple 健康／手表卡片 图标与卡片
https://www.apple.com/ios/health/
可借鉴白卡一排，每卡一个大图（手表、红心图标）加两行字，背景是同一粉色渐变；图标是大而有色的主角。
不适合营销排版，不是应用内。
四、参考（每张：截图、来源、取色、形态、借鉴与不适合）
Things 3 日历／待办
https://culturedcode.com/things/
页面底#FEFEFF · L*99.8
面板#F1F2F4 · 26.6%
主文字#303336
次文字#A2A3A4
强调#5072B2 · 饱和像素 0.3%
可借鉴中性冷白底、几乎无色，唯一强调是小面积蓝；层次全靠留白和字重。
不适合没有「状态」概念，信息密度低，撑不起我们这种多模块桌面。
Sunsama 日历／待办
页面底#FDE0C9 · L*91.0
面板#F9F5F2 · 41.4%
主文字#4D4B45
次文字#8D8C8A
强调#A483FF · 饱和像素 4.1%
可借鉴整页只有一个橙色强调；任务块的彩色限定在日历时间块，卡片本体是中性白。
不适合营销页桃色渐变大背景不能搬进工作台。
Amie 日历／待办
页面底#FAFAFA · L*98.2
面板未取到
主文字#5C5C5C
次文字#9C9C9C
强调#6391B9 · 饱和像素 13.8%
可借鉴近白底（L*98）、黑字、单一亮蓝按钮；标签用小号灰字，没有彩色标签。
不适合整体偏文档，缺少「桌面」感。
Linear 暗色标杆
页面底#1B1C1D · L*10.1
面板#111213 · 10.0%
主文字#A3A4A4
次文字#5A5D62
强调未取到
可借鉴暗色层次来自 #111／#1B 两级明度加描边，不靠色相；只有极少的状态色点。
不适合纯黑冷灰偏工程师气质，与教师／青年用户不符。
Raycast 暗色／玻璃
页面底#07080A · L*2.2
面板未取到
主文字#E5E5E5
次文字#535354
强调#760B16 · 饱和像素 1.9%
可借鉴近黑底（L*2）＋单一红光；列表项没有填色，选中态只用一块低亮度提亮。
不适合红色大面积光斑属于品牌画面，我们不能照搬（白晨不要红紫 AI 风）。
Apple 小组件三种外观（HIG） Apple 小组件
https://developer.apple.com/design/human-interface-guidelines/widgets
页面底#FFFFFF · L*100.0
面板#1A1A1A · 6.7%
主文字#1A1A1A
次文字#8A7A6E
强调#8A6747 · 饱和像素 13.3%
可借鉴官方给出的三种外观：全彩／透明（去饱和、加半透明与高光）／着色（去饱和后统一一个色）。说明状态色在系统层面就是「去饱和＋单一着色」。
不适合只是单个小组件，没有整桌面的版式。
Apple 小组件玻璃图块（HIG 首图） Apple 小组件
https://developer.apple.com/design/human-interface-guidelines/widgets
页面底#FFFFFF · L*100.0
面板未取到
主文字未取到
次文字未取到
强调#FE7363 · 饱和像素 54.5%
可借鉴底部是一面渐变，图块统一为同一种半透明白——图块之间靠位置、尺寸区分，不靠各自换色。
不适合底图的橙粉渐变本身偏鲜，不能作为我们的桌面底。
Apple macOS 27 / Siri AI 玻璃面板 Apple 小组件
https://www.apple.com/os/macos/
页面底#342A22 · L*17.9
面板#615852 · 5.5%
主文字#E3D5C3
次文字#746C63
强调#7C5D47 · 饱和像素 0.2%
可借鉴暗底上的玻璃：质感来自背后的光和边缘高光，面板本身没有颜色。
不适合需要光场才成立，静态截图里也有大量米金色。
Notion Calendar 日历／待办
https://www.notion.com/product/calendar
页面底#FEFEFE · L*99.8
面板#F5F4F3 · 46.2%
主文字#010101
次文字#8C8C8B
强调#63B8E8 · 饱和像素 0.5%
可借鉴米白卡片放在近白页面上（ΔL*≈5），内部用单一蓝作强调，层次靠明度差。
不适合页面里同时有多色图标，色彩偏多。
Akiflow 日历／待办
页面底#FBFCFD · L*99.0
面板#EBF4FB · 18.9%
主文字#010101
次文字#73767B
强调#A22FFE · 饱和像素 1.1%
可借鉴近白底（L*99）上，紫色只用在主按钮与一个日程块，其余全中性。
不适合AI 流程图里堆了很多第三方 logo，视觉嘈杂。
Todoist 日历／待办
页面底#FDFCFB · L*99.0
面板#F9EFEB · 10.7%
主文字#242324
次文字#949394
强调#E46359 · 饱和像素 0.2%
可借鉴暖白底（#FDFCFB）加一个珊瑚红；列表行只有 1px 下划线，没有填色卡片。
不适合界面信息太少，不是桌面。
Capacities 笔记／文档
页面底#FFFFFF · L*99.9
面板未取到
主文字#1B1B1D
次文字#949493
强调#FCDC89 · 饱和像素 0.2%
可借鉴近白底（L*99.9），强调只有一个暖黄（标题下划线与小标签），其余灰黑。
不适合整体偏文档，没有看板。
Tana 笔记／文档
页面底#EAC6D1 · L*83.1
面板#FFFFFF · 14.0%
主文字#030101
次文字#6D6B6A
强调#956C3C · 饱和像素 17.6%
可借鉴「彩色在背景、内容在白卡」的分工：彩色渐变只出现在卡片外，卡内永远白底黑字。
不适合渐变背景（粉紫到黄）正是要避开的 AI 感。
飞书日历 国内产品
https://www.feishu.cn/product/calendar
页面底#F3F5FB · L*96.7
面板#FEFEFE · 44.2%
主文字#242E4A
次文字#8A92A5
强调#374C79 · 饱和像素 3.5%
可借鉴近白冷底（#F3F5FB）加单一蓝；日程块用同一蓝系的不同透明度。
不适合信息密度偏企业，偏冷。
滴答清单 国内产品
页面底#FFFFFF · L*99.9
面板#F3F3F3 · 14.1%
主文字#5C5C5C
次文字#9C9C9C
强调#5D8BFA · 饱和像素 0.1%
可借鉴白底、单一蓝强调；日历里的日程块用低饱和浅蓝、浅绿、浅黄，面积小且不叠字。
不适合页面里奖章与插画较多，视觉噪音大。
flomo 浮墨笔记 国内产品
页面底#F2F2F2 · L*95.5
面板#FDFEF6 · 5.0%
主文字#010101
次文字#8B8B8B
强调#55D590 · 饱和像素 1.0%
可借鉴白底、单一绿；绿只用在按钮与热力图方块，其他全灰白黑。
不适合界面截图偏小，细节不清。
钉钉 国内产品
页面底#FFFFFF · L*99.9
面板#EEF7FD · 30.4%
主文字#010101
次文字#939494
强调#439CFA · 饱和像素 1.7%
可借鉴每个图块自带不同的浅色，但亮度几乎一致且底色极浅（L*>96），不浑浊。
不适合入口多，图标彩色多，我们是要少色。
Dia（The Browser Company） 浏览器／AI
页面底#FBFAF6 · L*98.2
面板未取到
主文字#000000
次文字#959492
强调#EBB82A · 饱和像素 52.8%
可借鉴奶油白界面＋衬线大标题，温暖但没有多色拼贴；强调色（黄）只出现在背景光和按钮里。
不适合黄底大面积属营销页，工作台里黄不能超过一角（白晨 0920 黄色预算）。
Arc 浏览器／AI
页面底#FDFDFD · L*99.5
面板#F2F2F9 · 6.5%
主文字#5B5B74
次文字#7B7A94
强调#3935C9 · 饱和像素 48.3%
可借鉴整个界面只染一个主题色（侧栏），内容区仍是中性。
不适合营销页饱和度过高，不是工作界面。
Craft 笔记／文档
页面底#8ECDEC · L*79.2
面板#EBF2F7 · 8.6%
主文字#1D1D1D
次文字#545D61
强调#FBE38E · 饱和像素 4.1%
可借鉴一个色相一张卡，描边与填充同色系不同明度；配色有「手作」味。
不适合彩色卡片多，我们要避开的正是这种拼贴；仅适合内容卡片。
Reflect 笔记／文档
页面底#030014 · L*0.7
面板未取到
主文字#FDFBFE
次文字#524D64
强调#4B2A8F · 饱和像素 7.5%
可借鉴深靛底（L*0.7）加单一紫光，面板只靠描边不靠填充。
不适合紫光是品牌标志，属白晨点名不要的「红紫 AI 风」。
Superhuman 邮件／AI
页面底#3D2942 · L*19.9
面板#03020B · 4.7%
主文字#FEFEFF
次文字#968D99
强调#6384BE · 饱和像素 48.5%
可借鉴玻璃浮层背后用一整张天空图，层次靠模糊，不靠填色；浮层内部全是中性白灰。
不适合背景图（天空与人像）占面积大，不适合信息密集的桌面。
Motion 日历／待办
页面底#F5F5FD · L*96.8
面板#FFFFFF · 7.9%
主文字#2B2D31
次文字#727379
强调#5F7FE5 · 饱和像素 1.9%
可借鉴浅灰白底（#F5F5FD）＋蓝色主按钮，主按钮之外几乎无色。
不适合同页下方的项目甘特图用红、蓝、绿三种淡色表示阶段，对比卡用粉红渐变，是我们要避开的做法。
Fantastical 日历／待办
https://flexibits.com/fantastical
页面底#FEFEFE · L*99.7
面板#EFEFF0 · 11.0%
主文字#111111
次文字#7B7B7C
强调#5FC9F9 · 饱和像素 20.0%
可借鉴白底（#FEFEFE）加黑色大标题；彩色集中在图标与装饰块，文字区全中性。
不适合营销页的玻璃彩块与我们的桌面不是一回事。
Structured 日历／待办
页面底#FFA7A0 · L*76.9
面板未取到
主文字#2D2D2D
次文字#5F5352
强调#D68278 · 饱和像素 5.8%
可借鉴整页只有桃红与灰蓝两色，且互为冷暖对比，不再引入第三色。
不适合桃红大底在工作界面里会过暖，且会与我们现在的「桃」撞色。
五、对照数据（自动取色，裁图范围）
| 对象 | 页面底 | 面板 | ΔL* | 主文字 | 强调（占饱和像素） | 色相大色块数 |
|---|---|---|---|---|---|---|
| 我们现在：教师版·亮色 | #F4F3EF | #E6E4DE | -5.2 | #1E1D1A | #D1B44F · 0.2% | 3 |
| 我们现在：教师版·暗色 | #131412 | #3B3A35 | 18.2 | #EEECE5 | #6B5036 · 11.3% | 3 |
| Things 3 | #FEFEFF | #F1F2F4 | -4.5 | #303336 | #5072B2 · 0.3% | 0 |
| Sunsama | #FDE0C9 | #F9F5F2 | 5.6 | #4D4B45 | #A483FF · 4.1% | 1 |
| Amie | #FAFAFA | — | — | #5C5C5C | #6391B9 · 13.8% | 1 |
| Linear | #1B1C1D | #111213 | -4.6 | #A3A4A4 | — | 0 |
| Raycast | #07080A | — | — | #E5E5E5 | #760B16 · 1.9% | 1 |
| Apple 小组件三种外观（HIG） | #FFFFFF | #1A1A1A | -90.6 | #1A1A1A | #8A6747 · 13.3% | 2 |
| Apple 小组件玻璃图块（HIG 首图） | #FFFFFF | — | — | — | #FE7363 · 54.5% | 2 |
| Apple macOS 27 / Siri AI 玻璃面板 | #342A22 | #615852 | 20.2 | #E3D5C3 | #7C5D47 · 0.2% | 1 |
| Notion Calendar | #FEFEFE | #F5F4F3 | -3.5 | #010101 | #63B8E8 · 0.5% | 1 |
| Akiflow | #FBFCFD | #EBF4FB | -3.2 | #010101 | #A22FFE · 1.1% | 1 |
| Todoist | #FDFCFB | #F9EFEB | -3.8 | #242324 | #E46359 · 0.2% | 2 |
| Capacities | #FFFFFF | — | — | #1B1B1D | #FCDC89 · 0.2% | 1 |
| Tana | #EAC6D1 | #FFFFFF | 16.8 | #030101 | #956C3C · 17.6% | 4 |
| 飞书日历 | #F3F5FB | #FEFEFE | 3.0 | #242E4A | #374C79 · 3.5% | 0 |
| 滴答清单 | #FFFFFF | #F3F3F3 | -4.0 | #5C5C5C | #5D8BFA · 0.1% | 0 |
| flomo 浮墨笔记 | #F2F2F2 | #FDFEF6 | 3.7 | #010101 | #55D590 · 1.0% | 0 |
| 钉钉 | #FFFFFF | #EEF7FD | -3.1 | #010101 | #439CFA · 1.7% | 1 |
| Dia（The Browser Company） | #FBFAF6 | — | — | #000000 | #EBB82A · 52.8% | 1 |
| Arc | #FDFDFD | #F2F2F9 | -3.7 | #5B5B74 | #3935C9 · 48.3% | 2 |
| Craft | #8ECDEC | #EBF2F7 | 16.0 | #1D1D1D | #FBE38E · 4.1% | 4 |
| Reflect | #030014 | — | — | #FDFBFE | #4B2A8F · 7.5% | 1 |
| Superhuman | #3D2942 | #03020B | -19.2 | #FEFEFF | #6384BE · 48.5% | 3 |
| Motion | #F5F5FD | #FFFFFF | 3.1 | #2B2D31 | #5F7FE5 · 1.9% | 0 |
| Fantastical | #FEFEFE | #EFEFF0 | -5.2 | #111111 | #5FC9F9 · 20.0% | 0 |
| Structured | #FFA7A0 | — | — | #2D2D2D | #D68278 · 5.8% | 1 |