手帐风博客的设计笔记：从 Flatpaper 到 HiProfile

这个博客的设计灵感来源于 Flatpaper —— 一款为 Hexo 设计的轻量级博客主题，以简洁美观为核心，呈现清新自然的手帐风格。下面记录一下我的设计思路。

配色系统：温暖的纸张与自然

手帐风的核心是温暖、柔和、自然。我选择了一组以米色纸张为基底的配色：

色系	用途	代表色
纸张色	背景、卡片底色	#faf6ec
墨色	正文文字	#4f4635
鼠尾草绿	强调色、链接	#7fa46d
玫瑰粉	标签、装饰	#ecaca1
天蓝色	辅助强调	#9bc0dd
奶油黄	便签、高亮	#f7d77c

整体感觉就像一本摊开的手帐本，每一页都是温暖的米黄色纸张。

字体选择：衬线正文 + 手写装饰

• 正文：Noto Sans SC，清晰易读
• 标题：Noto Serif SC，带来书卷气
• 装饰：Ma Shan Zheng（马善政），手写体用于副标题和便签

卡片与装饰：贴纸与和纸胶带

手帐风的灵魂在于那些小小的装饰元素：

纸张卡片

.paper-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(74,70,53,0.06);
  border: 1px solid rgba(232, 221, 192, 0.6);
}

贴纸式标签

标签使用了圆角、淡色背景和边框，悬停时变色，就像手帐里的贴纸一样。

和纸胶带

在文章详情页头部，我用 CSS 模拟了和纸胶带的效果——带有斜纹纹理的半透明色块，微微倾斜地贴在卡片顶部。

总结

好的设计是润物细无声的。手帐风不追求炫酷，而是用细节传递温度。希望每一个来到这里的人，都能感受到像翻开一本手帐时的那种安心。