IFTTT 网站预览
IFTTT 网站预览

IFTTT

近黑色基底、胶囊形控件与细线分隔。

页面以近黑色为基底,搭配白色文字。字体采用 Avenir Next。视觉特点包括胶囊形控件、细线分隔、居中构图、网格布局。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 所有按钮和激活过滤器胶囊形控件统一使用 100px 边距半径——胶囊形是系统的核心操作几何形态
  • 交替使用 #222222 深色条带和 #ffffff 浅色条带以形成区块节奏;绝不连续出现两个深色条带或两个浅色条带
  • 让品牌色作为完整卡片表面(填充,而非强调)——Spotify 卡片应完全为绿色,而非白色加绿色边框
  • 将标题显示设为 68px Avenir Next 800–900 拉伸斜体,深色背景——这是唯一一次字体表达出情感的时刻
  • 所有卡片、输入框、徽章和非胶囊形按钮统一使用 8px 半径
  • 全局保持页面 1% 的色彩饱和度——色彩必须为特定服务品牌所独占,方能获得其空间
  • 以 #222222 作为深色画布;绝不替换为纯 #000000——轻微的暖调是刻意设计

建议避免

  • 不要为卡片或服务瓷砖添加阴影——深度仅通过区块条带和色彩对比传达
  • 不要在任何表面或文字中使用 #000000——始终使用 #222222 或温暖的近黑色
  • 不要在同一页面同时使用胶囊形和非胶囊形按钮样式——如果按钮不是胶囊形,需重新思考其可用性
  • 不要将色彩作为边框、文字强调或悬停高光应用于中性表面——这些色彩仅应出现在完整服务瓷砖上
  • 不要使用系统无衬线字体(Inter、Helvetica、Arial)——Avenir Next 的斜体标题和几何化正文才是系统的表达声音
  • 不要在任何表面添加渐变、玻璃态或模糊效果——系统刻意保持扁平
  • 不要在白色背景上放置彩色卡片,除非同时具备 8px 半径和品牌色边缘定义——扁平色彩需要几何边界约束