Evernote 网站预览
Evernote 网站预览

Evernote

午后阳光洒在奶油纸上——一个温暖、真实可感的笔记本页面,白色卡片漂浮于米色背景上,深色文字自然呼吸,仅用一个鲜绿色高亮笔标记重要事项。

Evernote 是一个温暖纸张风格的生产力工作空间:采用奶油色画布(#f9f6f2)替代典型的纯白色 SaaS 背景,使每个屏幕都呈现出阳光照耀的笔记本页面质感。界面整体保持近单色——深灰文字、白色浮层卡片、细线灰边框——仅有一个鲜绿色(#94e130)作为唯一活力点缀,用于 CTA、图标和高亮部分。展示标题使用 Figtree 字体 300 字重,字间距紧凑,读来具有编辑性与轻盈感,而非企业风格。视觉节奏沉稳:居中布局的首屏堆叠、充足的区块间距、带有小色块分类标签的卡片轮播,以及一条单色深对比带(黑色搭配有机渐变斑块),打破奶油色的单调,为高能时刻注入活力。

查看原始网站

使用规范

建议采用

  • 使用 Paper Cream #f9f6f2 作为默认页面画布——绝不切换为纯白色用于全屏背景。
  • 首屏标题设置为 72px Figtree 字体 300 字重,字间距 -3.6px,以实现标志性的轻盈编辑风格。
  • 仅将 Lime Sprout #94e130 用于视口内单个元素:一个 CTA、一个图标或一个标签——绝不作为背景填充使用。
  • 所有按钮使用 5px 圆角,卡片使用 10px 圆角——这种微妙的圆润是整体温暖、非科技感性格的核心体现。
  • 保持主要区块之间至少 80px 的间距,以维持布局中充足的呼吸感。
  • 在奶油背景上搭配深色实心 CTA,与在深色区块中使用鲜绿色实心 CTA形成对比——CTA 颜色随表面背景切换而变化。
  • 在功能卡片上使用彩色 40px 图标方块(蓝色/绿色/黄色/紫色)来实现分类编码,无需额外添加文字标签。

建议避免

  • 不要使用纯白色 #ffffff 作为页面背景——这会破坏温暖纸张系统的整体感。
  • 不要将显示标题的字重设为 600 或以上——300 字重是标志风格,更重的字重会显得企业化。
  • 不要将 Lime Sprout 用于大面积背景填充、渐变或装饰条——在大范围使用时会失去其活力。
  • 不要为卡片添加阴影——系统依赖平滑的细线边框(#e7e7e7)进行分隔,而非立体感。
  • 不要使用完全圆润(9999px)的按钮——5px 是刻意设计的微妙圆角,而非胶囊形按钮。
  • 每屏不要引入超过一个额外的强调色——奶油色 + 深灰 + 鲜绿 三色体系是核心规范。
  • 不要在标题上使用比 -0.03em 更松的字间距——紧凑的字间距才是让大字号显得现代而非教科书式的原因。