Dropbox.com 网站预览
Dropbox.com 网站预览

Dropbox.com

温暖的奶油色工作空间——纸上体现的编辑自信

Dropbox 被感知为一个温暖的编辑工作空间,而非一个冷冰冰的生产力仪表盘。画布采用奶油色纸张(#f7f5f2),而非无生命的纯白;文本使用温暖的近黑(#1e1919),而非纯墨。品牌通过一种自信的电蓝色(#0061fe)来表达,该色遍布所有操作表面,搭配 Sharp Grotesk 的标题和 Atlas Grotesk 的正文——这是一种定制的无衬线字体组合,赋予系统独特而精心设计的质感。布局宽裕且富有呼吸感,基于 6px 基础间距,采用 2 列卡片网格,分段式文本与视觉首屏,以及极简的层高。表面为扁平设计,搭配细线边框;圆角柔和(8–16px)。整体氛围亲切、沉稳且低调自信——与冷冰冰的企业级 UI 形成鲜明对比。

查看原始网站

使用规范

建议采用

  • 使用 Cream Paper(#f7f5f2)作为所有页面区块的基础画布——绝不以纯白作为全页背景的默认值
  • 仅将固色 #0061fe 用于主要操作按钮和激活导航状态
  • 在 Sharp Grotesk 中将标题字重设为 500(而非 700)——中等字重是其标志性特征
  • 所有按钮使用 16px 圆角,卡片和产品原型使用 8–12px 圆角
  • 以 6px 间距为基准对齐布局:12/24/48/72/96px 为最常用步长值
  • 搭配 Atlas Grotesk 16px 正文与 Stone Gray(#716b61)用于次要/辅助文本
  • 在解决方案/行业板块中使用 2 列卡片网格,搭配 24px 间距

建议避免

  • 不要使用纯白(#ffffff)作为页面背景——这会破坏温暖纸张的美学
  • 不要在标题中使用粗体(700)或中粗(600)字重——Sharp Grotesk 500 是标准
  • 不要为卡片或产品原型添加阴影——分离感来自细线边框和奶油到白色的表面过渡
  • 不要引入与 #0061fe 蓝色竞争的次级色彩强调
  • 不要在标题或正文使用 Times 叙事体——它仅作为系统备用字体出现
  • 不要使用完全圆润(9999px)的胶囊形按钮作为主要行动号召——16px 是标准圆角
  • 不要将奶油画布与冷灰(#e5e7eb、#f3f4f6)混合——应坚持使用温暖中性色系(#eee9e2 / #f7f5f2)