设计文档

模板的设计系统、主题配色和设计原则。

主题系统

DESIGN.md 生成主题

RicoUI 通过 DESIGN.md 定义了十套精选配色主题。切换主题只改颜色，排版、间距、布局、圆角和组件规范一律不动。

查看组件库

查看 DESIGN.md

源文件

src/config/themes.js

src/styles/global.css

src/styles/themes.css

src/layouts/Layout.astro

src/components/sections/Header.astro

docs/DESIGN.md

docs/DESIGN/{theme-id}.md

Library

主题列表

每个主题都有完整的配色方案。点击详情可查看简介。

Retro Blue 默认色板详情

暖调编辑风画布，蓝色标题搭配金色点缀，石板中性色收底。

适用场景

入门站点编辑类产品页文档站

颜色情绪

编辑蓝

#2d6dc3

标题、链接和主要操作（Editorial Blue）

金色点缀

#fad13b

徽标和次要强调（Gold Highlight）

暖白画布

#fdfaf5

浅色页面背景（Warm Canvas）

指南

docs/DESIGN/retro-blue.md

蓝色主导导航、标题和操作按钮，作为视觉主信号。
金色仅作小面积点缀，不要大面积铺色。
保留暖调画布，维持编辑气质。

Minimal Mono 黑白极简色板详情

极简单色调，暖灰为主、锐利字重对比，几乎没有饱和色。

适用场景

编辑类站点作品集文档站

颜色情绪

墨色

#1a1a1a

文字、标题和主要控件（Ink）

暖灰

#f5f3f1

柔和表面与低调点缀（Warm Gray）

纸白

#fdfcfc

浅色页面画布（Paper）

指南

docs/DESIGN/minimal-mono.md

不要引入饱和强调色，克制本身就是风格。
用灰色层次区分重点，而非彩色标签。
整体保持安静，适合长文阅读。

Forest Green 植物色板详情

沉稳植物系配色，纸质表面、自然绿与低眩光阅读对比。

适用场景

知识库健康产品沉稳产品站

颜色情绪

森林绿

#4a7c59

品牌色、链接和填充操作（Forest Green）

叶绿淡彩

#dce9d8

徽标和柔和点缀（Leaf Tint）

纸色

#f7f5f0

浅色页面画布（Paper）

指南

docs/DESIGN/forest-green.md

绿色作为唯一的色彩方向。
浅绿用在辅助表面，避免用于主要文字。
明暗两套变体都保持自然、低眩光。

Claude 暖色羊皮纸色板详情

羊皮纸上的学术期刊：温暖米白表面，精准深色文字配低调陶土色点缀。

适用场景

AI 产品研究工具写作应用知识产品

颜色情绪

墨黑

#141413

主要文字、标题和深色填充操作（Ink Black）

羊皮白

#faf9f5

页面画布和卡片表面（Vellum White）

陶土橙

#d97757

小面积点缀和图标细节（Terra Cotta）

指南

docs/DESIGN/claude.md

多用暖色中性表面，避免刺眼的纯白布局。
陶土色保持小面积和克制，整体保持低调。
深色填充按钮表达最清晰的主要操作。

Creator Yellow 创作者经济色板详情

轻盈社区画布，白卡片配柔和阴影，亮黄操作色与亲和深色文字。

适用场景

创作者工具社区站点支持页面电商落地页

颜色情绪

明黄

#ffdd00

主要操作和品牌强调（Goldenrod）

深石墨

#222222

标题和强调正文（Deep Graphite）

画布灰

#e5e7eb

柔和页面背景（Canvas Gray）

指南

docs/DESIGN/creator-yellow.md

黄色独占主要操作，别加其他饱和色来抢戏。
灰色画布上铺白卡片，保持创作者卡片的触感。
黄配黑，对比干净利落又友好。

Precision Orange 技术中性色板详情

技术极简风，单色结构加工程级清晰度，单一橙色指示器。

适用场景

开发者工具CLI 产品AI 工程平台技术文档

颜色情绪

工厂黑

#020202

主要文字和强烈的交互对比（Factory Black）

工厂浅灰

#eeeeee

页面画布和安静表面（Factory Gray）

代码橙

#ef6f2e

状态标签和高注意力信号（Code Orange）

指南

docs/DESIGN/precision-orange.md

橙色点到为止，只标记新的、活跃的或技术信号状态。
靠黑、灰和间距撑起层次，不做多余装饰。
色板干净，功能至上。

Comic Pulp 柔和漫画色板详情

柔和纸浆漫画质感：淡纸画布打底，葡萄紫结构撑骨架，柠檬黄与墨色形成对比。

适用场景

趣味品牌活动页游戏创意发布

颜色情绪

葡萄墨

#6b5fb5

标题、链接和品牌结构（Grape Ink）

柠檬黄

#f2dc4d

主要操作和明快强调（Lemon Drop）

纸浆白

#fbf7ea

柔和页面背景（Pulp Paper）

指南

docs/DESIGN/comic-pulp.md

页面背景保持淡雅，给漫画色留出呼吸空间。
黄色管操作和强调，葡萄紫文字代替纯黑。
靠色彩对比营造图形感，别让整页糊成一片饱和色。

Midnight Pastel 深色粉彩色板详情

暗夜上的哑光粉彩块：深色工作空间，紫色、赭色、玫瑰和陶土柔和点缀。

适用场景

创意工作空间协作工具项目仪表盘工作室

颜色情绪

暗夜画布

#000000

深色页面基底（Midnight Canvas）

暖紫

#bbb2ce

突出点缀和项目卡片活力（Warm Violet）

大地陶

#65451d

沉稳的主要操作色（Earth Clay）

指南

docs/DESIGN/midnight-pastel.md

深色底色承载界面，粉彩只做克制的亮色点缀。
陶土和赭色做暖调操作色，不用通用亮色。
避开刺眼霓虹色，保持哑光触感。

Sky Blue 淡蓝产品色板详情

磨砂亚麻上的蓝图：近白基底铺开，天蓝洗色铺面，亮蓝色像荧光笔标注重点。

适用场景

CRM 产品SaaS 仪表盘管线工具效率应用

颜色情绪

信号蓝

#145aff

链接、聚焦环和高强调操作（Signal Blue）

亚麻画布

#fcfcfc

主要页面表面（Linen Canvas）

午夜墨色

#020520

密集展示文字和强控件（Midnight Ink）

指南

docs/DESIGN/sky-blue.md

蓝色只做精准信号，别大面积涂抹。
近白和淡蓝表面提供大部分层次感。
次要文字走蓝灰中性色，沉稳且有产品感。

Rico Red 红色行动色板详情

洁净纸面上的云端控制面板：企业级清晰、暖灰调、强排版，一抹自信红色。

适用场景

B2B SaaS基础设施工具安全产品企业文档

颜色情绪

行动红

#d04841

主要操作按钮和激活状态（Action Red）

石墨黑

#181717

标题和强调文字（Graphite Black）

画布灰

#eeebea

温暖的页面背景（Canvas Pale）

指南

docs/DESIGN/rico-red.md

红色只用在主要操作或明确的激活状态。
暖灰表面柔和企业配色的冷硬感。
强文字对比加简洁卡片，少做装饰。

主题

主题画廊

用顶栏的主题切换器在全站预览。下方每张卡片渲染自同一份主题配置。

默认色板

Retro Blue

RicoUI 经典配色：暖调画布、蓝色标题、金色点缀与石板中性色。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/retro-blue.md

黑白极简色板

Minimal Mono

黑白暖灰极简主题，锐利的字重对比，几乎不含饱和色。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/minimal-mono.md

植物色板

Forest Green

沉静的绿色主题，墨色文字搭配纸质表面，植物系点缀。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/forest-green.md

暖色羊皮纸色板

Claude

暖调羊皮纸主题，奶白纸张、精致墨色、内敛边框与小巧陶土色点缀。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/claude.md

创作者经济色板

Creator Yellow

明快的创作者经济配色，灰调画布、白卡片、黑字搭配亮黄色操作。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/creator-yellow.md

技术中性色板

Precision Orange

技术向中性配色，冷灰表面、黑色文字，一抹精准的橙色信号。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/precision-orange.md

柔和漫画色板

Comic Pulp

柔和纸浆漫画风，淡纸背景、葡萄紫结构、柠檬黄操作与图形化墨色对比。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/comic-pulp.md

深色粉彩色板

Midnight Pastel

深色协作风配色，黑色画布、柔和粉彩卡片、紫色点缀与暖陶土操作色。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/midnight-pastel.md

淡蓝产品色板

Sky Blue

淡蓝白产品配色，近白画布、天蓝洗色表面、午夜墨色与鲜明蓝色焦点。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/sky-blue.md

红色行动色板

Rico Red

务实红点缀主题，暖灰白画布、石墨文字与自信的红色操作色。

亮色

暗色

标题示例

正文字体节奏不变，调色板在周围切换。

主要操作 docs/DESIGN/rico-red.md

令牌

语义化颜色映射

添加新主题时需要调整这些值。

令牌 Retro BlueMinimal MonoForest GreenClaudeCreator YellowPrecision OrangeComic PulpMidnight PastelSky BlueRico Red

--color-primary

品牌色、链接、CTA、标题

#2d6dc3

#1a1a1a

#4a7c59

#141413

#222222

#020202

#6b5fb5

#453b60

#145aff

#d04841

--color-primary-strong

悬停和强调

#0066ff

#333333

#356644

#1f1e1d

#000000

#3d3a39

#3f357d

#65451d

#0f1f3d

#a83b35

--color-primary-light

柔和点缀和聚焦表面

#8fb9ff

#b1b0b0

#8fba98

#9c9a92

#717171

#b8b3b0

#c8c1f0

#bbb2ce

#b6cbfd

#f2aaa5

--color-accent

徽章和次要高亮

#fad13b

#f5f3f1

#dce9d8

#d97757

#ffdd00

#ef6f2e

#f2dc4d

#e4b976

#f0f4fe

#eeebea

--color-bg-primary

浅色页面画布

#fdfaf5

#fdfcfc

#f7f5f0

#faf9f5

#e5e7eb

#eeeeee

#fbf7ea

#f3f1ec

#fcfcfc

#eeebea

--color-bg-secondary

卡片和面板

#ffffff

#fafafa

#fffdf5

#ffffff

--color-text-primary

标题和强调文字

#2d6dc3

#1a1a1a

#2f6840

#141413

#222222

#020202

#241c3d

#453b60

#020520

#181717

--color-text-secondary

正文文字

#3f4a5a

#57534f

#33443a

#3d3d3a

#414141

#3d3a39

#473f67

#333333

#374151

#2e2d2d

--color-text-tertiary

弱化元数据

#7a6550

#777169

#66736a

#73726c

#717171

#756f6b

#806f4b

#65451d

#696a72

#706e6d

--color-btn-primary

填充按钮背景

#2d6dc3

#1a1a1a

#4a7c59

#141413

#ffdd00

#020202

#f2dc4d

#65451d

#145aff

#d04841

--color-btn-primary-hover

填充按钮悬停背景

#0066ff

#333333

#356644

#1f1e1d

#f7d046

#3d3a39

#f6cc5f

#453b60

#0f1f3d

#a83b35

--color-btn-primary-text

填充按钮前景

#ffffff

#000000

#ffffff

#241c3d

#ffffff

排版

字体一致性

主题切换器只管颜色。字体和间距保持稳定，方便直接对比配色效果，不用重建界面。

--font-brand

思源黑体

展示标题和大号章节标题

--font-sans

思源黑体

正文、导航、按钮、UI 标签

--font-body

思源黑体

长篇内容

主题规则

主题切换仅更改语义化颜色令牌。

排版、间距、圆角、布局和组件结构保持稳定。

使用 src/config/themes.js 作为主题选项的真实来源。

使用 localStorage.theme_id、theme_id cookie 回退和 html[data-theme] 进行运行时选择。

为每个主题保持亮色和暗色模式样式配对。

每个主题保留一个 DESIGN.md 文件，文件内包含独立的亮色和暗色令牌部分。

将每个主题视为一个颜色系统，而不是完整的组件替换。

页面模式

营销板块

使用 .site-container、SectionHeader、响应式网格和虚线分隔符。

文章页面

使用 PostLayout、文章样式、目录、阅读进度和 MDX 内容条目。

主题参考

使用 /elements 检查活动主题如何影响实际组件。

设计驱动的 Astro 启动模板，自带博客、设计文档、组件库、Tailwind CSS v4 和可复用的 RicoUI 主题。

模板

资源

v1.0.0 Astro 启动模板