乍一看，苹果的 HIG 与谷歌的 Material Design 3 似乎是背道而驰的两种设计哲学。一个克制、微妙、甚至略显朴素；另一个则充满活力、层次分明、富有情感表达。但当你凑近端详 — 尤其是当你试图用两者共同构建什么的时候 — 就会发现它们共用的 DNA 远比你想象的要多。
共同的基础
两种系统都将无障碍设计（Accessibility）置于首位，提倡突出内容本身，并采用「层叠（Layering）」的方式来传达层级结构。最重要的是，两种系统都将设计 Token 作为最原子的视觉单元。通过将色调、形状和动效映射为命名值，我们能够构建出对这两个世界都感到「原生」的界面。
它们的分歧仅在于执行层面，而非设计原则：
| 维度 | Apple HIG | Material 3 Expressive |
|---|---|---|
| 色彩 | 基于不透明度的文本层级 | 色调调色板系统（primary/secondary/tertiary） |
| 排版 | SF Pro，精准的光学尺寸 | 可变字体，富有表现力的字号度量（Google Sans Flex） |
| 容器表面 | 半透明材质（液态玻璃） | 带有色调覆盖的仰角高度（Elevation） |
| 动效 | 弹簧物理引擎，微妙细腻 | 强调型缓动曲线，大胆瞩目 |
| 形状 | 连续的圆角矩形（超椭圆） | 圆角 Token 系统（xs/sm/md/lg/xl） |
它们如何完美互补
色彩与容器表面
HIG 倾向于使用基于不透明度的文本颜色（如 rgba(0,0,0,0.88)）和半透明材质（glassmorphism），这能让它自然地融入任何背景。Material 3 则使用从种子色生成的色调调色板 — 丰富、和谐且系统性推导。
在 M3E 中，两者被融合：HIG 的液态玻璃容器负责结构布局装饰（Header、侧边栏、导航胶囊），而 Material 3 的动态色调强调色驱动状态高亮、交互表面和品牌表达。毛玻璃效果通过 backdrop-filter: blur(20px) saturate(1.8) 实现 — 这是一个经过精心选择的数值，在保留色彩鲜活度的同时创造深度感。
动效与排版
HIG 的弹簧动效感觉非常物理且具有触感，极适合微交互（如切换开关、颜色点、胶囊悬停状态）。Material 3 的强调缓动曲线（cubic-bezier(0.2, 0, 0, 1)）具有很强的方向引导感 — 非常适合页面过渡和布局位移。
本博客使用 CSS 自定义属性作为动效 Token（--motion-ease-emphasized、--motion-duration-short），允许缓动系统独立主题化。基础动效系统无需任何 JavaScript 运行时。
排版：混合字体栈
字体系统将 HIG 的精准与 M3E 的表现力配对：
- 标题：Google Sans Flex（可变字体，字重 100–900）— 富有表现力的比例尺，配合紧凑字距
- 正文：系统字体栈，macOS 上优先使用 SF Pro — 符合 HIG 的可读性标准
- 代码：Prism 驱动的服务端分词 — 零客户端 JS，语法颜色来自 Material 3 色调调色板
M3E Token 架构
这种融合通过 @m3e/framework 工作区包中定义的三层 Token 系统实现：
Reference → System → Component
↓ ↓ ↓
原始值 语义角色 组件作用域
(hex, px) (角色映射) (组件引用)Reference Token 是原始值 — --ref-blue-500: #3B5CF6;。System Token 将它们映射为语义角色 — --sys-color-primary: var(--ref-blue-500);。Component Token 进一步限定作用域 — --btn-bg: var(--sys-color-primary);。
在此之上，Layout Token（--layout-base-unit: 11 = 44px）充当唯一的缩放铰链：每个布局尺寸都通过 calc() 链从这一基准值派生。改一个值，整个空间系统随之缩放。
伟大的融合
其最终产物并不是一次妥协退让 —— 而是一场完美的融合。HIG 的克制锚定了整体构图；Material 3 的活力为其注入生命。液态玻璃 Header 感觉 distinctly Apple；色调色卡和圆角 Token 形状感觉 distinctly Material。两者结合，感觉像是一种全新的东西。
本博客即是概念验证。每一页都是由 Astro 编译的静态 HTML — 视觉融合被编译为纯 CSS 自定义属性和 backdrop-filter 声明。无需沉重的运行时，没有框架锁定。唯有 Token、图层和细致的技艺。