蓝图
Blueprint
工程图纸、坐标、严谨
工程蓝图的精确感。等宽字 Inconsolata 主导排版,零圆角配 dashed 边框营造 graph-paper 视觉。Light mode 用浅蓝纸底承载深蓝字与图框注释,dark mode 还原原型的深蓝图纸与白色文字。胶囊与 kicker 全部大写带紧字距,像图纸上的标注与图框编号。适合技术文档、变更日志、项目档案类硬核内容。
灵感来自 工程蓝图与 graph paper 的精确视觉
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
同分组主题
冷色系,理性、技术、科学感