构成主义海报是 双色油墨印在廉价纸上。所以色板以「纸」为基准,而不是以「白」为基准。 纸占 60–75%,墨占 20–30%,朱红只占 5–15% 且必须出现在最关键的一两处。
下表由 WCAG 2.x 相对亮度公式精算得出,不是目测。判定线:≥4.5:1 为 AA 正文合格;≥3:1 仅限 ≥24px 或 ≥18.66px 粗体。
| 前景 | 背景 | 对比度 | 结论 |
|---|---|---|---|
| 墨 #12100E | 纸 #EFE9DC | 15.69 : 1 | AA 正文 |
| 纸 #EFE9DC | 墨底 | 15.69 : 1 | AA 正文 |
| 黄 #E8B31A | 墨底 | 9.85 : 1 | AA 正文 |
| 蓝 #16407A | 纸 | 8.47 : 1 | AA 正文 |
| 深红 #B31B12 | 纸 | 5.63 : 1 | AA 正文 |
| 朱红 #D6281F | 纸 | 4.15 : 1 | 仅大字 |
| 纸 | 朱红底 | 4.15 : 1 | 仅大字 |
| 朱红 | 墨底 | 3.78 : 1 | 仅大字 |
| 灰 #8A8377 | 纸 | 3.10 : 1 | 仅装饰 |
| 暗红 #8E1B14 | 墨底 | 2.79 : 1 | 任何字号禁用 |
由此得出的硬规则:①正文字号的红字必须用 --kv-red-ink;
②朱红只用于大面积色块、几何图形与 ≥24px 标题;③灰色只能做网点装饰,不能承载文字;
④不要用 opacity 制造「浅色文字」——那会绕过全部上述结论。
气质要求:窄、重、几何、全大写、工业怪诞体。 以下是逐字族查询 Google Fonts 官方元数据(1950 个字族)后的核实结果 —— Anton / Bebas Neue / Archivo Black / Barlow Condensed 均不支持西里尔字母, 页面一旦出现俄文就会掉字体,因此本系统不采用。
材料成形应当取代审美的组合。对象应被当作一个整体来处理,因而没有可辨认的「风格」, 只是像汽车、飞机那样的工业秩序产物。构成主义是纯粹的技术性掌控与材料组织。 需要红色正文时用 --kv-red-ink(5.63:1,AA 合格), 而 朱红 #D6281F 只适合 ≥24px 的标题。
01 / 04 · MOSCOW 1924 · OFL-1.1 · 12 COL
| 字体 | 仓库 | Star | 许可证 | 用途 |
|---|---|---|---|---|
| 得意黑 Smiley Sans | atelier-anchor/smiley-sans | 14,905 | OFL-1.1 | 中文标题首选 · 窄斜骨架与构成主义高度契合 |
| 霞鹜文楷 | lxgw/LxgwWenKai | 26,243 | OFL-1.1 | 引文 · 楷体,气质偏温,作对比 |
| 思源黑体 | adobe-fonts/source-han-sans | 17,331 | OFL-1.1 | 正文兜底 · 多字重 |
| Noto CJK | notofonts/noto-cjk | 4,093 | OFL-1.1 | 兜底 |
圆、矩形、三角楔、线。不用曲线、不用渐变、不用柔和阴影、不用圆角。 楔形(尖角三角)是识别度最高的符号 —— 它来自李西茨基 1919 年的《用红色楔子打击白军》。
WEDGE 楔形
clip-path: polygon(),必须锁 aspect-ratio 防止尖角变形。
CIRCLE + BAR 圆与斜梁
红楔刺入圆 —— 直接用 mix-blend-mode: multiply 叠印。
RULE 线
粗线 6px 是构成主义特征,与瑞士风格的 1px 细线形成对比。
VISIBLE GRID 可见网格
瑞士风格隐藏网格;构成主义炫耀网格 —— 这是最大的差别。
目标是「这是印出来的」,不是「这是做旧滤镜」。 判断阈值:把页面缩到 50% 看 —— 如果颗粒依然明显,就是太重了。
MISREGISTRATION 套印错位
伪元素 + mix-blend-mode: multiply,偏移 ≤3px。超过 5px 就变成故障艺术了。
HALFTONE 半调网点
radial-gradient 重复,间距 3–6px。绝不能覆盖正文。
HARD SHADOW 硬边阴影
box-shadow 模糊值为 0。任何 blur > 0 都会破坏风格。
PAPER GRAIN 纸颗粒
SVG feTurbulence 内联 data-URI,opacity 压到 0.04–0.08。
工业时代的机器是分段、突然、有阻尼的,不是苹果式的丝滑缓动。
统一使用 cubic-bezier(0.85, 0, 0.15, 1),时长 120–320ms,
禁止弹性缓动与超过 400ms 的动画。把鼠标移到方块上试试。
硬切位移
transform + 机械缓动,无淡入。
裁切框扫过
用 clip-path: inset() 揭示,像印刷机的过版。
色块硬切
120ms 内完成颜色切换,几乎无过渡感。
降级:本页所有动效都遵守 prefers-reduced-motion。
开启该偏好后,动画时长被压到 0.01ms、滚动字幕停止。
实测:本系统全部关键 CSS 特性(clip-path / mix-blend-mode /
background-blend-mode / text-wrap / shape-outside /
mask / writing-mode / font-variant-numeric /
SVG feTurbulence / textPath)在 MDN 上均为
Baseline: Widely available。
--kv-red-ink(5.63:1)。
text-transform: uppercase 做视觉大写,
HTML 里保持正常大小写 —— 否则部分读屏软件会逐字母拼读。
vw 单位不感知容器宽度。组件放进窄栏时应改用 cqw 容器查询单位,
并始终配 overflow-wrap: anywhere 与容器 overflow: clip。
pointer-events: none,
且不得覆盖正文区域。开启「高对比」偏好时本系统会自动关闭质感。
prefers-reduced-motion。
.kv-btn 的 min-height)。
aria-hidden="true" 的独立 span 承载重影。