← 回归档
2026年11月3日 · 随手记

Cute-alism 笔记：可爱和粗野要同时出现

#设计#贴纸

找风格的时候翻到一个叫 Cute-alism 的设计参考，定义几乎就是我想要的东西：日本 kawaii 文化和粗野主义网页设计的正面相撞。

三条铁律

  • 纯黑描边不能去掉 —— 3~5px 的 #000 是所有卡片的骨架，去掉就塌成普通彩色网页
  • 阴影永远零模糊 —— 5px 5px 0 #000，看起来像把形状复制一份错位印上去的
  • 只用平涂色块 —— 不加渐变，需要变化就换相邻色块

圆润和尖锐必须挨在一起：粉色药丸按钮坐在直角黑框卡片里，monospace 标签配圆滚滚的标题。

贴纸怎么做

不用图片，伪元素就够了：

.sticker::before {
  content: attr(data-sticker);
  position: absolute;
  top: -18px;
  right: -12px;
  font-size: 2.2rem;
  transform: rotate(12deg);
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.35));
}

关键是那点歪掉的旋转角，还有故意越出卡片边界的位置。和纸胶带则是一条 14px 的色条，上下各压 2px 黑边，再整体歪 1 度。

容易翻车的地方

  1. 霓虹粉文字压白底对比度不够，正文老老实实用 #1A1A1A
  2. 贴纸一多就要管 z-index，不然会盖住链接
  3. 动画只动 transform 和 opacity，别去动 box-shadow
  4. 别因为「可爱」就把圆角加满，外层必须保持直角

少一半都不对味：全是可爱就变成 Cutecore，全是硬边就变回普通 Neobrutalism。要的就是两者在同一屏里打架 ✂️

📒 看看别的