A6 · 文库本
随手记
免费
- 每月 30 页
- 12 种格式
- 基础贴纸与胶带
紙品牌手册 · Brand Book
一页方眼，
一条丝带。
这本手册写给要做紙页的每一个人：设计、前端、3D、文案和做周边的朋友。里面的按钮、字号和颜色都直接取自网站的源码，改了网站，这里也会跟着变。
標01 · Logo
纸上一条丝带，
夹住这一天
名字就是标志的读法：紙（kami）是日文的“纸”，页是一页，紙页就是一页纸。标志叫「页角丝带」：一页方眼纸，一条臙脂色丝带从书脊里垂下来，越过纸的下沿。纸是今天这一页，丝带是夹在上面的书签，替你留住这一天。它把网站的两个母题装进 96 × 96 的方格里。
1.1
主标与字标
主标可以单独用在头像、图标和小位置；字标是主标加「紙页」和「ikami」，用在页眉、封面和一切第一次见面的地方。
「紙页」用 Noto Serif SC 700：「页」是简体字，Shippori Mincho 里没有这个字，所以两个字统一用思源宋体。「ikami」用 Instrument Sans 600，全小写。
字标里的文字保持为 <text>，送印刷或交给第三方之前必须转曲。
kamipage-lockup.svg首选
kamipage-lockup-reverse.svg深底
kamipage-mark.svg
kamipage-mark-reverse.svg
1.2
结构
所有尺寸都从一个单位 u 推出来：u = 丝带宽 = 点阵间距 = 12（在 96 的方格里）。灰色细线就是 u 网格，点阵正好落在网格交点上。
- 页描边 5/96，圆角 7.5。比 A5 略宽（1 : 1.27），小尺寸更稳。
- 方眼点阵 2 × 3间距 u，点径 5.5。圆点比同宽的线看起来小，所以比描边多 0.5。
- 丝带宽 u。从上沿下面穿出来，像夹在书脊里，不压住上沿。
- 燕尾缺口深 6.5 ≈ u/2，两边 45°。16px 版加深到 2/16。
- 让位缝丝带经过下沿时，纸边两侧各退 2.25：丝带是压在纸上的。
点阵：每天写一页
手帐内页的 5mm 方眼，也是网站浅色区块底下那层点。
丝带：夹住这一天
首屏本子里垂到桌上的那条、导航的当前项、收尾时合上的本子，都是它。
1.3
安全空间
四周至少留出 两条丝带宽（2u），也就是主标高度的四分之一。虚线以内不放任何文字、图片或边框。
字标用同样的 2u：u 随主标一起缩放。
虚线 = 2u细线 = 字标外框
1.4
最小尺寸
点阵在 24px 以下会糊成一片，所以 24px 以下换成 16px 专用版：去掉点阵，描边加粗到 1.5/16（相当于 9/96），丝带和缺口都放大。
24 px完整主标的屏幕最小尺寸
≤ 20 px换 16px 专用版（favicon、标签页、状态栏）
8 mm / 24 mm印刷最小：主标高 8mm，字标宽 24mm
1.5
浅底与深底
浅底用墨色版，深底用反白版：页框和点阵变成和紙色，丝带始终是臙脂色。放在照片上时，只放在安静、少细节的区域。
和紙 --paper墨色版
生成 --paper-2墨色版
夜 --night反白版
暮 --dusk反白版
照片上：只放在安静的浅色区域墨色版
1.6
周边标记：珐琅徽章
把点阵放大成满版方格，丝带从正中垂下。它是周边专用的「印」，不替代主标。
EMBLEM · ENAMEL PIN
方格 + 丝带，一枚别针
硬珐琅，镍色边，直径 25mm。米白色格子对应和紙，丝带用最接近臙脂的珐琅色号。
- 用在：徽章、贴纸、帆布袋、社交头像、包装封签
- 不用在：网站界面、App 图标、正式文件抬头
- 最小 18mm；深色面料上加一圈镍边，不改底色
1.7
六种误用
下面每一个都是用同一份 SVG 现场改出来的。看到它们，请直接换回原文件。
拉伸变形只能等比缩放
改颜色页框只用墨或和紙，丝带只用臙脂
旋转丝带永远垂直向下
加发光、投影不加任何效果
放在复杂背景上底下要干净，至少留 2u
ikami紙页
重排字标、换字体顺序固定：主标 · 紙页 · ikami
色02 · 色彩
九个颜色，
只有一个会说话
界面只用九个 :root token。和紙和墨撑起整页，臙脂是唯一的强调色；另外六种颜料色只住在胶带、贴纸和印章里。下面的色值都是从 css/site.css 实时读出来的。
2.1
界面色
2.2
用量
一屏里，和紙占大半，墨色负责文字，臙脂最多出现一两处：一个标题里的关键词，或者一条丝带。
深色区块里的强调词用浅臙脂 #E9B7A8，它不是新颜色，是臙脂在夜里的样子。
2.3
颜料色
六种日本传统色，只用在和纸胶带、水彩贴纸和印泥里，不做按钮、不做文字、不做底色。胶带半透明，能透出下面的字。
2.4
对比度实测
按 WCAG 2.2 现场计算。正文至少 AA（4.5 : 1）；只到 3 : 1 的组合只能用在 24px 以上的大字或图形上；更低的只能做装饰。
实测发现：鼠 --muted 在和紙上只有 4.3，在生成色上 3.8，而它正用在 12px 的眉标上。建议加深到 #6E645C（最后一行），色相不变。本手册自己的注释已经用了这个值。
字03 · 字体
五种字体，
各管一件事
衬线说大事，黑体说清楚，楷体像手写，等宽体标日期和规格，明朝体只写日文汉字。五种都是开源字体，可以免费商用。
3.1
字体与角色
收下一整页 128,400
告诉紙页今天发生了什么
和妈妈去了镰仓，海很蓝。
2026-09-26 · A6 · 300dpi
紙 始 仕組 帳 素材 料金
Shippori Mincho · 500 / 700
和文：日期章中间的「紙」、每个区块眉标上的一个日文汉字。字标「紙页」不用它（没有简体的「页」），改用 Noto Serif SC 700；字标里的 kamipage 用 Instrument Sans 600。
Google Fonts ↗3.2
字号阶梯
每一行都用 css/site.css 里的原规则渲染。红色的数字是你现在这个窗口下的实际字号，旁边是 390px 手机宽度下的值。
3.3
最小字号与排版
中文正文不加字距；大标题收紧 −0.01em；等宽标签放开 +0.02 到 +0.08em。中文行高 1.7 到 1.8。
12 px绝对下限，只给等宽标签
14 px中文最小，只用于注释和图注
16 px正文，手机上也不缩
17 px霞鹜文楷最小，笔画细
3.4
手写字，现场写
网站里的手写字都是霞鹜文楷，每个字带一点点旋转、上下错位和大小差。抖动由字的位置算出来，不用随机数，同一句话每次写出来都一样。
在左边改一句试试。
旋转 ±2.4° · 上下 ±1.6px · 字号 ±4%
2026.09.26 SAT紙
罫04 · 栅格
五毫米一格，
一格一天
网站的底是一张方眼纸。点阵、容器、列和区块间距都从同一个 20px 出发，logo 里的点也落在同一套网格上。
4.1
5mm 方眼点阵
20 px 一格（96dpi 下约 5.3mm，取整成 20 方便对齐）。点径约 2.2px，颜色 rgb(122 104 84 / .24)。
- 画在 WebGL 地面上，3D 物体会盖住它，阴影会压暗它
- 每个区块上下各 110px 渐隐，不和下一块硬接
- 首屏和深色区块不铺点阵
20 px ≈ 5mm
不透明度 24%
点径 2.2px（放大 5 倍）
logo 的点距 u = 1/8 主标
logo 的点距 u = 1/8 主标
4.2
容器与边距
内容最宽 1320px，两侧留 --gutter 20px。820px 是唯一的断点：导航收起，多列变单列或两列。
右边的数字随窗口实时变化，拖一下窗口看看。
—窗口宽 px
—内容宽 px
20边距 --gutter
—当前布局
灰 = 窗口 · 红框 = .wrap（max-width 1320px）· 深红 = 左右 20px 边距
4.3
列
不用 12 栏框架，每个区块只用它需要的比例。列间距 28 到 48px。
5 : 7怎么生成 · gap 48
4 : 8常见问题 · gap 48
4 等分数据 · 格式 · 手机 2 列
3 等分评价 · 价格 · 手机 1 列
2 : 1 : 1 : 1页脚 · gap 32
4.4
区块节奏
标准区块上下各 140px。紧跟在大区块后面的「信任」和「问答」收一点，读起来像上一段的续篇；进入深色和黄昏的区块上方多留一段，给渐变过渡。
数字从 css/site.css 实时读取。
4.5
明暗节奏
整页是一天：下午 15:30 的窗光一路到价格，素材库是夜里 21:00 的台灯，收尾是黄昏。明暗之间用渐变过渡，不硬切。
部品05 · 组件
拿来就能用的
小零件
这一章的组件直接用网站的 class 和结构，没有另写样式。可以点、可以输入、可以展开。
5.1
按钮
胶囊形，15px / 500。悬停时上浮 1px，0.3s。一屏只放一个实心墨色按钮；深色区块里换成和紙色。
图标只用 Iconify Solar Duotone，18px。
5.2
输入卡
首屏的一句话输入框。输入的字用霞鹜文楷，看起来就像写在纸上。
.prompt-card
5.3
价格档
三档用开本命名。推荐档铺生成色 --paper-2，按钮换成实心，其余两档只用细线。
5.4
常见问题
原生 <details>，不用 JS。右边的「+」是臙脂色，展开时转 45° 变成「×」。
生成的内页可以商用吗？
你生成的每一页都归你，可以打印、分享、做成周边。素材库里的贴纸和胶带由紙页绘制，随页面一起授权给你使用。
我的日记会被别人看到吗？
不会。保存的手帐只有你自己能打开。照片会交给识别模型看一眼，用来写字和排版。你可以随时删除一本手帐，它的照片、原图和生成的页面会一起删掉。
不会写字、不会画画也能用吗？
能。紙页就是为不想在排版上花时间的人做的。你只需要记得今天发生了什么。
details > summary + p
5.5
明信片
评价用明信片：白卡，左边是手帐成品的局部图，右边是霞鹜文楷写在横线上的正文，右上角盖一枚朱色邮戳。三张各转一个小角度（−1.2° / 0.8° / −0.5°），中间那张低一点。
下班路上想到什么就记一句，周末把一周的页打印出来，贴满一整本。
我是画画的，本来很挑。它挑的胶带和贴纸比我自己挑的还克制。
给孙女做的成长手帐，一张照片一句话，半年已经三十多页了。
.cards3 > figure.postcard
絵06 · 图像
只拍书桌，
不拍人
3D 只做书桌上的东西：本子、纸、胶带、贴纸、印章、笔、窗格和台灯。评价里的配图也只展示手帐页面，不使用人物肖像。所有画面都要慢、稳、有重量。
6.1
3D 场景
同一张橡木书桌，从下午到夜里再到黄昏。主光 3800K 暖、天光 7000K 冷补；夜里只有一盏 2700K 台灯。
6.2
照片
暖色胶片感：白平衡偏暖、低对比、轻颗粒，高光不过曝。放在页面上时一律做成拍立得或邮票，不直接铺满。
6.3
贴纸
水彩画法，边缘留一圈白色模切边，透明底。贴到页面上时带一点点投影和不超过 ±6° 的转角。
IKAMI · STICKER SHEET 04 · 水彩 + 白边
6.4
胶带与纸
胶带图案程序化生成，两端撕边、半透明。内页和软木板用生成的纹理，不用照片。
6.5
规则
3D 场景
- 只做书桌上的物件
- 纸有厚度、微微拱起
- 窗格投影切开光斑
- 不做 3D 人物、手和宠物
- 不用 Math.random，场景要能复现
照片
- 暖白平衡、低对比、轻颗粒
- 做成拍立得或邮票
- 人像只用在评价区
- 不用冷色、高饱和滤镜
- 不整幅铺满一屏
贴纸与胶带
- 水彩 + 白色模切边
- 只用六种颜料色
- 胶带半透明、两端撕边
- 不用扁平矢量或 3D 渲染贴纸
- 不让生图模型直接写中文
動07 · 动效
慢一点，稳一点，
有重量
东西落下来会轻轻回弹一下，胶带贴上去会按一下，本子合上时丝带留在外面。所有动作共用一条缓动曲线。
7.1
缓动与时长
--ease: cubic-bezier(.2, .8, .2, 1)：起步快、收尾很长，像纸片落定。红球用它，灰球是线性，对比一下。
| 用途 | 时长 | 曲线 |
|---|---|---|
| 按钮悬停上浮 1px | 0.3s | --ease |
| 导航丝带垂下 | 0.35s | --ease |
| FAQ「+」转 45° | 0.3s | --ease |
| 区块淡入上移 18px | 0.9s | --ease |
| 锚点滚动 | 1.3s | Lenis |
| 贴纸落下（每张） | 0.55s | 下落², 末 28% 回弹 |
| 滚动驱动的 3D | 阻尼 7 | damp() |
7.2
四个招牌动作
下面是纯 CSS 的小样，循环播放；网站里是 3D 版本，跟着滚动走。
09.26 SAT 晴
和妈妈去了镰仓，
海很蓝。
紙
① 页面自己组装
点阵 → 手写字一个字一个字写出来 → 照片落下 → 胶带按上 → 贴纸 → 日期章。「怎么生成」区块的主线。
② 贴纸落下，回弹，停稳
从上方带着转角落下，高度按平方衰减，最后 28% 里向上回弹一次，幅度不到自身高度的 3%。
九月二十六日
镰仓，海很蓝
吃了樱花味的
冰淇淋。
③ 本子合上
左半页绕书脊翻过来，盖住右半页；丝带留在外面，晃一下停住。收尾区块在黄昏里做这件事。
怎么生成格式素材价格
④ 丝带
导航里当前项下面垂下 10 到 17px 的丝带，0.35s；长丝带只做很小的摆动，不超过 ±1°。
回弹不过头超调不超过 3%，不做弹簧跳。
不无限转圈加载用点阵一格格亮起，不用转圈。
跟着滚动3D 场景读滚动进度，阻尼 7，不自动播放。
尊重「减少动态」系统开启时直接显示最终状态。
語08 · 语气
说「今天也写一页」，
不说「释放创造力」
紙页说话像一个会写手帐的朋友：安静、具体、温柔。用简体中文，称呼对方为「你」，日文只在眉标里点缀一个汉字。
8.1
四条原则
安静
不喊口号，不用感叹号。
对
今天也写一页。
错
立即释放你的无限创造力！
具体
说真实的一件小事，而不是一个形容词。
对
“下雨，在家烤了司康”就够了。
错
AI 智能赋能，海量模板一键生成精美手帐。
温柔
不催，不制造焦虑，不拿别人比较。
对
免费开始，不用信用卡。写完第一页，夹一枚书签。
错
还在等什么？限时优惠，错过再等一年！
把功劳留给人
紙页是帮手，日子是你的。说「你」，不说「用户」「您」。
对
你只管把日子过好。
错
尊敬的用户，本平台将为您打造专属手帐体验。
数字要能数
写能核实的数，带上单位。
对
30 秒生成一页，42 种内页格式。
错
极速生成，海量格式，快到飞起。
日文只做点缀
一个汉字放在眉标里，不写整句日文。
对
料金 价格
错
ようこそ！素敵な手帳ライフを始めよう
8.2
用词
用文具店里的词，不用互联网运营的词。
用
- 一页
- 手帐
- 内页
- 和纸胶带
- 贴纸
- 日期章
- 写一句
- 夹一枚书签
- 打印出来
- 今天
不用
- 赋能
- 一键
- 神器
- 海量模板
- 黑科技
- 颠覆
- 爆款
- 绝绝子
- 用户
- 您
8.3
标点与排版
| 中文和数字、英文之间空半角 | 30 秒 · A6 · 42 种 |
| 分隔用前后带空格的间隔号 | B6 · 最多人选 |
| 全角标点，引号用弯引号 | “下雨，在家烤了司康” |
| 省略号六个点，不用 ... | 写一句…… |
| 价格用 ¥，单位用「/ 月」 | ¥18 / 月 |
| 日期在标签里用等宽数字 | 2026.09.26 SAT |
| 不用感叹号，不用 emoji | 今天也写一页。 |
約束09 · 守则
要做的，
和不要做的
拿不准的时候，回到这两张清单。它们比前面八章都短，也比前面八章都重要。
○要
- 颜色只从
:root取新颜色先加 token，再用 - 每屏臙脂最多一两处一个关键词，或一条丝带
- 浅色区块铺 5mm 点阵20px、24% 不透明、上下渐隐
- 标志四周留 2uu = 丝带宽
- 24px 以下换 16px 专用标favicon 用 favicon.svg
- 手帐内页的字用 canvas 合成霞鹜文楷 + 轻微抖动
- 眉标放一个日文汉字Shippori Mincho 700，臙脂色
- 动效用 --ease，尊重减少动态慢、稳、有重量
✕不要
- 手画图标只用 Iconify Solar Duotone
- 渐变按钮、玻璃拟态、霓虹发光导航的磨砂纸条是唯一例外
- 用臙脂大面积铺底包括整块按钮区、整条横幅
- 把颜料色用在界面上桜、若草、藤、山吹、浅葱、朱只给胶带贴纸
- 做 3D 人物人只出现在评价照片里
- 用 Math.random场景和手写抖动都要能复现
- 让生图模型直接写中文会出乱码，字一律程序合成
- 拉伸、旋转、改色、重排标志见 1.7 的六种误用
配布10 · 下载
都在这里，
拿去用吧
文件大小在构建时由 brand/build/build.mjs 实际读取，不是估的。字标 SVG 里的文字没有转曲，印刷前请先转曲。
下载全部 · zip kamipage-brand-kit.zip · 1.38 MB · 标志 + 色板 + 徽章
| 文件 | 说明 | 格式 | 大小 |
|---|---|---|---|
| 标志 brand/logo | |||
| kamipage-mark.svg | 主标 · 墨色 · 透明底 | SVG | 636 B |
| kamipage-mark-reverse.svg | 主标反白 · 深底用 | SVG | 660 B |
| kamipage-mark-16.svg | 16px 专用版 · 无点阵 | SVG | 419 B |
| kamipage-mark-16-reverse.svg | 16px 专用版反白 | SVG | 349 B |
| favicon.svg | 网站图标 · 随系统深浅色切换 | SVG | 419 B |
| kamipage-lockup.svg | 字标 · 墨色（文字未转曲） | SVG | 1.3 KB |
| kamipage-lockup-reverse.svg | 字标反白（文字未转曲） | SVG | 1.3 KB |
| 色板与 token | |||
| kamipage-tokens.css | CSS 变量，从 css/site.css 生成 | CSS | 725 B |
| kamipage-palette.json | 15 个颜色：名、HEX、RGB、分组 | JSON | 2.2 KB |
| 周边徽章 | |||
| emblem-pin.png | 珐琅徽章 · 透明底 · 原图 | PNG | 1.29 MB |
| emblem-pin.webp | 珐琅徽章 · 网页用 | WEBP | 91.9 KB |
| 文件 | 说明 | 格式 | 大小 |
|---|---|---|---|
| 场景截图 brand/img | |||
| scene-closing.webp | 3D 场景 · closing | WEBP | 111.5 KB |
| scene-cork.webp | 3D 场景 · cork | WEBP | 132.3 KB |
| scene-desk.webp | 3D 场景 · desk | WEBP | 115.8 KB |
| scene-formats.webp | 3D 场景 · formats | WEBP | 76.3 KB |
| scene-lamp.webp | 3D 场景 · lamp | WEBP | 86.8 KB |
| scene-steps.webp | 3D 场景 · steps | WEBP | 98.7 KB |
| scene-tiers.webp | 3D 场景 · tiers | WEBP | 50.5 KB |
| 素材 assets/img/gen | |||
| tex-washi.webp | 和纸纹理 2048² | WEBP | 89.5 KB |
| tape-sakura.webp | 胶带图案 | WEBP | 66.2 KB |
| tape-grid.webp | 胶带图案 | WEBP | 22.0 KB |
| st-cat.webp | 水彩贴纸 · 透明底 | WEBP | 79.5 KB |
| st-sakura.webp | 水彩贴纸 · 透明底 | WEBP | 69.9 KB |
| st-ginkgo.webp | 水彩贴纸 · 透明底 | WEBP | 90.9 KB |
| ph-kamakura.webp | 胶片感照片 | WEBP | 89.2 KB |