个人网站设计系统

这不是一套通用 UI kit。它是这个个人网站的排版约束：让项目、文章、系统笔记和从 Obsidian 流出的内容看起来属于同一个地方。

参考对象是 Kami 紙。它的核心不是某个组件，而是一组稳定的编辑规则：暖米纸底、单一油墨蓝、衬线字体承担层级、克制阴影、低噪声图表。我们不照搬 Kami 的文档模板，而是把它转译成适合个人博客和项目页的网页系统。

设计判断

这个网站应该像一个公开的工作台，而不是产品官网。页面要安静、窄栏、可反复阅读；视觉重点来自文字、留白、纸面质感和少量动态图像，而不是卡片堆叠、渐变英雄区或营销式模块。

三个关键词：

纸面：背景、边框、阴影都要像纸和墨，不像后台管理 UI。
记忆：动画和图像可以存在，但必须像内容的余韵，而不是装饰噪声。
档案：项目和文章列表应该能长期维护，支持从 Obsidian 同步出来。

颜色

颜色只保留一个真正的强调色。其它颜色都服务于纸面层级。

:root {
  --paper: #f5f4ed;
  --ivory: #faf9f5;
  --sand: #e8e6dc;

  --ink: #141413;
  --warm: #3d3d3a;
  --muted: #504e49;
  --stone: #6b6a64;

  --line: #e8e6dc;
  --line-soft: #e5e3d8;

  --brand: #1b365d;
  --brand-light: #2d5a8a;
}

使用规则：

页面背景永远是 --paper，不要用纯白。
链接、焦点、section 标记使用 --brand。
--brand 面积要小，作为墨点出现，不作为大面积背景。
灰色必须偏暖，避免蓝灰、纯灰和系统默认灰。
动画中的彩色粒子也要收束到 --brand 和暖灰，不再引入 cyan / gold 这类第二强调色。

字体

字体体系分成两层：内容用衬线，界面控制用等宽。

:root {
  --serif-zh: "TsangerJinKai02", "Source Han Serif SC",
    "Noto Serif CJK SC", "Songti SC", Georgia, serif;
  --serif-en: Charter, Georgia, Palatino, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

使用规则：

中文正文和标题走中文衬线，形成纸面阅读感。
英文正文和标题走 Charter / Georgia 一类 serif。
顶部导航、语言切换、日期、代码、slug、版本号可以用 mono。
字重只保留 400 / 500，避免合成粗体。
不使用 italic。需要降低层级时，用颜色和字号，不用斜体。

版心

默认内容宽度是窄栏，不做大屏铺满。

:root {
  --content-width: 680px;
  --page-pad: clamp(22px, 5vw, 72px);
}

规则：

正文、项目列表、联系信息、视觉图像都对齐同一个版心。
动画可以作为视觉锚点，但默认不 full-bleed。
首屏不做 hero marketing，而是从名字、短说明和一个可记住的图像开始。
大屏上保留左右空白，让页面像一张摊开的纸。

层级

层级来自字号、留白和墨色，不来自装饰。

Role	Size	Weight	Line Height	Usage
Site title	20px	500	1.2	首页名字
Section title	15px	500	1.25	Projects / Contact
Body	15px	400	1.55	hero 说明和正文
Dense body	14px	400	1.45	项目描述
Caption	12px	400	1.45	图像注脚
Nav / meta	12-13px	400/500	1.35	导航、语言切换

中文页面可有轻微字距；英文正文保持 letter-spacing: 0。

Section

Projects、Contact、未来的 Writings / System 都使用同一种 section 结构。

.section-header {
  border-left: 3px solid var(--brand);
  padding-left: 10px;
  margin-bottom: 18px;
}

不用横线分割整个版心。左竖线是唯一的 section signature：短、克制、可复用。

链接和按钮

链接默认是纸面里的下划线，不做按钮化。

规则：

正文链接使用 --brand 或继承文字色，下划线用 --line。
hover 时只改变颜色和 underline，不加背景。
语言切换是唯一的按钮状元素：ivory 背景、暖灰边框、6px 圆角。
不使用高饱和 CTA，因为这个网站不是转化页。

视觉图像

首页的 memory field 是站点的主视觉，但它必须服从内容系统。

规则：

宽度跟随 --content-width。
色彩只使用纸面色、油墨蓝、暖灰。
动画节奏慢，不影响阅读。
指针交互可以保留，但视觉反馈要轻。
caption 是注脚，不是诗歌标题；不使用 italic。

项目列表

Projects 是这个站点最先稳定的内容区。它既可以展示代码项目，也可以展示设计系统、写作系统、工作流实验。

建议 frontmatter：

---
title: "个人网站设计系统"
description: "从 Kami 紙 的纸面排版语言出发，沉淀适合这个个人网站的视觉、内容和维护规则。"
date: "2026-05-14"
status: "draft"
tags:
  - design-system
  - personal-site
---

列表渲染规则：

标题一行，描述一到两行。
不显示复杂卡片，不加图标。
有外链时显示为普通文本链接。
没有内容时宁可隐藏 section，不放空占位。

文章页

未来 Writings 和 Projects 可以共用一套文章页模板。

文章页结构：

顶部 meta：日期、类型、语言。
标题：serif 500，不超过两行。
摘要：muted 色，一段即可。
正文：窄栏，行高 1.55。
小标题：左竖线或纯字号层级，二选一，不混用。
代码块：ivory 背景、暖灰边框、mono 字体。
引用：左侧 brand 竖线，正文用 muted。

Obsidian 同步约定

Obsidian 是内容源，网站是发布面。同步时只同步可公开的 markdown。

推荐目录：

Vault/
  Publish/
    Projects/
      design.md
    Writings/
    System/

同步规则：

Obsidian frontmatter 保持和网站一致。
私密笔记不进入 Publish/。
图片资源后续统一进 public/media/ 或 src/assets/。
双语文章优先使用路径区分：/projects/design/ 和 /en/projects/design/。
不做客户端翻译，不依赖 localStorage。

反模式

避免这些设计漂移：

背景变成纯白或冷灰。
同时出现多个强调色。
用卡片网格填满首页。
大面积 brand 色背景。
section 又有左竖线又有横线。
caption 使用 italic 或过度文学化。
项目列表加图标、标签、按钮，把它做成 SaaS dashboard。
每次新增内容时临时写一套样式。

落地清单

新增一个页面或组件时，按这个顺序检查：

是否在 --content-width 内对齐。
是否只用了一个强调色。
是否能用字号/留白解决，而不是加边框/阴影。
是否保留暖灰边框和纸面背景。
是否有不必要的卡片。
是否适合从 Obsidian 的 markdown 自动生成。
是否能同时支持中文和英文路径。

这套系统的目标不是更“设计感”，而是更稳定。稳定之后，内容才会显出来。