neo-brutalism

新粗野主义

唯一的风格：为一款毫不掩饰地拥抱网络文化的产品打造的技能海报——张扬、坦率、方正。

1. 配色（固定）

• 纸色：#FFF8E7（明亮暖色）。备用底色：#FFEFC2，稍深一些。
• 墨色：#0A0A0A——用于所有边框（2.5px）、文字和阴影。
• 强调色——恰好两种：一种主导的亮色强调色 #FF3878（色块、大元素、视觉焦点）+ 一种辅助的冷色强调色 #7CC6FE（次要色块、标记、亮色底上的贴纸）。两种是上限；一种也可以。
• 禁止渐变，禁止柔和／模糊阴影（box-shadow 必须是硬阴影，样式如 6px 6px 0 #0A0A0A），禁止玻璃拟态，禁止深色模式主视觉区。

2. 字体排印（固定）

• 展示文字： 700 字重的几何无衬线字体（Space Grotesk 700、Archivo 800），clamp(2.6rem, 7vw, 5.5rem)，行高 0.98，字距 −0.02em。句首字母大写即可；绝不使用斜体，也不要跟风把所有文字都改成小写。
• 正文： 使用相同字体系列，字重 400/500，字号 16–17px，行高 1.5。
• 标签： 等宽大写字体（IBM Plex Mono、Space Mono），11px，letter-spacing: 0.06em——用于印章、状态、“NEW”、版本说明。
• 只选用一种强调手法：将词语置于半透明的亮色／天蓝色底块上，或用 6px 墨色线条加下划线。选一种，最多使用 3 次。

3. 构图（固定）

• 所有元素都要有边框。 每张卡片、每个按钮、面板、贴纸、输入框：均使用 2.5px 实线墨色边框，边角做成直角或胶囊形（组件不是胶囊形时，不要使用 6–20px 的柔和圆角）。60–70% 的悬浮元素要加硬质偏移阴影；扁平组件（有边框、无阴影）可避免页面显得过于混乱。
• 主视觉区： 巨大的展示文字 + 超大胶囊形 CTA + 一块贴有天蓝色贴纸的亮色面板；面板和贴纸可以旋转 1–2°。每页最多旋转 3 个元素。
• 色彩分布： 每个视口中的亮色底块 ≤ 2 个，天蓝色底块 ≤ 2 个，其余全部使用纸色。亮色底块之间不得相邻。
• 区块： 交替使用纸色和墨色底块（墨色区块使用纸色文字）。允许全出血。定价：三张卡片——纸色／亮色／纸色；亮色卡片的阴影最大。
• 按钮：最小高度 56px，2.5px 边框，6px 6px 0 #0A0A0A 阴影；按下状态 = translate(6px, 6px)，并移除阴影。

4. 内容处理

• 不要使用表情符号。装饰性符号：✳、★、→、◦、•• 和简洁的绘制式 SVG（粗描边、纯色填充，仅使用两种强调色 + 墨色）。
• 文案也是品牌风格的一部分：直截了当，带点自信，绝不使用企业腔废话（“你多半有比学 SQL 更重要的事要做” > “简化你的分析工作流”）。
• 每页最多使用一个感叹号。可以夸赞读者（“你做得很好。”）。
• 价格详情应排成包装标签的样式：等宽字体、带边框，并盖上“最受欢迎”印章。

5. 动效（利落、明显、简短）

• 入场效果：150–250ms 的弹入，并让阴影有 2px 的过冲（cubic-bezier(0.34, 1.56, 0.64, 1)）；或直接使用 120ms 的弹出效果。不要冗长的电影式揭示。
• 悬停：边框颜色切换为强调色，或阴影增加 2px。按下：阴影收起（见 §3）。
• 循环动效：绝对禁止——不要使用跑马灯、弹跳箭头或无限摆动。页面应显得自信，而不是焦躁不安。

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

• 有任何元素没有 2.5px 墨色边框（背景和图片除外）。
• 有任何柔和阴影或渐变。
• 强调色超过两种。
• 旋转的元素超过约 3 个。
• 出现任何表情符号。
• 文案中任何地方出现一句“企业腔”话术。
• 两块亮色强调色底块彼此相邻。
• 有元素看起来像是直接套用了 Tailwind 模板。