M Maple 灵枢
← 主题画廊

沉静 · Serene

枯山水

Zen Garden

极致东方、极疏空间、慢节奏

极致东方的呼吸感。灰白底配灰褐强调色,几乎无阴影、无装饰,把节奏完全交给行距与留白。LXGW WenKai 做 display,行距拉到 2.1,让长文像砂纹一样舒展。适合写作、长读、archive 类的极简内容。

灵感来自 日式枯山水庭园与东方书法的空间观

冷暖 temp
40
明暗 dark
20
锐圆 shape
30
字态 type
90
文化 culture
100
张扬 mood
10
密度 density
10

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

同分组主题

自然、东方、慢节奏的阅读气质