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,使黑色在奶油背景上显得温暖。
- 不可在文字后放置彩色背景;所有文字均位于亚麻画布、纸白或直接置于图像之上。