About关于我
Hi, I’m the creator of M3E — a personal blog where design systems theory meets frontend craft.
M3E stands for Material 3 Expressive × Apple HIG — a design language that fuses HIG’s restrained precision with Material 3’s expressive vitality. The blog itself is the sandbox where this fusion takes shape.
Design Philosophy
- Tokens first, always. Every visual decision — color, type, spacing, motion — lives in CSS custom properties. No exceptions.
- Progressive enhancement. Pages are fully functional without JavaScript. Interactivity is layered on as isolated “islands” where needed.
- Accessibility by default. WCAG 2.1 AA contrast, keyboard navigation, and screen-reader semantics are built in, not bolted on.
- Motion with purpose. Animation guides attention and reinforces spatial relationships — never decorative.
Colophon
| Layer | Tooling |
|---|---|
| Framework | Astro 5 — content-first, zero-JS-by-default |
| Interactivity | Svelte 5 — reactive islands (theme toggle, Monet switcher, music player) |
| Styling | Tailwind CSS v4 + daisyUI v5 — utility layer + component primitives |
| Design Tokens | @m3e/framework (workspace package) — 3-layer token architecture: Reference → System → Component |
| Color System | @material/material-color-utilities — Material 3 tonal palettes + dynamic Monet extraction |
| Code Highlighting | Prism — server-side tokenization, zero client JS |
| Typography | Google Sans Flex + Noto Sans/Serif (JP / SC / TC) — variable font stacks |
| Hosting | Edge-first static deployment |
The M3E Design System
The @m3e/framework package is the project’s shared design-system workspace. It publishes semantic CSS custom properties organized into layered token families:
- Reference tokens — raw hex, px, rem values (e.g.
--ref-blue-500: #3B5CF6) - System tokens — semantic role mapping (e.g.
--sys-color-primary: var(--ref-blue-500)) - Component tokens — scoped to each UI element (e.g.
--btn-bg: var(--sys-color-primary)) - Layout tokens —
--layout-base-unit: 11(44px) as the single scaling hinge - Pill tokens —
--pill-*scale (sm/md/lg) pairing capsule height, font-size, and horizontal padding
The visual identity merges HIG’s liquid-glass surfaces and spring-curve motion with Material 3’s tonal palette system and corner-token shapes. The result: interfaces that feel simultaneously precise and alive.
你好，我是 M3E 的创作者 —— 一个关于设计系统理论与前端技艺交汇点的个人博客。
「M3E」即 Material 3 Expressive × Apple HIG 的融合设计语言 — 将 HIG 的克制精准与 Material 3 的表现活力融为一体。这个博客本身就是这种融合成形的实验场。
设计哲学
- Token 优先，始终如此。 每一个视觉决策 — 颜色、字体、间距、动效 — 都存在于 CSS 自定义属性中，无一例外。
- 渐进增强。 页面在无 JavaScript 时完全可用，交互性按需以隔离「岛屿」叠加。
- 无障碍内建。 WCAG 2.1 AA 对比度、键盘导航和屏幕阅读器语义是内建的，而非事后附加。
- 有目的的动效。 动画引导注意力、强化空间关系 — 绝非装饰。
结构记事
| 层级 | 工具 |
|---|---|
| 框架 | Astro 5 — 内容优先，默认零 JS |
| 交互 | Svelte 5 — 响应式岛屿（主题切换、Monet 取色器、音乐播放器） |
| 样式 | Tailwind CSS v4 + daisyUI v5 — 工具层 + 组件原语 |
| 设计 Token | @m3e/framework（工作区包）— 三层 Token 架构：Reference → System → Component |
| 色彩系统 | @material/material-color-utilities — Material 3 色调调色板 + 动态 Monet 提取 |
| 代码高亮 | Prism — 服务端分词，零客户端 JS |
| 字体排版 | Google Sans Flex + Noto Sans/Serif（JP / SC / TC）— 可变字体栈 |
| 部署 | 边缘优先的静态部署 |
M3E 设计系统
@m3e/framework 包是本项目的共享设计系统工作区。它发布按层级组织的语义化 CSS 自定义属性：
- Reference Token — 原始 hex、px、rem 值（如
--ref-blue-500: #3B5CF6） - System Token — 语义角色映射（如
--sys-color-primary: var(--ref-blue-500)） - Component Token — 作用域限定至各 UI 元素（如
--btn-bg: var(--sys-color-primary)） - Layout Token —
--layout-base-unit: 11（44px）作为唯一缩放铰链 - Pill Token —
--pill-*比例尺（sm/md/lg），配对胶囊高度、字号与水平内边距
视觉识别将 HIG 的液态玻璃表面和弹簧曲线动效，与 Material 3 的色调调色板系统和圆角 Token 形状融为一体。结果：界面同时感觉精准而生动。
Monet Dynamic Color
Chips
Buttons (M3 State Layer)
Text Fields
Surface Containers (Tonal Elevation)
Pull Quotes
“A personal blog exploring the intersection of design, technology, and thoughtful living.”
“探讨在网页设计中，苹果克制的优雅与 Material 3 表达的活力之间意想不到的和谐关系。”
“Design is not just what it looks like and feels like. Design is how it works.”
“设计不仅仅是外表和感觉。设计是它是如何工作的。”