Squarespace Foundations

品牌手册通常是一份 PDF，一页一条规范，看的人从头翻到尾。这一支把六条规范做成六个可以走进去的场景，而且顺序不由你决定要不要跳过——转盘上永远只有一个在正面。

Index 里列着全部六章：01 Logo、02 Typography、03 Color、04 Photography、05 Campaign、06 Motion。每一章占满整个视口，底部左边是章节号，中间是加了括号的章节名，右下角一对箭头。

第 01 章讲标志。白底中央是 Squarespace 那个云朵状的记号，上面叠着一个方形，两者交叠的地方黑白互换。这是混合模式做的，body 上挂着 useBlendMode 这个类名。手册里讲留白和最小尺寸的那一页，在这里变成了一张能看出构造关系的图。

第 02 章讲字体，也是整个项目立得住的地方。

黑底上是一个放大到超出画面的字母，笔画边缘散布着蓝色小方块。做过字体或者用过矢量软件的人一眼就认得，那是路径上的锚点。把锚点留在画面里，等于把这款字从一个结果变回一个在被画的过程，读者看到的不是这款字长什么样，而是它当初是怎么被定下来的。

第 03 章讲颜色，做法完全相反。画面中央是一张照片，一个人提着一只陶罐，背景整屏是从照片里延伸出来的深棕。这一章不列色号，只给一张照片，让读者从里面看出这套颜色的温度。

第 06 章讲动效，画面是六七块视频拼在一起同时播，有产品页、有海报、有实拍。这一章不写规则，直接把节奏放给你看。

六章走下来，读者拿到的是六种不同的表达方式，而不是六页格式一样的规范。一本手册想被人读完，靠的不是写得全，是每一条都换一种说法。

整个站只用一款字，Squarespace 自己的 Clarkson。

页面里声明了 18 个字族变体，真正加载的只有 6 个：Clarkson 的 300、400、500、600、700 五个字重，外加一个 ClarksonSerifLightItalic。剩下 12 个——各种衬线体、窄体——全部处于未加载状态，说明它们写在样式表里备用，但这一页没有用到。

可见文字少得惊人。census 数下来整屏只有 304 个 Clarkson 字符，字号从 10px 一直拉到 267px，另有 2 个字符用了那款衬线斜体。也就是说这个站几乎不靠文字工作，文字只负责标注：站名、章节号、章节名、Index、一个隐私链接。

颜色也是。可见的文字色只有三个值，白色落在 579 个元素上，黑色 6 个，一档浅灰 4 个。样式表里倒是定义了完整的品牌色，--color-blue 是 #1823BC，--color-orange 是 #D2593B，--color-gold 是 #C59D3D，可这些颜色在界面层一次都没露面。

真正的颜色全在内容里。第 01 章是白底，第 02 章是纯黑，第 03 章是从照片里取出来的深棕。界面这一层在每一章都退成中性，让当前这一章的素材决定整屏的温度。

整页 590 个元素，带圆角的就 1 个。一个品牌手册站把圆角用到这个份上，本身就是在示范克制。

底部左下角有一个写着 Dark 的开关，aria-label 是 Switch to light mode，说明整套配色有明暗两版。

最见功夫的是第 02 章那些锚点的做法，因为它不是图片，也不是 SVG。

那一屏上有一块 1920×945 的画布，父元素的类名是 riveStateMachine homeCarouselTypography__riv，页面另外拉了一个 letters.riv 和一份 rive.wasm。也就是说字母和它的锚点是一个 Rive 状态机在实时播放，Rive 的运行时是 WebAssembly，从 unpkg 上取，占了第三方那 528 KB 的绝大部分。

选 Rive 而不是 SVG 动画或者视频，理由挺明确。锚点跟着笔画走、笔画又在变形，这种绑定关系在设计工具里是天然的，导出成 Rive 之后运行时直接还原，不用在前端重写一遍路径插值。换成视频就失去了矢量的清晰度，换成手写 SVG 动画则要维护一大堆坐标。

要照着做的人得算一笔账。Rive 的运行时是一份 wasm，页面上只要用一次就要背上它的全部体积，所以这条路只有在动画确实复杂到 CSS 和 SVG 做不动的时候才划算。这个站用它做了整整一章的主视觉，值。另外这个站是从 unpkg 取运行时的，也就是把首屏的一部分交给了第三方 CDN，自己托管会更稳。

换章那一下是一个透视转盘。首屏上那块铺满视口的区域本身是一个按钮，aria-label 会随当前章节变成 Explore Photography 这样的句子，类名是 homeCarousel__perspective fill。六章不是左右平移，是绕着一个轴转过来。

打包文件里 three 出现 212 次、gsap 94 次、lenis 20 次、SplitText 6 次。Lenis 在这里的角色很特别。html 上同时挂着 lenis 和 lenis-stopped，body 上挂着 hideScroll。平滑滚动库被加载进来，然后立刻被关掉——这个站要的是它管住滚动这件事，而不是让滚动更顺。

导航方式给了三条。右下角一对箭头按钮，aria-label 分别是 Previous 和 Next。键盘方向键实测有效，按一下右方向键章节确实换了。Index 面板里六个章名是六个可点的目标。一个不滚动的站最容易漏的就是键盘，这个站没漏。

减弱动画这边什么都没做。样式表里一条 prefers-reduced-motion 规则都没有，把系统偏好打开之后视频照样在播。第 06 章那一屏同时播着六七段视频，正是需要退路的场景。

底层是 Nuxt，页面资源全在 _nuxt 目录下，脚本一共 45 个文件、约 1.89 MB 的未压缩文本。

打开这个站并走完六章，一共传 60.3 MB，148 个文件。图片 40.5 MB，视频 18.2 MB，脚本 571 KB，字体 308 KB。第三方只有两家，unpkg 上的 Rive 运行时 528 KB，TrustArc 的隐私组件 58 KB。

体积集中在少数几个文件上。最大的 01@lg.mp4 是 12.4 MB，几张整屏背景图 set-6-bg-desktop@lg.webp、set-2-bg-desktop@lg.webp 各自接近 3.1 MB，页面上一共挂着 19 个 video 标签和 62 张图片。

这 19 个视频全部是 muted 和 loop，但没有一个写了 autoplay。播放由脚本控制，哪一章在正面就播哪一章的，不在正面的停着。对一个同屏能有六七段视频的站来说，这是必须做的事，否则解码器会同时开十几路。

服务器 275 毫秒给出第一个字节，页面 580 毫秒画出第一屏内容，load 事件 443 毫秒，累计布局偏移 0，整个加载过程只有 2 个长任务，最长 89 毫秒。

不过这里要说清楚一件事。探针跑到第 12 秒时，最大内容绘制记录到的元素还是 pageLoader__text，也就是加载动画里的那行字。首屏那 580 毫秒画出来的是 loader 本身，真正的内容要等后面几十兆下载完。一个 60 MB 的站首屏指标漂亮，多半就是这个原因——loader 先画出来，指标就停在那里了。看这类站的性能，得看能开始用的时间，不是首次绘制。

无障碍这边好坏都很明显。语言声明了，62 张图片全部带 alt，没有正值 tabindex，样式表里有 7 条焦点规则，方向键能用，箭头按钮和 Index 按钮都有 aria-label，转盘那块大区域的标签还会跟着当前章节变。

缺的部分集中在结构上。整个文档只有 main 一个地标，没有 header、没有 nav、没有 footer，而页面顶部和底部确实各有一条功能带。标题也只有一个 H1，六个章名没有一个是标题元素。对读屏器来说，这一页是一个没有分节、没有目录的整块。

WPO 拿了 7.40，Markup 和 Accessibility 并列最低 7.00，和上面这几条对得上。

两个平台隔了一天先后给了奖。

四维里 Creativity 7.58 最高，Design 7.26 最低，差 0.32。一个由顶级工作室做的品牌手册站设计分垫底，看着奇怪，但把评委票摊开就清楚了。巴哈马的 Jota Marques 四项全给 6，塞尔维亚的 Artemii Lebedev 给了 6.70，另外三位在 7.00 到 7.20 之间。没有一个人给出高分，这份成绩是五个人一致认为它好但不惊艳，而不是被某一项拖下来的。

7.22 的开发奖反而比站点总分低 0.16，这在这份库里少见。五位评委的总分从奥地利 Barry Baris Dogan 的 6.65 到法国 Nils Landrodie 的 7.55，跨度不到一分。Markup 7.00 和 Accessibility 7.00 并列最低，对应的正是那个只有一个地标、一个标题的文档。

FWA 那边给了 83 分，第 3 天。两边的刻度不通用，只能各读各的形状。

Resn 名下 62 个 SOTD 和 146 座 FWA，是这份库里战绩最厚的一家，profile 上的报价区间写的是十万美元以上。客户 Squarespace 自己名下也有 12 座 FWA，说明这家公司长期在做这类线上项目，不是第一次。

一家拿过两次年度最佳站点的工作室，给一个建站平台做品牌手册，这个组合本身就说明了这个项目的定位。它既是手册，也是 Squarespace 的一次能力展示。