66a.ca Design Language v2 / 分辨率法则 + 语法扩散

尺寸越小,
色带越

v1 的问题:导航 hover 和引用块那种几十像素的地方塞了 69 条色带,条纹糊成了噪点。Paul Smith 实物早就给了答案:polo 领口滚边、围巾下摆,小尺寸位置只出现三到七条读得出来的色带。条纹要跟尺寸换分辨率,这一版全站按这条法则重排,然后在他的语法上往外长。

take a closer look, then look again
分辨率法则 直接看扩散玩法
01

分辨率法则 : 条纹的四个档位

判断标准只有一条:这个尺寸下,单条色带还能不能被眼睛读出来。读不出来就降一档。

L0 单带小于 80px : 图标 / 项目符号 / 默认下划线
L1 三带 trim80 到 240px : 引用块边 / 票根 / hover 下划线
L2 七带截取窗240 到 600px : 分隔线 / 卡片边 / 进度条
L3 全彩 69 带大于 600px : 页顶 / 页脚 / 深色块滚边
反例,v1 的做法,120px 塞全彩:
糊成噪点
正解,同尺寸用 L1 trim:
三条都读得出来
02

短元素返工 : 导航 / 链接 / 引用块

导航 hover 现在是 L2 截取窗,而且每个菜单项分到 master 上不同的一段,试试从左到右挨个 hover,七个词是七段不同的条纹。页脚链接同理。

行内链接 : 默认单带,hover 才展开

平时它只是一条 2px 的酒红单带:Q3 放量计划,hover 的瞬间展开成 5px 三带 trim。默认状态越安静,hover 的那一下才有"打开内衬"的惊喜。重点数字照旧金色高亮:4.31

引用块 : 6px 三带竖 trim

Colour is three-dimensional and so by creating the stripes by hand you can see the colours at their most vivid. Paul Smith

v1 用的是 69 带竖排,在 4px 宽度里全糊了。现在是黄绿 / 酒红 / 石油蓝三段,每段约 8px 高度差,一眼三色。

列表与分隔线


03

按钮与表单

金色主按钮不变(paulsmith.com 实测色 #FCBC1E),hover 底边升起的条纹从全彩换成七带截取窗,28px 高的按钮里七条正好读得清。

04

扩散 : 在他的语法上往外长

以下四个玩法 Paul Smith 官网上没有,但每一个都严格长在他的语法里:节奏不变、克制不变、直角不变。

扩散一 : 截取窗,一条 master 养活全站

不再把整条条纹到处贴,而是把它当一卷布:每个组件从上面剪一段自己的窗口。七个导航项、三张卡片、五个页脚链接,各持一段,合起来才是完整的 master。识别度是拼图式的。

win 0 : 导航"法则"
win 1 : 导航"文字"
win 2 : 分隔线
win 3 : 按钮内衬
win 4 : loading

扩散二 : 条纹字,一年只用一次的音量

66a
background-clip: text · 只允许出现在 404 页 / 年度回顾 / splash,正文永远禁用

扩散三 : 数据条纹,让数字自己长成条纹

条纹的本质是"比例 + 相邻对比",这正好是数据。渠道占比按真实比例渲染成色带,宽窄节奏由数据决定,颜色从 master 单带借。装饰和信息合成一件事。

Meta 54% Google 17% Email 11% Affiliate 4% Organic 9% Referral 5%
Q1
Q2
Q3
Q4

柱状图每根柱子借一条色带,hover 会轻微伸长。图表不再需要独立配色方案,条纹就是图表的调色板。

扩散四 : 66a 原创色序,语法移植而不是颜色抄写

最彻底的扩散:宽度节奏一根不动(69 band、1:14、酒红位做锚),但颜色全部换成自己的 DNA:暖米中性色系(Oura 报告的底色)、主锚换成 Scoutlite 橙、冷区用森林绿和石油蓝。远看还是"那种条纹",近看已经完全是 66a 的了。

Paul Smith master : 原版复刻
66a original : 同节奏,换 DNA。中性 = 暖米/暖灰/炭,主锚 = EE7B2C 橙,冷区 = 森林绿/石油蓝,暖区 = 金/赭/锈

这是长期正确答案:网站真要上线,用这条而不是原版,识别度归自己,语法致敬他。

05

Stripe in Motion

唱片维持 L3 全彩(170px 直径够大),进度条降到 L2 截取窗。规则不变:同屏只许一个条纹在动。

部署进度
06

站点身份

同一套节奏四种音色,方案不变;wiki 建议直接换用 66a 原创色序做旗舰。

深色区块不变 : 它够长,配得上 L3

2026 下半年目标

$591,990年度目标
4.0+MER 底线
10%复购率目标
07

使用预算 v2

页顶 4px / 页脚 8px / 深色块滚边L3 全彩,全站常驻
分隔线 / 卡片边 / 进度 / 按钮内衬L2 七带截取窗
引用块 / 票根 / hover 下划线L1 三带 trim
图标 / 符号 / 默认下划线 / 涨跌色L0 单带,不限量
条纹字 (background-clip)每年一次的场合
小于 240px 的位置用全彩禁止,糊成噪点
条纹做大面积背景 / 同屏双动效永远禁止
圆角全站直角