folio 主题设计系统 是做什么的？
方向
构建一个像最佳开发者博客和作品集（leerob.com、overreacted.io、brittanychiang.com、antfu.me）那样的个人网站：一个人，一种声音，文字至上。网站应该像一本精心保存的笔记本，安静而快速，没有任何东西与文本竞争。用具体的数字和代码展示作者构建了什么、学到了什么。不使用任何人物素材库照片、营销口号或装饰性效果。
基础
- 仅使用
./theme/views/提供的标记和类，以及主题的article、blog、code、text、blog布局和main视图。 - 使用系统无衬线、衬线和等宽字体，以及已有的
--pico-*变量。 - 仅对链接和第一个按钮使用暖中性色（
#2B2924、#6B665E、#E4E0D9、#FBFAF8）和绿色（浅色模式#1F7A4D，暗色模式#4FBF87）；代码块始终保留暗色。 - 支持浅色和暗色模式；绝不在可主题化的背景上放置固定的浅色。
- 使用
0.5rem圆角和细边框代替阴影。
结构
- 首页（
page）：一个包含头像（作为图像）、角色（作为副标题）、一句话介绍和两个按钮的hero；一个使用list布局的blog元素，标题为“近期文章”；两列项目cards；以及一个联系cta。 - 文章列表页（
page）：一段关于您写作内容的简短说明，以及一个包含所有文章的blog列表，该页面作为父页面。 - 文章（
blog）放在文章列表页下面，按最新到最旧排序。每篇文章以article元素（标题、两句话的引言和封面图片）开始，随后是text、二级heading和code元素。 - 关于、项目、工具使用和现在页面（
page）以一级heading开始。关于页包含一个vertical布工作经历时间线；工具使用页按类别列出工具；现在页说明您本月正在做什么，并包含最后更新日期。 - 在首页配置
folio::profile：姓名、职位、公司、地点、一张正方形照片、一句话简介、电子邮件地址和个人资料链接。
组件
- 文章引言：两句话，说明问题以及读者能获得什么。列表卡片将其用作介绍。
- 标题：简短、具体的二级标题（如“批量回填”）；三级标题仅在其下使用。至少使用两个二级标题，以便生成大纲。
- 代码：每个代码片段一个
code元素，设置语言，最多约15行，真实且可运行。 - 引用：文本元素中的 GitHub 提示（
[!NOTE]、[!TIP]、[!WARNING]），每篇文章最多一两个。 - 项目：每个项目一个卡片，项目名称为标题，仓库或演示为链接，一句话说明其功能（带数字，如星标数、安装量、用户数），堆栈作为内联代码标签放在单独一行，例如
`PHP` `Laravel`。 - 经历：时间线条目，带“2023 — 现在”标签，“职位，公司”标题，一句话影响（带数字），堆栈作为代码标签。
- 数据统计：一个使用
figures布局的cards元素，最多展示三个关键数字。
可访问性
- 保留跳转链接、语义化标题、带标签的模式切换开关以及可见的
:focus-visible轮廓。 - 在两种配色方案（包括代码令牌）中保持 WCAG 2.2 AA 对比度。
- 为封面和有名称的链接编写有意义的替代文本，链接的替代文本应描述其目标，而不是“点击这里”。
内容
以第一人称写作，用“你”称呼读者。要具体：写出版本号、数字和错误。以问题开头，而不是背景，以你接下来会做什么结尾。保持标题平实且描述性强（如“在 4 亿行表上实现零停机迁移”）。避免流行词、“简单地”、“只需”以及空洞的开场白。