一处自己的网络住所
记录思考，展示作品，沿着链接认识彼此。此条目仅用于展示。
RSS 订阅设计系统
熟悉的链接、发亮的按钮、自己的小天地。延续 Web 2.0 的亲切感，让人与 Agent 都能读懂。
品牌与原则
以内容为中心，以链接建立关系。蓝色标明可操作的入口，浅色背景留给阅读，立体高光只用于值得点击和记住的地方。
web 2.0Next
我 ♥ 个人网站保持连接
品牌使用圆润的字形与 Next 徽章；保持完整组合，不拆分、不拉伸。
对等、具体、开放。让每个人保留自己的表达，用清楚的动词说明动作。
颜色
纸白承载正文，蓝色用于链接与行动。浅蓝组织内容，绿色点缀人与 Agent 的连接；橙色保留给 RSS。
--paper#fafcff--blue#214fe8--ink#182745--sky#eaf2ff--green#d9f58b--muted#52627a--line#d7e1f0--white#ffffff--rss#c34b08字体与排版
正文优先使用系统中文字体，品牌使用圆润的无衬线字形。长文增加行距，标题保持紧凑，中英文使用同一层级。
- 正文字体
"PingFang SC", "Microsoft YaHei", sans-serif- 品牌字体
"Arial Rounded MT Bold", "Trebuchet MS", sans-serif- 正文行高 / 长文行高
- 1.7 / 2
表达自我，连接彼此。
表达自我，连接彼此。
表达自我，连接彼此。
表达自我，连接彼此。
表达自我，连接彼此。
表达自我，连接彼此。
间距与布局
常用间距以 4px 为基础。相关内容靠近，章节之间留白；宽屏并列展示，小屏按阅读顺序堆叠。
--space-14px--space-28px--space-312px--space-416px--space-624px--space-832px--space-1248px--space-1664px- 页面最大宽度
- 1180px
- 宣言阅读栏最大宽度
- 780px
900px 以下主要内容改为单列；600px 以下导航换行；320px 宽度也可完整阅读。
圆角与层次
圆角随组件的用途变化。输入框轻描边，主要按钮使用高光和凸起边缘，分享海报使用柔和投影。
--radius-small4px--radius-input8px--radius-button10px--radius-panel14px--radius-pill30px按钮高光
--gradient-button海报投影
--shadow-poster宣言
表达自我，连接彼此。
按钮与输入
主按钮用于主要动作，普通链接用于阅读和跳转。键盘焦点必须清晰可见；不可用的操作有明确状态。
默认
悬停
键盘焦点
不可用
点击按钮或用 Tab 与 Enter 操作，查看反馈。
这是交互演示，输入不会提交或保存。
切换语言
中文
内容组件
内容组件保持一致的链接、留白与阅读层级。下面展示标签、徽章、订阅入口、名录条目和空状态。
组件示例
从分享自己的网站开始。
分享自己的博客、作品集或小小实验，也沿着链接发现别人的创作。
Web 2.0 的下一章
我 ♥ 个人网站保持连接
分组页脚
页脚保留品牌、GitHub 与 RSS 入口，以及蓝色的“我 ♥ 个人网站”徽章。导航分为“了解开放网络”“面向 Agent”和“项目”三个同级小节，窄屏下位于品牌下方。llms.txt 介绍入口位于“面向 Agent”小节。
查看本页页脚分享与图像
图像沿用相同的配色、字体和徽章。竖版用于保存和转发，横版用于网站链接预览。
交互与无障碍
链接带有可识别的样式，反馈通过文字表达。键盘焦点使用蓝色外框，图片提供替代文本；减少动态效果的偏好会关闭平滑滚动。
使用 Tab 移动焦点；Enter 激活链接和按钮；选中一段文字查看绿色选区。
品牌与原则