便当仪表盘
Bento Dashboard
苹果便当格、信息密度、卡片网格
日式便当盒的网页化身，灵感来自 Apple 产品页与 macOS 控件中心。浅灰底 #f5f5f7 上排布大圆角白卡（20px radius），卡片大小不一拼成密网格，深色卡（near-black）做点睛 hero 与状态强调。Inter 配 IBM Plex Mono，蓝色 #0071e3 强调链接与数字。卡片悬停轻微 scale + 大柔和阴影。这个主题启用 layoutVariant="bento"，首页 hero 区会变成多卡网格而非单列。适合作品集首页、产品营销、数据导向的内容站。
布局变体 BENTO 应用此主题时整体结构会调整
灵感来自 Apple iCloud 营销页、macOS 控件中心、日式 bento 餐盒
Mini Render
主页预览
用主题的字体、颜色、阴影把首页骨架渲染一遍。
FACADE
在人机协作的边界寻找新的可能
这里放写作、短想法、项目、照片和判断。
混合时间线里放写作、想法和笔记。
Component Matrix
组件矩阵
主题如何作用在每一类组件上 —— 标题、正文、卡片、按钮、列表、代码块。
Headings
标题层级
主题让网站讲一个故事
从颜色微调到完整设计语言
每一个主题都是一种叙事节奏
字体、间距、阴影、装饰共同发声
Body Prose
正文段落
大字号示例。主题决定行距、字距与衬线/无衬线的取舍。这一段会用主题里的 --type-prose-size 与 --type-prose-leading 撑起阅读节奏。
常规字号示例。同一段文字，换一个主题就是换一种气息。墨韵让你慢下来读宋体，锐蓝让你快速扫产品文案，余烬把暖色铺满每一行 链接也走主题色。
小字号示例。一般用于 caption、辅助说明、版权信息。即便如此，颜色仍跟主题的 --c-muted 走，保留克制的层级关系。
Pills & Tags
胶囊与标签
Section Decorators
章节装饰
Latest
每个主题的 kicker 装饰都不同：墨韵和余烬有左竖线，编辑部有下划线，山林有圆点，素墨有 // 前缀。
分隔线样式跟主题走（--hr-style）。
Cards
卡片
主题如何成为一等公民
从颜色微调到完整设计语言，让每个主题都有故事可讲。
Nebula 主题模块 v3
把 8 个主题升级为可逛可消费的主题库，目标 30+ 主题。
设计意图比颜色重要
每个主题应该回答：什么时候适合它？为什么是它？
Buttons
按钮
Lists & Quote
列表与引用
- 无序列表项一
- 无序列表项二，带一段稍长的描述以观察行距
- 无序列表项三
- 有序列表项一
- 有序列表项二
引用块用主题的--c-accent做左侧竖条，背景走--c-surface。每个主题的强调色不同，引用块自然有不同气质。
Code
代码块
行内代码示例：applyTheme(id, mode) 会写 inline vars 到 :root。
// 应用主题
import { applyTheme, setStoredTheme } from '@/themes/apply';
applyTheme('ink', 'light');
setStoredTheme('ink', 'light');Related
同分组主题
形式感强，结构性差异显著