实验 1 · 设计规则手册

项目与结构

这一页本身就是用这套技术栈写的：

视觉风格

页面背景、噪点、滚动条就是规则本身；色板 / 字体 / 描边直接看下面：

布局与响应式

把窗口从窄拉到宽——间距和标题字号是连续变化的，没有断点跳变。

样式组织

globals.css 只放设计令牌；组件样式用同名 CSS Module 就近维护：

/* globals.css — design tokens only */
@theme {
  --color-paper: …;
  --color-ink: …;
  --font-display: "Patrick Hand", "ZCOOL KuaiLe";
}
:root { --gutter: min(6rem, 2.5vw); }

站点定位

这是个个人实验网站，不是博客；不写学历、经历、职业头衔：

多语言 · 三语是规则

导航栏与页面工具栏切换语言——这本身就是演示。

视觉移植

装饰、按钮、卡片、图标都是移植规则的结果：