Threads 网站预览
Threads 网站预览

Threads

近白色基底、胶囊形控件与圆角卡片。

页面以近白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 系统字体。视觉特点包括胶囊形控件、圆角卡片、文字主导、细线分隔。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • 使用 #fafafa 作为页面画布,#ffffff 作为卡片表面 — 二者关系不可颠倒
  • 所有分隔均使用 1px 实线 #d5d5d5 边框;卡片或导航中禁止使用阴影
  • 所有按钮、头像和标签均使用 1000px 圆角半径 — 胶囊形是默认样式,而非例外
  • 所有帖子正文使用 system-ui 15px/400,用户名使用 13px/600,元数据使用 12px/700 — 字重决定层级,而非字号大小
  • 仅在认证标识、内联链接和悬停图标上使用 #385898 — 此靛蓝色是界面唯一的色彩标识
  • 关注等主要操作使用 #0095f6 轮廓按钮(非填充)呈现 — 仅登录按钮可填充,且仅填充为黑色,而非蓝色
  • 帖子卡片使用 18px 圆角,媒体缩略图使用 8px 圆角 — 两个圆角值承载整个视觉语言

建议避免

  • 不要为帖子卡片、顶部栏或侧边栏添加阴影 — 系统刻意保持扁平
  • 静止状态下操作图标不可使用颜色 — 仅使用黑色轮廓图标;色彩仅作为悬停反馈
  • 在12px以下不使用多个字体家族或字号 — 系统在字体上保持单调
  • 按钮不可使用品牌色填充 — 关注按钮为轮廓,仅登录按钮可填充(且填充为黑色,而非蓝色)
  • 禁止使用渐变、插图或装饰性图像 — Threads 在任何位置均不展示品牌艺术
  • 单个视图中不可使用超过两个边框半径值 — 卡片为18px,媒体为8px,所有圆形元素为1000px
  • 卡片内边距不可超过16px水平 / 12px垂直 — 系统紧凑且信息密集