Cosmos 网站预览
Cosmos 网站预览

Cosmos

近白色基底、网格布局与紧密字距。

页面以近白色为基底。字体采用 cosmosOracle。视觉特点包括网格布局、紧密字距、错落拼贴、扁平表面。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 仅使用亚麻画布(#f7f7f5f3)作为根级背景——页面层级永不使用纯白色;白色仅保留用于卡片和输入框。
  • 为每个容器、按钮和输入框应用 16px 的边框圆角——这是系统的唯一标志性圆角。
  • 首屏区域和展示文字使用 350 字重,字间距在 -0.04em 到 -0.05em 之间;400 以上标题不得加粗。
  • 每个主填充按钮必须配对一个相同内边距和圆角的轮廓次级按钮,使其在视觉上形成一组。
  • 由用户图像承载所有色彩内容;UI 色彩调性保持为黑色/白色/奶油色/灰色。
  • 网格卡片间使用 24px 间距,卡片内部使用 16px 内边距作为默认内容节奏。
  • 导航以单个浮动胶囊形控件(胶囊形)形式呈现,位于每页顶部,圆角为 9999px。

建议避免

  • 不可在界面中引入强调色(红、蓝、绿)——色彩仅属于用户内容。
  • 在 cosmosOracle 字体中不可使用 500 以上的字重;该字体未设计用于粗体显示,会显得笨重。
  • 不可为卡片或按钮添加阴影;系统刻意保持扁平,依赖圆角和表面对比度。
  • 不可将正文文字设置大于 18px 或小于 14px;cosmosOracle 字体设计范围为紧致的 14–18px 正文区间。
  • 不可在单页内混合使用不同边框圆角值(避免使用 8px 或 24px 圆角)——16px 为规则,仅图像拼图可使用 12px。
  • 不可使用纯 #000000;始终使用 #0d0d0d,使黑色在奶油背景上显得温暖。
  • 不可在文字后放置彩色背景;所有文字均位于亚麻画布、纸白或直接置于图像之上。