Kraken 网站预览
Kraken 网站预览

Kraken

白色基底、紧密字距与分屏构图。

页面以白色为基底,搭配近黑色文字。字体采用 Kraken-Product、Kraken-Brand。视觉特点包括紧密字距、分屏构图、网格布局、渐变展示。适合参考的场景:区块链项目介绍页、生态网站首页。

查看原始网站

使用规范

建议采用

  • Kraken Violet #7132f5是整个界面唯一的饱和颜色,只有一种强调,不引入第二个彩色声音。
  • 标题采用48/36/24px Kraken-Brand、字重700及-0.0210em至-0.0140em字间距;负字间距让字体成为一个自信的完整文字块。
  • 卡片保持0px 4px 24px rgba(0,0,0,0.03)阴影,不要通过增大不透明度或模糊获得注意力,改用更大的标题。
  • 按钮、输入框和卡片默认8px圆角,9999px仅用于胶囊、徽标和图标容器。
  • 区块以#ffffff → #f6f5f9交替建立节奏;紫罗兰渐变卡片在每个区块中仅出现一次,作为标点,而非反复使用的表面。
  • Kraken-Product正文采用14px/1.43,元信息12px/1.33,微型标签10px/1.00;保持在这一尺度内,不创造新字号。
  • 状态变化通过填充而非颜色表达:标签页激活为Linen Mist填充,输入框聚焦时边框加深为Ink Black,不使用紫罗兰焦点环。

建议避免

  • 不要引入第二种强调色;绿色和红色仅用于语义性的价格变化指示,绝不用于按钮、图标或装饰元素。
  • 主要操作按钮不要使用9999px圆角,它属于胶囊、徽标和图标,CTA保持8px。
  • 输入框不要添加彩色焦点环或紫罗兰辉光;1px边框加深至#101114就是焦点信号。
  • 正文不要使用Kraken-Brand,其最小字号为20px;正文、导航、徽标和表格行仅属于Kraken-Product。
  • 不要叠加多个阴影,也不要添加彩色高度色调;唯一的3%黑色阴影就是完整的高度系统。
  • 正文段落不要在完整强度的Kraken Violet #7132f5上使用白色文字;它适合短标签和CTA,但在段落长度下效果变差。较长阅读内容使用更深的渐变端点(#4f24ad)上的白色。
  • 不要使用rgba(0,0,238)蓝色或任何浏览器默认链接颜色;所有链接均为Ink Black,可选紫罗兰下划线。