retro-print

复古印刷

唯一的视觉身份：一张刚从滚筒上印出来的孔版印刷海报——直接印刷，错位真实可见。

1. 调色板（固定）

• 纸张：#F4EDDE（温暖的印刷纸）。备用面板：#EBE2CF（色调稍淡）。
• 墨色：#21201C（印刷黑）。
• 墨色——最多恰好两种：孔版红 #E4572E 和孔版蓝 #355E8C。如果设计需求只用一种，就用红色。如果用两种，就用红色 + 蓝色。绝不使用第三种。
• 禁止渐变，禁止看起来经过抗锯齿处理的阴影（不使用模糊的 box-shadow），禁止纯白背景，禁止浏览器中的截图。

2. 字体排印（固定）

• **展示字体：**使用单一字重的窄体／海报字体（Anton、Archivo Narrow 800，或系统中最粗的字体），全部大写，clamp(2.8rem, 8vw, 7rem)，行高紧凑，为 0.95–1.0。要有海报的视觉力度，而非编辑文字的轻声细语。
• **正文：**使用安静的衬线字体（Newsreader、Georgia），字号 16–18px，行高 1.6–1.7——与高声醒目的展示字体形成印刷感对比。
• **标签／元数据：**使用等宽大写字体（IBM Plex Mono），letter-spacing: 0.1em，字号 10–12px，颜色为墨色或红色。
• **标志性特征：**套印错位——展示文字使用 text-shadow: 2px 2px 0 var(--riso-red)（或蓝色）。最多应用于 2–3 个标题，绝不用于正文。每页只使用一个错位方向。

3. 纹理与细节（体现工艺，提升质感）

• **半色调：**通过 repeating-radial-gradient 创建圆点区域（radial-gradient(var(--ink) 1.2px, transparent 1.3px)，网格间距为 8–12px），每页最多约 2 个面板。反向效果（墨色区域上的纸色圆点）也计为一个。
• **粗粝边缘：**元素可以与视口边缘齐平，分区线可以使用通栏墨色线条——呈现印刷出血，而非网页留白。
• **印章：**使用圆形或药丸形的等宽大写文字，并加上墨色虚线边框，旋转 1–3°，每页最多两个（例如，导航栏中一个，署名中一个）。印章始终使用虚线边框。
• **半色调数字：**使用红色的大号展示数字（01、02），并加上蓝色错位效果。
• 不要使用表情符号。不要使用线性图标——仅使用排印标记（✳、→、◆）或绘制的点阵标记。

4. 构图（固定）

• **海报网格：**使用不对称分栏（5/7 或 4/8），每个视口只放置一个巨大的元素；用分隔线（1–2px 墨色）代替卡片。
• **主视觉区：**引导标签印章 → 巨大的展示标题（应用错位效果）→ 右对齐的正文衬线文字块，占 4/12 宽度 → 下方两行等宽字体的版权说明（“SKITTIE VOL. 02 — PRINTED IN FIVE COLORS”）。
• **特色内容：**使用编号印刷索引——在由细线分隔的行中，依次放置大号数字 + 衬线字体名称 + 正文描述。
• **定价：**设计三张海报卡片——纸张／墨色区域（纸张类型）／纸张 + 红色；使用 2px 墨色边框和直角。墨色卡片作为主推卡片。
• 如使用照片：采用双色调处理——灰度 → sepia → 朝墨色方向 hue-rotate，对比度为 1.15，并加上 1.5px 墨色边框。如可用，通过淡淡的噪点添加颗粒感。

5. 动效（几乎没有——印刷品不会动）

• 仅使用一种入场效果：分区以 200ms 的向上弹入效果（6px）显现，仿佛纸张落下。
• 悬停：链接颜色在 100ms 内切换为红色。不要漂移，不要滚动，不要视差——营造实体印刷品的错觉。
• 文案中可以玩二维码／档案梗，但不要将其用于动效。

6. 检查清单（出现以下情况则判定页面不合格……）

• 使用的墨色超过两种（最多红色 + 蓝色）。
• 存在任何渐变或模糊阴影。
• 存在任何纯白背景。
• 存在任何表情符号。
• 展示字体未使用大写，或字号小于约 2.8rem。
• 正文使用无衬线字体。
• 页面中没有任何纹理（没有半色调、错位效果或印章）——这些是视觉身份的核心。
• 错位效果应用于正文。