Threads 网站预览
Threads 网站预览

Threads

近白色基底、文字主导与细线分隔。

页面以近白色为基底,搭配近黑色文字。字体采用 系统字体。视觉特点包括文字主导、细线分隔、宽松留白、圆角卡片。适合参考的场景:音视频产品介绍页、媒体内容展示页。

查看原始网站

使用规范

建议采用

  • 所有主要文字和结构图标描边用 Ink Black #000000,让黑色重量承载层级。
  • Meta Blue #385898 专用于超链接、认证徽章与图标强调,绝不作为填充表面或大色块。
  • 每个头像、按钮和徽章圆角设为 1000px,保持胶囊与圆形语汇一致。
  • 帖子以 1px Cloud Gray #d5d5d5 底边框分隔,不用卡片背景,也不只靠间距。
  • 信息流包在唯一最大宽 640px 容器内,圆角 18px,带 12px、4% 不透明度阴影光环。
  • 正文使用 15px/400 system-ui,行高 1.4,600 字重留给用户名与导航标签。
  • 所有交互控件无边框,状态通过 Ash Gray → Ink Black 色彩变化表达,而非填充或边框。

建议避免

  • 不要引入第二种彩色,系统单色加唯一蓝,添加其他色会破坏报纸纪律。
  • 按钮、卡片或表面不要用彩色或渐变填充,唯一填充表面是 Ink Black 登录按钮。
  • 单个帖子卡片不要用阴影,唯一浮起光环只属于信息流容器。
  • 文字不要大于 20px,系统在 12–17px 窗口内运行,超大字会破坏紧凑节奏。
  • system-ui 可原生渲染时不要用网页字体,定制字体会让个性偏离中性实用。
  • 侧栏图标按钮不要加边框或背景,必须像空白轨道上的一列符号。
  • 嵌入链接预览或媒体卡片圆角不要超过 8px,大圆角会与信息流容器自己的 18px 曲线竞争。