M Maple 灵枢
← 主题画廊

冷峻 · Cool

蓝图

Blueprint

工程图纸、坐标、严谨

工程蓝图的精确感。等宽字 Inconsolata 主导排版,零圆角配 dashed 边框营造 graph-paper 视觉。Light mode 用浅蓝纸底承载深蓝字与图框注释,dark mode 还原原型的深蓝图纸与白色文字。胶囊与 kicker 全部大写带紧字距,像图纸上的标注与图框编号。适合技术文档、变更日志、项目档案类硬核内容。

灵感来自 工程蓝图与 graph paper 的精确视觉

冷暖 temp
8
明暗 dark
60
锐圆 shape
0
字态 type
45
文化 culture
30
张扬 mood
80
密度 density
60

Mini Render

主页预览

用主题的字体、颜色、阴影把首页骨架渲染一遍。

灵枢 · Maple 写作 项目 笔记

FACADE

在人机协作的边界寻找新的可能

这里放写作、短想法、项目、照片和判断。

最近更新

混合时间线里放写作、想法和笔记。

Component Matrix

组件矩阵

主题如何作用在每一类组件上 —— 标题、正文、卡片、按钮、列表、代码块。

Headings

标题层级

主题让网站讲一个故事

从颜色微调到完整设计语言

每一个主题都是一种叙事节奏

字体、间距、阴影、装饰共同发声

Body Prose

正文段落

大字号示例。主题决定行距、字距与衬线/无衬线的取舍。这一段会用主题里的 --type-prose-size--type-prose-leading 撑起阅读节奏。

常规字号示例。同一段文字,换一个主题就是换一种气息。墨韵让你慢下来读宋体,锐蓝让你快速扫产品文案,余烬把暖色铺满每一行 链接也走主题色

小字号示例。一般用于 caption、辅助说明、版权信息。即便如此,颜色仍跟主题的 --c-muted 走,保留克制的层级关系。

Pills & Tags

胶囊与标签

5 min · 写作 2026-05-03 最近更新 #AI #调研 主题色 tag

Section Decorators

章节装饰

Latest

每个主题的 kicker 装饰都不同:墨韵和余烬有左竖线,编辑部有下划线,山林有圆点,素墨有 // 前缀。


分隔线样式跟主题走(--hr-style)。

Cards

卡片

写作 5 min

主题如何成为一等公民

从颜色微调到完整设计语言,让每个主题都有故事可讲。

独立文章 阅读全文 →
进行中 2026

Nebula 主题模块 v3

把 8 个主题升级为可逛可消费的主题库,目标 30+ 主题。

#Astro #Tailwind #design-system
想法

设计意图比颜色重要

每个主题应该回答:什么时候适合它?为什么是它?

Buttons

按钮

链接按钮 →

Lists & Quote

列表与引用

  • 无序列表项一
  • 无序列表项二,带一段稍长的描述以观察行距
  • 无序列表项三
  1. 有序列表项一
  2. 有序列表项二
引用块用主题的 --c-accent 做左侧竖条,背景走 --c-surface。每个主题的强调色不同,引用块自然有不同气质。

Code

代码块

行内代码示例:applyTheme(id, mode) 会写 inline vars 到 :root

// 应用主题
import { applyTheme, setStoredTheme } from '@/themes/apply';

applyTheme('ink', 'light');
setStoredTheme('ink', 'light');

Related

同分组主题

冷色系,理性、技术、科学感