playful-color

playful-color

唯一的风格：一张让人无法路过而不驻足的海报——张扬，却绝不凌乱。

1. 调色板（固定）

• 底色：奶油色 #FDF6EC 或亮纸色 #FFF9EF。绝不用纯白。
• 墨色：用于文字和描边的涂层黑 #101014。
• 色块——最多两种高饱和度墨色，精心挑选：钴蓝 #2E4BFF、番茄红 #FF4D2E、香蕉黄 #FFD100、薄荷绿 #2BD99B、品红 #FF3ED2。一种主色（铺展于大色块）+ 一种辅助色（用于点缀和标记）。
• 描边：凡是形状与纸面相接处，都使用 2–3px 实色墨色描边——贴纸裁切线风格。
• 不用渐变或投影模糊；仅使用硬边偏移阴影（6px 6px 0 ink），且只用于 2–3 个主视觉元素——每个视口最多一个。

2. 字体排印（固定）

• 展示字体： 极粗——Archivo Black、Bricolage Grotesque 800 或系统粗体 900。字号 clamp(3rem, 8vw, 7rem)，行高 0.95，字距 −0.02em。使用全大写或句首字母大写，并旋转一个词以突出强调。
• 正文： 使用同一字体家族，字重 500/400，字号 16–18px，行高 1.55。技术内容也可使用等宽字体。
• 标签： 等宽字体或粗体大写，letter-spacing: 0.06em，字号 11–12px，在色块上始终清晰易读。
• 只允许一种强调手法：在词语下方加 6px 强调色横条，或将词语置于旋转的实色块上。选一种，每页使用不超过 3 次。

3. 构图（固定）

• 网格外的活力，网格内的骨架： 所有内容均对齐 12 列网格，唯独 2–3 个主视觉元素（徽章形状、单个词语、按钮组）可刻意旋转 2–4°。旋转是调味料；过度使用就会显得失控。
• 色块分区： 交替使用纸色分区与通栏墨色或强调色分区（墨色分区使用纸色文字）。这是让鲜艳色彩显得设计得当的结构。
• 贴纸组件： 徽章和标签使用实色色块，配 2.5px 墨色描边，形状为方形或胶囊形——不用渐变，也不用玻璃拟态。
• 主视觉区： 大号字体 + 贴纸徽章 + 一个醒目的 CTA + 色块分区产品面板。主视觉视口中最多使用两种颜色。
• 定价：3 张醒目的卡片，每张都使用纯色色块（纸色 / 强调色 / 纸色）和墨色描边；硬边偏移阴影只用于主推卡片。

4. 内容处理

• 不用 emoji。绘制简洁标记：点阵、星号、箭头（线宽 3px）和带手绘感的 SVG 涂鸦线条——下划线、涂鸦圆圈。
• 允许并鼓励使用插画：由两种墨色构成的扁平几何形状（圆形、半圆、辐条）。不用渐变、3D 或照片级写实效果。
• 文案：简短、直接，每页最多使用一个感叹号。靠色彩营造热烈感，而非依赖句式。
• CTA：醒目厚实——高度至少 56px，2.5px 墨色描边，硬边偏移阴影；按下状态 = 移除阴影 + 平移 2px。

5. 动效（弹跳但短促）

• 弹簧效果：允许回弹——入场动画使用 cubic-bezier(0.34, 1.56, 0.64, 1)，时长 350–500ms，每个元素只播放一次（不重复）。
• 悬停：按钮平移 −3px，阴影增加 2px。Logo 摆动不超过 1 次。不用无限循环，也不用跑马灯。

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

• 调色板中的高饱和度颜色超过两种（奶油色和墨色不计）。
• 存在渐变或柔化模糊阴影。
• 每页旋转元素超过约 3 个。
• 存在 emoji。
• 正文字号小于 16px 或对比度不足（最低 4.5:1）。
• 展示字体小于 3rem。
• 设计中的任何元素看起来都像是怯于登场。