手写便签：静态视觉设计规范

参考页面：Ryan Miyoshi · Design @ Column
提取范围：仅记录首页手写便签的静态视觉结构，不包含网站背景、页面布局和交互动效。

1. 核心视觉

这是一个带有真实纸张重量感的手写便签组件。

它的识别度不依赖插画或纹理图片，而来自四个要素：

高饱和暖色纸张；
粗重、略不规则的手写字体；
整张便签轻微逆时针旋转；
从纸张背后向下延伸的多层柔和阴影。

整体应像一张刚贴上、下半部分略微离开桌面的纸，而不是带普通卡片阴影的矩形 UI。

2. 组件分层

便签由五个层级构成：

StickyNote
├─ Handwriting             z-index: 10
├─ Paper                   z-index: 2
├─ ContactShadow           z-index: 1
├─ MidShadow               z-index: 1
└─ AmbientShadow           z-index: 1

Handwriting：真实文字，处在最上层。
Paper：铺满容器的纯 CSS 纸张。
ContactShadow：较黑、较锐利，表现纸张刚离开承载面的区域。
MidShadow：更淡、更宽，连接近端与远端阴影。
AmbientShadow：最淡、最模糊，表现悬空纸张的大范围遮光。

不要把三层阴影合并为一层 box-shadow。分层渐变是产生“纸张下缘翘起”错觉的关键。

3. 尺寸与比例

桌面端

内容宽度：340px
内边距：上 20px、右 32px、下 20px、左 24px
CSS 盒模型默认使用 content-box 时，总宽约为 396px
高度由文本内容自然撑开，不写死
参考内容下，实际未旋转边界约为 396 × 284px

移动端

内容宽度：260px
内边距：上 16px、右 24px、下 16px、左 20px
手写文字：15px / 1.25
高度继续由内容决定

自适应建议

若组件需要容纳不确定长度的文本，使用：

width: min(340px, calc(100vw - 64px));

不要通过缩放整个组件适配手机。应减小内容宽度、内边距和字号，保持纸张与文字的清晰度。

4. 纸张颜色

参考便签的基础纸色：

Warm Signal Orange：#FF7519

这是组件自身的主色，不代表页面背景色。便签可放在浅色或深色环境中，但需要重新校准阴影：

浅背景：保留黑色透明阴影，透明度较低；
深背景：降低黑色阴影可见度，必要时增加一圈极弱的暖色反射；
与便签颜色接近的背景：增加明度差，避免纸张轮廓消失。

不建议使用渐变彩虹、发光描边或玻璃效果。纸张必须保持不透明、平面、实体。

5. 纸张表面明暗

纸张表面不是纯色，而是在约三分之一高度处加入一道非常轻的折痕式明暗变化：

background-color: #ff7519;
background-image:
  linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.08) 29%,
    rgba(255, 255, 255, 0.15) 31%,
    rgba(255, 255, 255, 0.20) 100%
  );

视觉逻辑：

0%–29%：上半部分保持基础色；
29%：出现极浅的暗带；
31%：快速切换为高光；
31%–100%：下半部分略亮，形成纸面方向变化。

暗带和亮带只相差约 2% 的位置，因此看起来像纸面轻微折曲，而不是明显的双色分区。

6. 纸张轮廓

形状：标准矩形；
圆角：0；
边框：无；
裁切纹理：无；
纸面噪点：无；
纸张层使用绝对定位铺满整个容器：inset: 0。

不要加入圆角、胶带、图钉或撕纸锯齿。此设计的随意感来自字体、旋转和阴影，不来自装饰道具。

7. 整体旋转

transform: rotate(-7.5deg);

旋转作用于整个便签容器，而不是只旋转纸张；
文字、纸张和阴影必须共享同一局部坐标系；
推荐范围：-5deg 至 -9deg；
单张主便签使用固定角度，避免每次渲染随机变化。

角度过小会退化成普通卡片，超过约 10deg 会影响阅读，并显得刻意。

8. 手写文字

字体性格

使用粗重的记号笔式手写字体：

字母轮廓应略不规则；
笔画粗细接近；
大写字母具有明显手写节奏；
不要使用优雅书法体、连笔签名字体或儿童粉笔体。

参考页面使用自定义字体 Ryry 的 700 字重。复用时需要确认字体授权；无法使用原字体时，应选择具有相同结构特征的合法替代字体。

桌面排版

font-family: "Handwritten Marker", cursive;
font-size: 20px;
font-weight: 700;
line-height: 1.25; /* 25px */
color: #000;

移动排版

font-size: 15px;
line-height: 1.25; /* 18.75px */

排版规则

推荐使用大写或接近全大写的字形；
左对齐；
不两端对齐；
字距保持字体默认值；
每行控制在约 18–26 个拉丁字符；
段落与签名之间保留一整行空白；
签名使用短横线或破折号开头，如 –RYRY；
文字颜色使用实黑或接近实黑，不使用半透明灰。

9. 内容留白

便签的左右留白不完全对称：

左侧：24px
右侧：32px

右侧比左侧多 8px，可以缓解旋转后文字逼近右上角的视觉压力。

上下留白都为 20px，但内容中的签名和空行会让底部呈现更松的视觉节奏。不要为了数学对称而压缩签名区域。

10. 主纸张远投影

纸张本体额外带一层很淡、距离很远的环境投影：

box-shadow: -12px 99px 100px rgba(0, 0, 0, 0.10);

这层阴影只负责大范围空间感：

水平略向左；
垂直明显向下；
模糊半径很大；
不使用扩散；
不承担纸边接触感。

它必须保持很淡，不能呈现为黑色光晕。

11. 三层背部阴影

所有背部阴影：

位于纸张下方；
左右各内缩约 0.5px；
变换原点为左上角；
使用 skewX(-6deg)，让阴影方向与旋转后的纸张不完全平行；
背景从上方黑色透明度渐变至完全透明；
不拦截鼠标事件。

第一层：接触阴影

top: 30%;
height: 100px;
filter: blur(1px);
background-image:
  linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.50),
    transparent
  );

作用：建立纸张中部开始离开承载面的明确起点。

第二层：中距离阴影

top: 45%;
height: 140px;
filter: blur(4px);
background-image:
  linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.20),
    transparent
  );

作用：让阴影宽度逐渐展开，避免从锐利阴影直接跳到大面积模糊。

第三层：环境阴影

top: 60%;
height: 180px;
filter: blur(16px);
background-image:
  linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.10),
    transparent
  );

作用：制造下方大范围、低对比度的悬空感。

移动端阴影高度

第一层：80px
第二层：120px
第三层：140px

移动端减少阴影延伸距离，避免组件看起来过高或遮挡后续内容。

12. 为什么阴影必须从纸张中部开始

三层阴影分别从纸张高度的 30%、45%、60% 开始，而不是统一从底边出现。

这会让视觉产生如下推断：

纸张上部贴近表面
        ↓
纸张中部开始弯曲
        ↓
纸张下部逐渐离开表面
        ↓
下方出现宽而柔和的投影

如果所有阴影都从底边开始，组件会变成普通悬浮卡片，失去纸张翘曲的物理暗示。

13. 推荐 HTML 结构

<aside class="sticky-note">
  <p class="sticky-note__copy">
    HEY FRIEND, I'M THE<br>
    HEAD OF DESIGN AT…<br><br>
    –YOUR NAME
  </p>

  <div class="sticky-note__paper" aria-hidden="true"></div>
  <div class="sticky-note__shadow sticky-note__shadow--near" aria-hidden="true"></div>
  <div class="sticky-note__shadow sticky-note__shadow--mid" aria-hidden="true"></div>
  <div class="sticky-note__shadow sticky-note__shadow--far" aria-hidden="true"></div>
</aside>

文字应位于 DOM 前部或后部均可，但必须通过 z-index 保持在纸张之上。装饰层加上 aria-hidden="true"。

14. 推荐 CSS

.sticky-note {
  position: relative;
  width: min(340px, calc(100vw - 64px));
  padding: 20px 32px 20px 24px;
  transform: rotate(-7.5deg);
  isolation: isolate;
}

.sticky-note__copy {
  position: relative;
  z-index: 10;
  margin: 0;
  color: #000;
  font-family: "Handwritten Marker", cursive;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.sticky-note__paper {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-color: #ff7519;
  background-image:
    linear-gradient(
      to bottom,
      transparent,
      rgba(0, 0, 0, 0.08) 29%,
      rgba(255, 255, 255, 0.15) 31%,
      rgba(255, 255, 255, 0.20)
    );
  box-shadow: -12px 99px 100px rgba(0, 0, 0, 0.10);
}

.sticky-note__shadow {
  position: absolute;
  z-index: 1;
  left: 0.5px;
  right: 0.5px;
  transform: skewX(-6deg);
  transform-origin: 0 0;
  pointer-events: none;
}

.sticky-note__shadow--near {
  top: 30%;
  height: 100px;
  filter: blur(1px);
  background: linear-gradient(
    rgba(0, 0, 0, 0.50),
    transparent
  );
}

.sticky-note__shadow--mid {
  top: 45%;
  height: 140px;
  filter: blur(4px);
  background: linear-gradient(
    rgba(0, 0, 0, 0.20),
    transparent
  );
}

.sticky-note__shadow--far {
  top: 60%;
  height: 180px;
  filter: blur(16px);
  background: linear-gradient(
    rgba(0, 0, 0, 0.10),
    transparent
  );
}

@media (max-width: 767px) {
  .sticky-note {
    width: min(260px, calc(100vw - 56px));
    padding: 16px 24px 16px 20px;
  }

  .sticky-note__copy {
    font-size: 15px;
  }

  .sticky-note__shadow--near {
    height: 80px;
  }

  .sticky-note__shadow--mid {
    height: 120px;
  }

  .sticky-note__shadow--far {
    height: 140px;
  }
}

15. 背景适配关系

组件不绑定页面背景，只需遵守以下关系：

环境	调整方式
白色或浅灰背景	使用参考阴影参数即可
暖色浅背景	保持纸张与背景至少约 20% 的明度差
深色背景	将三层阴影透明度整体降低约 25%–40%
复杂图片背景	在便签区域提供相对平静的留白，避免纹理穿过阴影
与纸色接近的背景	更换纸色，不要添加发光描边补救

阴影颜色应由环境光决定。默认黑色阴影适合中性浅背景；若页面有明显色温，可把阴影轻微染成背景的深色版本，但饱和度必须很低。

16. 内容使用原则

适合：

个人介绍；
创作者留言；
项目旁注；
编辑推荐；
简短提示和签名。

不适合：

长篇正文；
表单；
多按钮操作区；
数据密集内容；
需要严格对齐的列表。

建议正文控制在 45–90 个英文单词以内。中文使用时控制在约 60–110 个汉字以内，并选用清晰的手写黑体，避免过度潦草。

17. 禁止项

不使用圆角；
不使用玻璃拟态；
不使用发光外阴影；
不用单层均匀卡片阴影替代三层背部阴影；
不把纸面明暗做成明显的上下双色；
不添加胶带、图钉、回形针等无关装饰；
不让字体过细、过规整或过度书法化；
不随机旋转正文和纸张的不同层；
不使用图片模拟整张便签；
不为了适配内容而固定高度并裁切文字。

18. 验收标准

便签整体逆时针旋转约 7.5deg。
纸张为无圆角、无边框的实色矩形。
纸面约 30% 高度处有克制的暗转亮折痕。
文字是粗重、可读的记号笔式手写体。
正文行高约为字号的 1.25 倍。
文字层始终在纸张上方。
至少有近、中、远三层独立阴影。
三层阴影分别具有不同的起点、透明度、模糊和高度。
阴影表现下半部离开表面，而不是整张卡片均匀悬浮。
在移动端缩减字号、宽度与阴影高度，不整体缩放组件。
组件脱离参考网站背景后仍然成立。
不包含任何动画依赖。

手写便签