Things 网站预览
Things 网站预览

Things

近白色基底、圆角卡片与宽松留白。

页面以近白色为基底,搭配深蓝色文字。视觉特点包括圆角卡片、宽松留白、单栏阅读排版、网格布局。适合参考的场景:效率工具官网、协作产品介绍页。

查看原始网站

使用规范

建议采用

  • 严格使用系统无衬线字体堆栈——绝不加载网页字体;页面的克制感正源于此
  • 将 #2576eb 保留用于交互时刻:链接、播放按钮、图标点缀。绝不大面积使用品牌蓝色
  • 以 #f2f5f7 作为满幅底色,仅用 #ffffff 用于抬升的卡片表面——这种双色调的表面语言是页面结构的核心
  • 正文文字设定为17-18px,字重400,颜色为#838b96,行高1.6,最大宽度限制在~540px,以保证阅读舒适度
  • 所有抬升的卡片和产品预览图统一使用18px圆角;按钮和输入控件使用6px圆角;圆形播放控件使用9999px圆角
  • 任何抬升表面均使用配对阴影堆栈(0 2px 8px + 0 0 2px 10%黑色)——提供环境感的抬升效果,同时叠加细线接触阴影
  • 不同区块之间以80px的垂直空白或全宽颜色带切换分隔,绝不使用可见的分隔线

建议避免

  • 不要引入填充型CTA按钮——设计语言采用文本链接和圆形播放控件,而非矩形操作按钮
  • 不要使用纯黑色(#000000)作为正文颜色——#303336 是‘墨’,纯黑会破坏页面整体的冷调柔和质感
  • 不要在首屏或区块中添加装饰性渐变、纹理或背景图像——底色即为设计本身
  • 不要将品类图标色调(黄色、粉色、绿色、青色)作为UI辅助色——这些是应用内的产品内容,而非品牌色
  • 不要为文字、图标或小型UI元素添加阴影——阴影仅用于抬升的卡片和产品预览图
  • 导航栏不要添加下边框或背景填充——它应像浮现在底色上的轻盈元素
  • 不要将正文行高收紧至低于1.5——空旷的垂直节奏与字体大小本身同样重要