Kraken 网站预览
Kraken 网站预览

Kraken

磨砂玻璃上的紫罗兰账簿:一份精确的财务文档,由唯一的电光紫墨水承担全部表达。

Kraken是浅色模式的加密货币交易所界面,像一份精确的财务账簿:近白画布(#ffffff、#f6f5f9)、具有极高对比度的近黑字体(#101114),以及少量用于标题、图标、链接和主要操作的标志性紫罗兰色(#7132f5),充当品牌标点。表面几乎没有重量感,卡片以几乎不可见的3%黑色阴影和4px/24px模糊效果浮起,而非使用硬边框,使整个UI像印刷品而非装在盒子里。系统使用两款定制字体:Kraken-Product(400/500)处理所有10–16px UI与正文,Kraken-Brand(400/700)处理20–48px展示文字,配以紧凑负字间距(-0.0210em至-0.0140em),将标题压成自信紧凑的整体。信息密度刻意很高,导航栏、资产行情、数据网格和新闻卡片以12px栏间距紧密排列,让区块之间的留白提供呼吸空间。

查看原始网站

使用规范

建议采用

  • 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,可选紫罗兰下划线。