一个模板在第一张截图里好看并不难。难的是，用户替换了一半内容之后，它仍然看起来像一个完整产品。这就是设计系统的价值。
字体：统一使用思源黑体
这个中文版本里，RicoFast 不再使用英文模板常见的 serif + sans 搭配，而是统一使用思源黑体字体栈：
@theme {
--font-brand: "Source Han Sans SC", "Noto Sans SC", "思源黑体", sans-serif;
--font-sans: "Source Han Sans SC", "Noto Sans SC", "思源黑体", sans-serif;
--font-body: "Source Han Sans SC", "Noto Sans SC", "思源黑体", sans-serif;
}原因很简单：中文产品站更需要稳定、清晰、耐读。标题和正文使用同一字体族，只通过字重、字号和间距拉开层级，页面会更统一。
颜色：一个主色，一个强调色
核心视觉由三类颜色支撑：
--color-primary: #2d6dc3;
--color-accent: #fad13b;
--color-bg-primary: #fdfaf5;#fdfaf5 不是纯白，它让页面有一点温度，但不会抢内容。暗黑模式使用 #0b1220，比纯黑更柔和，也和主蓝色在观感上更接近。
间距：基于 4px 的节奏
模板里的间距基本来自 4px 倍数：
4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128常规 section 使用 py-16 md:py-24，卡片常用 p-6。主容器宽度为 1200px，文章内容宽度为 800px。这样做的好处是，新增区块时不必重新发明间距。
边框：虚线让结构更轻
RicoFast 很多分隔线使用 dashed border：
<div class="w-full border-b border-dashed border-neutral-200"></div>虚线比实线更轻，适合 section 很多的 SaaS 页面。卡片边框则使用轻微的 primary/10 品牌色，让边缘也带一点系统感。
动效：克制，不做装饰
模板里主要有两类动效：
- AOS：用于滚动入场。
- motion.js：用于需要时间线编排的场景。
原则是：动效要解释状态、强调层级或提供反馈。如果只是为了“看起来有东西在动”，就不该加。
为什么这些约束重要
好的模板不是把所有可能性都塞进去，而是提供一组不容易出错的默认判断。你换掉 Hero 文案、改主色、加新页面时，系统仍然能托住整体质量。
完整参考在 docs/DESIGN.md。第一次做大改前，建议先读一遍。