Drop 网站预览
Drop 网站预览

Drop

白色基底、衬线字形与分屏构图。

页面以白色为基底。字体采用 ABC Normal、Ivar Display。视觉特点包括衬线字形、分屏构图、大字排版、摄影展示。适合参考的场景：SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • Ivar Display 只用于 60px 或以上字号；更小会失去编辑力量，并与无衬线正文争夺注意。
  • 每个按钮、徽章和标签都使用 1440px 圆角；完整胶囊形是系统中最一致的形状。
  • 默认彩色表面优先使用 Lavender Mist #b8afda；它比橙或黄更能承载品牌身份。
  • 展示标题行高设为 0.78-0.90，让板状衬线像编辑正文一样靠紧排列。
  • 正文甚至副标题都用 ABC Normal 字重 300 或 400；500 只用于标记、标签和导航。
  • Ember Orange 只用于收入数字、“新世界”标题分段和单词强调；每区块最多一处橙色。
  • 卡片内边距保持紧凑的 14-16px，让大圆角与背景色承担视觉表达，无需阴影。

建议避免

  • Ivar Display 绝不用作正文、导航链接或任何低于 60px 的文字；小字号下衬线个性过于强烈。
  • 不要在现有三种薰衣草色、橙色、黄色之外，再引入第二种彩色强调；色板刻意保持精简。
  • 不要用 box-shadow 产生浮起效果；Drop 以白、黑、薰衣草色的硬色对比分隔表面，而不是深度。
  • 展示标题行高不要超过 1.0；紧密行高让文字像印刷，而不是网页渲染。
  • 任何交互元素都不要用 0px 尖角；即使小界面元素也至少使用 4-8px 圆角。
  • 不要将橙色和黄色相邻摆放；它们彼此会产生视觉振动，应用白或黑隔开。
  • 正文不要居中；除展示标题和收入数字外，所有内容左对齐。

相似设计语言