Evernote 网站预览
Evernote 网站预览

Evernote

暖白色基底、居中构图与渐变展示。

页面以暖白色为基底,搭配近黑色文字。字体采用 Figtree、Inter。视觉特点包括居中构图、渐变展示、紧密字距、细线分隔。适合参考的场景:效率工具官网、协作产品介绍页。

查看原始网站

使用规范

建议采用

  • 使用 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 更松的字间距——紧凑的字间距才是让大字号显得现代而非教科书式的原因。