OpenWeb 网站预览
OpenWeb 网站预览

OpenWeb

近白色基底、衬线字形与紧密字距。

页面以近白色为基底,搭配近黑色文字。字体采用 Copernicus、Helvetica。视觉特点包括衬线字形、紧密字距、居中构图、网格布局。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 所有正文和标题文字均使用 Copernicus(或高对比度的过渡衬线字体替代)设置为类型规模中的字号——切勿用无衬线字体替代正文连续文本。
  • 每个区块均以 #f1e9e7(淡粉纸)作为底色;切勿引入白色、冷灰色或其他任何背景色调。
  • 将 #0058fe(信号蓝)专用于激活状态、文中链接和激活标签页——切勿用于填充、大面积区域或装饰性点缀。
  • 在所有显示尺寸(≥40px)上应用激进的负字间距:最小值为 -0.047em,随字号增至 90px 时扩展至 -0.092em。正文字号(15–18px)保持在接近零的字间距。
  • 使用填充黑色的 CTA 按钮(锐利 0px 角,斜体 Copernicus 标签)作为唯一按钮变体;搭配内联链接模式用于次要操作。
  • 使用 1px #000000 细分隔线分隔不同区块并构建页面结构,而非边框、阴影或背景晕染。
  • 将关键编辑内容区块(首屏、小节标题、正文段落)在最大 1200px 宽度内水平居中,区块间距保持在 80–120px 之间。

建议避免

  • 切勿为卡片、按钮或浮动元素添加阴影、光晕或任何 box-shadow 值——系统设计为平面化。
  • 切勿在按钮、输入框、徽章或标签上使用圆角——保持为 0px。唯一具有圆角的元素是 40px 的等轴测设备示意图。
  • 切勿引入第二个强调色或第二个蓝色调——信号蓝是系统中唯一的色彩元素。
  • 切勿在大尺寸显示文字中使用除 Copernicus 400 外的任何字体,且必须搭配负字间距——粗体字重会破坏编辑版的氛围。
  • 切勿在正文、导航项或按钮标签中使用无衬线字体——衬线字体是整体语气;无衬线字体会破坏报纸版的幻觉。
  • 切勿将内容包裹在带有背景、边框或内边距的卡片中——让文字直接位于淡粉纸底色上。
  • 切勿使用 #ffffff 作为页面或区块背景——这将破坏定义品牌调性的温暖编辑基调。