KV / Design System v0.1 1920 / 2026

构成主义

Конструктивизм
Web Design

米黄纸底、黑墨压结构、朱红引爆点。四种几何原语、一条斜轴、极端的字号对比、 可见的网格、被加工过的照片,以及机械化的动效。

开始查阅 无障碍红线

01

色彩系统

面积配比是硬约束

构成主义海报是 双色油墨印在廉价纸上。所以色板以「纸」为基准,而不是以「白」为基准。 纸占 60–75%,墨占 20–30%,朱红只占 5–15% 且必须出现在最关键的一两处。

--kv-paper
#EFE9DC
主纸色 · 60–75%
--kv-paper-dim
#E3DBC9
纸的暗面 · 分层
--kv-ink
#12100E
油墨黑 · 20–30%
--kv-red
#D6281F
印刷朱红 · 5–15%
仅大字/图形
--kv-red-ink
#B31B12
深红 · 小字专用
AA 合格
--kv-red-deep
#8E1B14
压印层
墨底上禁用
--kv-blue
#16407A
至上主义点缀 · ≤3%
--kv-yellow
#E8B31A
至上主义点缀 · ≤3%

实测对比度与使用授权

下表由 WCAG 2.x 相对亮度公式精算得出,不是目测。判定线:≥4.5:1 为 AA 正文合格;≥3:1 仅限 ≥24px 或 ≥18.66px 粗体。

前景背景对比度结论
墨 #12100E纸 #EFE9DC15.69 : 1AA 正文
纸 #EFE9DC墨底15.69 : 1AA 正文
黄 #E8B31A墨底9.85 : 1AA 正文
蓝 #16407A纸8.47 : 1AA 正文
深红 #B31B12纸5.63 : 1AA 正文
朱红 #D6281F纸4.15 : 1仅大字
纸朱红底4.15 : 1仅大字
朱红墨底3.78 : 1仅大字
灰 #8A8377纸3.10 : 1仅装饰
暗红 #8E1B14墨底2.79 : 1任何字号禁用

由此得出的硬规则:①正文字号的红字必须用 --kv-red-ink; ②朱红只用于大面积色块、几何图形与 ≥24px 标题;③灰色只能做网点装饰,不能承载文字; ④不要用 opacity 制造「浅色文字」——那会绕过全部上述结论。

02

字体系统

已核实西里尔覆盖

气质要求:窄、重、几何、全大写、工业怪诞体。 以下是逐字族查询 Google Fonts 官方元数据(1950 个字族)后的核实结果 —— Anton / Bebas Neue / Archivo Black / Barlow Condensed 均不支持西里尔字母, 页面一旦出现俄文就会掉字体,因此本系统不采用。

--kv-size-mega · Oswald 700 · clamp(3.5rem, 15vw, 16rem) 西里尔 ✓
ПОСТРОИМ
--kv-size-h1 · Unbounded 800 西里尔 ✓ · 可变 200–900
Art Into Life
--kv-size-h2 · Oswald 700 · 全大写 + 负字距
用红色楔子打击白军
正文 · PT Sans · max-width 68ch · line-height 1.55 俄罗斯本土设计

材料成形应当取代审美的组合。对象应被当作一个整体来处理,因而没有可辨认的「风格」, 只是像汽车、飞机那样的工业秩序产物。构成主义是纯粹的技术性掌控与材料组织。 需要红色正文时用 --kv-red-ink(5.63:1,AA 合格), 而 朱红 #D6281F 只适合 ≥24px 的标题。

--kv-size-label · JetBrains Mono · letter-spacing .18em

01 / 04  ·  MOSCOW 1924  ·  OFL-1.1  ·  12 COL

中文选字(许可证已核实)

字体仓库Star许可证用途
得意黑 Smiley Sansatelier-anchor/smiley-sans14,905OFL-1.1中文标题首选 · 窄斜骨架与构成主义高度契合
霞鹜文楷lxgw/LxgwWenKai26,243OFL-1.1引文 · 楷体,气质偏温,作对比
思源黑体adobe-fonts/source-han-sans17,331OFL-1.1正文兜底 · 多字重
Noto CJKnotofonts/noto-cjk4,093OFL-1.1兜底
03

几何原语

只用四种

圆、矩形、三角楔、线。不用曲线、不用渐变、不用柔和阴影、不用圆角。 楔形(尖角三角)是识别度最高的符号 —— 它来自李西茨基 1919 年的《用红色楔子打击白军》。

WEDGE 楔形

clip-path: polygon(),必须锁 aspect-ratio 防止尖角变形。

CIRCLE + BAR 圆与斜梁

红楔刺入圆 —— 直接用 mix-blend-mode: multiply 叠印。

RULE 线

粗线 6px 是构成主义特征,与瑞士风格的 1px 细线形成对比。

VISIBLE GRID 可见网格

瑞士风格隐藏网格;构成主义炫耀网格 —— 这是最大的差别。

04

印刷质感

必须极轻

目标是「这是印出来的」,不是「这是做旧滤镜」。 判断阈值:把页面缩到 50% 看 —— 如果颗粒依然明显,就是太重了。

КНИГИ

MISREGISTRATION 套印错位

伪元素 + mix-blend-mode: multiply,偏移 ≤3px。超过 5px 就变成故障艺术了。

HALFTONE

HALFTONE 半调网点

radial-gradient 重复,间距 3–6px。绝不能覆盖正文。

HARD SHADOW

HARD SHADOW 硬边阴影

box-shadow 模糊值为 0。任何 blur > 0 都会破坏风格。

PAPER GRAIN 纸颗粒

PAPER GRAIN 纸颗粒

SVG feTurbulence 内联 data-URI,opacity 压到 0.04–0.08。

05

组件

零圆角 · 触控 ≥44px

按钮

hover 用 --kv-red-ink(5.63:1)而非朱红 —— 朱红底白字只有 4.15:1,卡在大字阈值上。 焦点环用蓝色 4px,确保键盘用户可见。

卡片与编号

01 / 04

生产主义

艺术家即工程师。放弃架上绘画,进入工厂与印刷所。

标签与引文

OFL-1.1 西里尔 ✓ MIT

艺术不能集中在叫做博物馆的死寂神殿里。 — 弗拉基米尔·马雅可夫斯基

链接(必须默认带下划线)

字体系统 · 印刷质感 · 无障碍红线

来自「粗野主义 Web」原则:链接必须看起来像链接,只有链接和按钮响应点击。

竖排标签

ПРОУН · 1923
06

动效

机械化,禁止回弹

工业时代的机器是分段、突然、有阻尼的,不是苹果式的丝滑缓动。 统一使用 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。

07

无障碍红线

这套风格的固有风险
斜排文字 旋转不改变 DOM 顺序,屏幕阅读器不受影响,但视觉阅读效率显著下降。 规则:斜排只用于 ≤3 个词的短标签,正文永远水平。
红色对比度 朱红在纸上仅 4.15:1,小字不合格。正文字号的红必须换成 --kv-red-ink(5.63:1)。
全大写 用 text-transform: uppercase 做视觉大写, HTML 里保持正常大小写 —— 否则部分读屏软件会逐字母拼读。
极端字号 vw 单位不感知容器宽度。组件放进窄栏时应改用 cqw 容器查询单位, 并始终配 overflow-wrap: anywhere 与容器 overflow: clip。
质感叠加 颗粒与网点会降低文字清晰度。质感层必须 pointer-events: none, 且不得覆盖正文区域。开启「高对比」偏好时本系统会自动关闭质感。
动效 硬切与闪动可能触发前庭不适,必须遵守 prefers-reduced-motion。
触控目标 零圆角按钮在视觉上容易做小,触控目标必须 ≥44×44px(已写入 .kv-btn 的 min-height)。
套印错位的伪元素 伪元素内容可能被读屏软件朗读造成重复。介意时改用 aria-hidden="true" 的独立 span 承载重影。