Axelar 网站预览
Axelar 网站预览

Axelar

如同信号灯穿过深色格栅。

Axelar的界面像基础设施级的加密管线,以深色指挥中心美学呈现。画布位于近黑深渊色(#04070a),卡片、导航和抬升面板则通过逐步变浅的灰色建立刻意的表面层级,产生深度却不增加亮度。唯一的鲜亮橘色(#ff6314)拥有彩色表达的主导权,每个主要操作、每个产品表面和每个激活状态都取自它。电光绿、紫罗兰、洋红和青色等辅助强调色,只作为微小分类圆点和徽章出现,像网络拓扑中的节点指示,而非装饰性变化。Clashgrotesk以500/600字重承载棱角分明、几何化的语气,Inter提供易读正文,DM Mono则为技术标签和元数据盖上印记。首屏中的菱形格栅与散落彩点建立网络和图的比喻,并在合作伙伴分区的分类指示中再次出现。

查看原始网站

使用规范

建议采用

  • Signal Orange(#ff6314)只用于主要操作、产品表面和激活状态;它是界面中唯一具有主导权的彩色。
  • 按顺序采用表面层级:#04070a画布 → #090c0f卡片 → #0f1214导航 → #1a1d1f边框;深度来自色调阶梯,绝非阴影或亮度跳跃。
  • 所有标题、导航和交互元素采用Clashgrotesk 500/600;正文配Inter 400/600,技术标签和元数据配DM Mono 400/500。
  • 分类只通过节点强调色谱Node Green、Violet、Magenta和Cyan的小圆点指示(8–10px)编码,绝不要用作完整卡片或表面背景。
  • 所有按钮和输入框采用24px胶囊圆角,卡片采用8px,胶囊徽章采用100px;胶囊按钮是定义系统的形状选择。
  • 保持64px分区间距和24px元素间隙,形成舒适密度;让深色分区呼吸,避免在缺少宽松间距时纵向叠放超过3个元素。
  • 浅色分区反转表面层级:白色画布、#f0f5fa次级文字、#e1e6eb边框和#04070a标题;橘色产品卡片仍作为色彩标点。

建议避免

  • Signal Orange不要用于主要操作或关键产品表面之外的内容;将它稀释到次级元素中会使其失去主导权。
  • 不要用阴影表现抬升;系统采用中性表面层级中的色调阶梯,阴影会破坏平面的工程美学。
  • 绿色、紫罗兰、洋红和青色节点强调色不要用于大面积填充、渐变或背景;它们是信号圆点,而非表面处理。
  • 正文段落或长篇文字不要使用Clashgrotesk;其棱角几何在19px以下会影响易读性,超过两行的正文都使用Inter。
  • 不要任意混用圆角;系统有明确规格:按钮和输入框24px、卡片8px、胶囊徽章100px、小型行内元素4px。
  • 页面背景不要使用纯黑(#000000);画布必须是#04070a,以维持近黑表面层级,纯黑只用于SVG图标填充和最深层。
  • 不要给卡片或面板添加装饰渐变;系统唯一的渐变是首屏格栅辉光上的橘色linear-gradient,其余颜色保持平面。