SuperAPI AI 工具集

retro-print

设计与创作

查看项目

更新于 10-18 16:13

技能介绍

retro-print 是一个网页设计风格包,核心是模拟孔版印刷(Risograph)海报刚下滚筒时的样子:直白印刷、诚实套印偏移。它把整套视觉写成一页固定规则,供设计或实现时逐条遵循。

用途 为网页提供一套完整的复古印刷视觉方向,强调用纸张、油墨、网点和套印误差来建立识别度,而不是靠渐变、阴影或卡片式布局。

主要能力(规则要点)

  • 调色板固定:纸张 #F4EDDE,备用面板 #EBE2CF;印刷黑 #21201C;颜料墨最多两种,riso 红 #E4572E 与 riso 蓝 #355E8C,需要一种时用红,两种时用红加蓝,绝不用第三种。禁止渐变、模糊阴影、纯白背景与浏览器截图。
  • 排版固定:展示字体用单字重窄体/海报体(如 Anton、Archivo Narrow 800 或系统最重字重),全大写,clamp(2.8rem, 8vw, 7rem),行高 0.95–1.0;正文用安静衬线体(Newsreader、Georgia)16–18px、1.6–1.7;标签与元数据用等宽大写(IBM Plex Mono),字距 0.1em、10–12px。
  • 标志性套印偏移:展示文字用 text-shadow: 2px 2px 0 加红或蓝,最多用在 2–3 个标题上,不用于正文,每个页面只用一个偏移方向。
  • 纹理与细节:半调网点用 repeating-radial-gradient 实现,每页最多约 2 个面板,反相也算一个;元素可贴视口边缘,分隔可用全出血墨线;图章为等宽大写、圆形或胶囊形、虚线墨边、旋转 1–3°,每页最多两个;大号展示数字用红色配蓝色偏移;不用 emoji,不用线性图标,只用排版符号(✳、→、◆)或点阵标记。
  • 构图固定:海报网格采用非对称分栏(5/7 或 4/8),每个视口一个巨型元素,用 1–2px 墨线代替卡片做分隔;首屏顺序为踢环图章 → 巨型展示标题(带偏移)→ 右侧对齐的衬线正文块 → 两行等宽出版信息;功能区用编号印刷索引;价格区为三张海报卡片(纸/墨底/纸加红),2px 墨边、直角,墨底卡为推荐;照片做双色调并加 1.5px 墨框。
  • 动效几乎为零:仅 200ms 的 6px 上移入场,链接悬停 100ms 变红,无漂移、无滚动、无视差,以维持实物印刷的错觉。
  • 检查清单:出现超过两种墨色、任何渐变或模糊阴影、纯白背景、emoji、展示字非大写或小于约 2.8rem、正文用无衬线、全页无任何纹理、偏移用于正文,均视为不合格。

使用方式 该资料本身不含安装命令、代码包或调用接口;其使用方式是按页面列出的固定规则进行设计与实现。具体接入方式暂未提供。

适用场景 需要复古印刷质感的品牌页、活动海报页、作品集与专题页等。

限制 规则非常具体且强制,留给设计的自由度有限;资料中未提供收费、平台支持或效果数据。