Codex.io 网站预览
Codex.io 网站预览

Codex.io

近黑色基底、紧密字距与居中构图。

页面以近黑色为基底,搭配近白色文字。字体采用 Neue Haas Grotesk Text。视觉特点包括紧密字距、居中构图、大字排版、网格布局。适合参考的场景:技术项目官网、区块链产品介绍页。

查看原始网站

使用规范

建议采用

  • 每个视口使用 #e5ff5d(金黄信号)作为唯一主要操作,其余所有场景由金黄立方体承载品牌标识。
  • 设置显示标题文字大小为80px,使用Neue Haas 400字体,行高为0.90,全大写——在大字号中采用轻盈的笔触,是系统的核心声音
  • 所有交互元素(按钮、导航项、标签)使用 4px 圆角,卡片使用 12px 圆角——绝不将按钮圆角转为胶囊形。
  • 所有 10–12px 大写辅助标签的字间距增加 +0.027 至 +0.032em,使其读作终端/界面标记而非正文。
  • 在每个主要页面中,精确设置一个乳白(#eeeeee)反转带——亮度重置即为页面的戏剧性高潮。
  • 用细虚线 #565656 连接星座图中的节点——网络拓扑结构即为内容本身,而非装饰。
  • 所有图像必须为图标化且单色(白色或青色)——绝不引入摄影、渐变或装饰性插图。

建议避免

  • 禁止使用第二个色彩强调——系统的强大来自单色主导;加入蓝色、红色或紫色会破坏信号与噪音比。
  • 禁止将显示标题设为 700 或 600 字重——80px 400 字重是标志性的,加粗会使其变得普通。
  • 禁止使用胶囊形(9999px)按钮——4px 圆角更显锐利与建筑感,胶囊形会带来消费级或可爱的感知。
  • 禁止将内容置于带有阴影的圆角卡片背景上——所有内容均平铺于碳黑色画布或乳白反转带之上,不嵌套。
  • 禁止在悬停/激活状态使用多种青色变体——绿色为二值(开/关);状态变化应依赖不透明度变化和表面层级切换。
  • 禁止在单页中引入超过一个亮色带——叠加多个亮色区域会削弱反转效果的冲击力。
  • 禁止使用摄影、生活方式图像或人物肖像——该系统是抽象基础设施,而非消费品。