Notion

温暖的纸本笔记本在午后阳光下
Notion 像午后光线下一本备受珍爱的纸质笔记本:温暖的近白色画布(#f6f5f4)富有触感,避免冷冰冰的临床感;宽松的无衬线排版让产品文案具有编辑版面的分量;色彩仅作为零星的标点——桃色胶囊形标签突出动词,一种蓝色锚定主要操作,轮番出现的强调色(珊瑚色、琥珀色、天空色、午夜色)则像便利贴一样为功能卡片铺底。卡片在画布上采用 1px 细线边框和 12px 圆角,没有阴影或界面外围装饰,宛如 Moleskine 笔记本中划线分隔的区块。动效俏皮而富有弹性,结合 200ms 的缓动过渡和会弹跳的角色标志动画,让界面活泼生动,同时避免纯粹装饰性的效果。
查看原始网站使用规范
建议采用
- 使用 #f6f5f4 作为页面画布,#ffffff 作为卡片表面——切勿颠倒此层级关系,将温暖的卡片置于白色页面上
- 保留 #0075de 作为每屏唯一的主操作色;所有次要操作应使用透明描边(#e6f3fe 背景)或文字样式
- 在所有展示尺寸中应用负字间距:96px 时为 -4.6px,72px 时为 -2px,54px 时为 -1.9px——正文文本保持正常字间距
- 使用 rgba(0,0,0,0.08) 的 1px 实线边框替代阴影,以区分卡片与画布
- 卡片使用 12px 圆角,按钮使用 8px 圆角;仅用于胶囊控件和首屏高亮胶囊控件时保留 9999px 边距
- 使用辅助色(#ffb110、#f64932、#62aef0、#02093a)绘制功能区块背景,而非添加边框或阴影,以创造视觉变化
- 保持 200ms 的运动时长,采用缓动时序用于悬停和过渡;仅将弹簧/弹跳动画用于字符标记和首屏元素
建议避免
- 切勿使用纯 #ffffff 作为页面背景——温暖的 #f6f5f4 画布是系统的标志性温度
- 切勿为内容卡片添加阴影——系统仅使用细线边框,阴影仅出现在产品 UI 模板和导航栏中
- 切勿在同一视图中使用多种色彩按钮——#0075de 是唯一的填充按钮;色彩变化应存在于卡片背景中
- 切勿使用 #000000 以 100% 透明度用于全部文本——通过同色系的透明度(100%、95%、60%、40%)构建层级关系
- 切勿将 Lyon Text 用于 UI 标签或导航——该字体仅保留用于 18px 的编辑正文场景
- 切勿对矩形内容应用大于 12px 的圆角——仅胶囊控件(9999px)和卡片(12px)为两种形状
- 切勿使用渐变——系统严格采用平面填充;视觉深度来自暖色到白色表面的对比以及辅助色卡片背景