Graphite

近黑色基底、大字排版与紧密字距。
页面以近黑色为基底,搭配近白色文字。局部操作控件以橙色强调。字体采用 matterFont。视觉特点包括大字排版、紧密字距、细线分隔、居中构图。适合参考的场景:技术产品首页、开发工具说明页。
查看原始网站使用规范
建议采用
- 以 Obsidian Canvas #0a0a0a 作为页面主背景,并使用 1px Graphite Edge #262626 边框分隔模块。
- 将公共导航和标准按钮设置为 matterFont 14px/500,行高为 20px。
- 使用 60px/500、60px 行高显示风格,且仅使用 -1.5px 字间距用于主要首屏陈述。
- 相关控件、图标及紧凑 UI 元素之间的默认间距设为 8px。
- 卡片、产品媒体框和导航外壳使用 10px 圆角;矩形按钮使用 8px 圆角。
- 将 Paper White #e5e5e5 填充的控件保留用于高优先级的转化场景,而将 Charcoal Surface #262626 用于次级控件。
- 仅将 Signal Orange #ff8833 用于内联链接和方向性文本强调。
建议避免
- 不要将明亮的蓝色、黄色、橙色或红色作为通用填充按钮颜色。
- 不要在 Obsidian Canvas 背景上放置大面积的白色内容区域。
- 不要在产品框或客户卡片上使用大于 10px 的圆角;将 9999px 保留用于圆形和胶囊形控件。
- 不要用无边框的浮动卡片替代 #262626 模块边框。
- 不要将首屏标题设置为 600 字重以上的字重,或在 60px 标题样式中添加松散的字间距。
- 不要在正文、导航标签或密集的产品界面文本中使用饱和填充。
- 不要使用柔和的粉彩阴影;应使用黑色外阴影或低调的青灰内框处理。