M Maple 灵枢
← 主题画廊

暗色 · Dark

合成波

Synthwave

霓虹粉青、透视网格、80s 复古

80s 合成器封面与赛博地平线。深紫底叠加远景透视网格,粉色与青色霓虹勾勒出夕阳与坐标线。Orbitron 几何字体配 Inter 正文,标题带紧字距与磷光 text-shadow,胶囊小圆角加大写字距强调机械刻印感。卡片浅色玻璃质感配渐变描边,hover 时霓虹光晕浮现。适合复古赛博、电子音乐、年代感主题档案。

灵感来自 Outrun 美学、Kavinsky 唱片封面、《迈阿密热线》海报

冷暖 temp
50
明暗 dark
92
锐圆 shape
30
字态 type
20
文化 culture
15
张扬 mood
85
密度 density
50
动效 motion
50

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

同分组主题

深色系与复古元素的结合