Kippo 网站预览
Kippo 网站预览

Kippo

近黑色基底、等宽字体与分屏构图。

页面以近黑色为基底,搭配粉色文字。字体采用 Source Code Pro。视觉特点包括等宽字体、分屏构图、渐变展示、细线分隔。适合参考的场景:专题展示页、项目介绍页。

查看原始网站

使用规范

建议采用

  • 每个文字元素,包括正文、标题、按钮、导航和标签,都使用 Source Code Pro,不加第二种字体。
  • 所有界面文字采用大写,letter-spacing 至少 0.1em;展示标题字间距达到 0.3–0.5em。
  • 卡片采用 #000000 或 #29292a 填充上的 1px #ffffff 边框,不用阴影或彩色填充。
  • #ee1f66 留给主要 CTA 背景、双色展示标题的强调词,以及激活或当前页边框状态;每个视口分区最多使用一次。
  • 按钮和标签为 10px 圆角,卡片与图像为 15px,图标按钮为 50px;矩形表面不超过 15px。
  • 保持充裕纵向呼吸空间:主要分区之间 100–150px、卡片内部 30px、行内元素之间 15px。
  • Source Code Pro 启用“zero”字体特性,使数字 0 带斜线,强化终端身份。

建议避免

  • 不引入第二种字体,包括 Inter、Helvetica 或正文无衬线后备;仅用等宽字体就是身份。
  • 卡片不以彩色、渐变或图像填充;卡片是透明面板,边框就是卡片。
  • 不通过投影抬升;深度来自重叠层与轮廓对比,而非模糊。
  • #ee1f66 不用于正文、非操作元素边框或大背景,以免稀释强调;它必须保持稀少。
  • 矩形表面 border-radius 不超过 15px,按钮不采用完全圆润的胶囊形,最多 10px。
  • 不混合浅色和深色主题;体系仅为深色,不设白底分区或主题切换。
  • 成功/错误/警告不使用红、绿或黄语义色;这些颜色在体系中仅用于装饰,深色画布、白字与唯一粉色强调就是全部信号词汇。