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。