用 Astro 手搓一个博客，顺便试了试设计系统

大多数博客的第一步是找个主题，第二步是把主题改成自己的样子，第三步是放弃。 这次反过来：先定设计系统，再写代码。

先定方向

用 ui-ux-pro-max 这套设计数据跑了一遍查询，它给出的方向是：

• 风格：瑞士国际主义 2.0——12 栏栅格、理性间距、非对称版面
• 配色：编辑黑 #18181b 打底，一点洋红 #ec4899 当强调色，不加第三个色
• 字体：Libre Bodoni 做标题（衬线，像杂志），Public Sans 做正文
• 动效：只在元素进入视口时 300ms 渐显，prefers-reduced-motion 生效时直接不给

这套组合的好处是”不需要装饰”：结构本身就在承担视觉工作。

全部用 CSS 变量

把设计系统的输出直接落成 token，后面每个组件只引变量、不写裸值：

:root {
  --color-accent: #ec4899;
  --space-5: 24px;
  --measure: 68ch;
  --duration: 220ms;
}

好处是换配色只改十几行，深色模式用 prefers-color-scheme 覆盖同一批变量就行， 组件代码一行都不用动。

动效写在自己手里

没上 GSAP。滚动渐显用 IntersectionObserver 十几行就够， 而且更容易处理”用户关了动效”这件事：

const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) targets.forEach((el) => el.classList.add('is-visible'));

无障碍不是加分项，是默认项。

结果

打包出来的首页大概 20KB HTML + 12KB CSS，零 JavaScript 关键路径。 剩下的就是慢慢往里写字。