— 制作说明

这个东西
是怎么做的。

一家声称要修好“所有人都忍下来的地方”的公司，应该愿意让人看自己的针脚。这个网站是它目前唯一做出来的东西，所以也是唯一可被检验的说法。下面每一个数字都是实测的。

01 / 字体

三套，没有一套是 Inter。

Instrument Serif 做标题，Geist 做正文，Geist Mono 做标注和数字。全部自托管，并按 unicode-range 切分——一个页面只下载它真正会排的字形，中文页从不下载它用不上的拉丁扩展字库。
02 / 色彩

五个值，以及由它们染出的三张纸。

亚麻、青石、陶土分别承载三个品类，明度与底纸对齐，所以滚动经过时不会一屏一屏地闪。铜色保留给品牌本身，从不用于标注品类。每一对配色都是从渲染后的像素实测的，而不是按十六进制值推算——纸纹是叠加混合，而 11px 带字距的等宽字在抗锯齿后会损失一整级以上的对比度。全站最低的一对是 5.05:1。
03 / 两种配色

图版永远是页面的反面。

浅色是炭黑打在奶白上，深色把两者对调。图版跟着一起换——所以它从来不是站上唯一那块奇怪的深色，而是唯一一处贯彻到底的反转。深色下图版内部用的正是浅色那套已验证过的值，这条规则省下的是一整套色板。深色的每一对配色都重新实测过，而且是对着渲染后的卡片量，不是对着声明的色值：材质层和纸纹会把卡片抬亮约七个 L* 单位。
04 / 体积

冷加载约 98KB，大部分是字体。

没有框架、没有打包器、没有 CDN、没有统计、运行时零第三方请求。中文页是三个里最轻的，因为它借用读者自己的系统字库，而不是塞进一套几兆的 CJK 字体。
05 / 行为

关掉 JavaScript 也读得完。

每一处揭示都依赖页面自己给自己加的一个类——脚本没跑起来时，内容是可见的，而不是被藏起来。示意图只在“有东西保证会把它带回来”的前提下才隐藏线条。语言切换是真链接，订阅表单原生提交并得到一个页面。
06 / 动效

读者说了不要，就真的没有。

prefers-reduced-motion 是移除动画，而不是把它缩短，并且把每个元素渲染成最终状态。这一条是靠数“正在运行的动画有几个”验证的，不是靠相信媒体查询。
07 / 图形

为这个站画的，不是买的。

品类示意图和供应链图版都是为这个站画的 SVG，进入视野时自己画一次。四张材质是生成图，压到 13% 到 28% 之间，好让上面的文字保住对比度。站上没有任何一张图描绘产品，因为还没有产品。
08 / 托管

Cloudflare Pages 上的静态文件。

没有构建步骤：仓库根目录就是被服务的内容。往主分支推一次，就是一次部署。
09 / 名单

一个地址、一种语言、一个时间戳。

此外什么都不存。IP 只做加盐哈希用于限流，且一小时后清除——一个还没开卖的名单，不该附带位置信息。重复订阅会得到成功的回应，这样这个端点就不能被用来测试某个地址在不在名单上。
10 / 策略

一份写明“什么可以加载”的内容安全策略。

default-src 'none'，然后逐条列出这个站真正用到的四样东西。样式没有 'unsafe-inline'；唯一那段内联脚本用哈希锁定。将来多一个依赖，页面会大声报错，而不是悄悄地照常工作。

四张材质

生成之后，以 6% 到 28% 的透明度垫在文字后面。这里是全站唯一一处能看到它们本来面目的地方。

回到首页 meravin.dev

这个东西是怎么做的。

这个东西
是怎么做的。