X (formerly Twitter) 网站预览
X (formerly Twitter) 网站预览

X (formerly Twitter)

白色基底、胶囊形控件与网格布局。

页面以白色为基底,搭配近黑色文字。字体采用 TwitterChirp、Times。视觉特点包括胶囊形控件、网格布局、细线分隔、扁平表面。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • 所有可交互按钮、标签和头像都使用 9999px 圆角。
  • 所有界面文字都使用 TwitterChirp,并设置 font-feature-settings: "ss01"。
  • #1d9bf0 仅用于可操作元素,包括关注按钮、链接、认证徽章和激活状态。
  • 卡片之间使用 1px 的 #eff3f4 或 #cfd9de 边框分隔,不要使用阴影来定义卡片。
  • 主要文字使用 #0f1419,次要文字使用 #536471,第三级或禁用文字使用 #829aab。
  • 在 990px 的最大宽度内保持三列布局:左侧导航为 68px,中央信息流为 600px,右侧栏为 290px。
  • #eff3f4 只用于悬停状态和次要表面的填充。

建议避免

  • 不要引入 #1d9bf0 之外的任何彩色。单一强调色规则定义了这套系统。
  • 不要用阴影区分卡片,只使用细线边框。
  • 按钮、标签或头像不要使用锐利或适中的 0-8px 圆角。交互表面必须采用 9999px。
  • 正文或信息流内容不要居中。一切都应左对齐,以便快速浏览。
  • 正文不要使用字重 800。它只留给显示名称、标题,以及 20-23px 这一字号尺度。
  • 不要添加装饰图像、插画或品牌图形。用户内容就是视觉层。
  • 文字不要使用 #000000,而应使用定义这套系统的柔和近黑色 #0f1419。