Endlesstools 网站预览
Endlesstools 网站预览

Endlesstools

如同展示数字艺术的黑盒画廊墙。

Endlesstools采用黑盒画廊美学:近黑画布退居幕后,让彩色艺术作品占据主导。调色板几乎完全无彩色,白色与狭窄灰阶承担每个结构角色,再以一种Twitter蓝链接强调和唯一的三色渐变——青柠色 → 琥珀色 → 洋红色——作标点,渐变只留给品牌展示场景。紧凑字号的Inter搭配一致的负字间距,呈现精密仪器而非营销表面的感觉。高度感由线条绘出,而非投影托起:每个容器边缘均为1px极细边框,绝不用阴影,使整个界面具有线框般的精确感,如同黑曜石上的蓝图。

查看原始网站

使用规范

建议采用

  • 每个整页表面都以Obsidian(#080808)作为基础画布,绝不要引入非深色背景。
  • 按钮、卡片和输入框采用10px圆角;7px只保留给小标签和行内链接。
  • 抬升通过1px细线表达,颜色为#373737、#505050或#ffffff,绝不用投影;边框是唯一有效的容器边缘。
  • 彩色只承担两种角色:Signal Blue(#1d9bf0)用于描边链接的边框或文字,Prism Gradient用于品牌标志展示场景;其余全部保持Paper White或Ash Mute。
  • 正文、标签和按钮采用Inter 400,标题和强调标签采用500;不要引入第三种字重。
  • 字号越小,字间距越紧:展示文字-0.025em、正文-0.030em、说明-0.033em;这是系统光学精确感的标志性特征。
  • 让模板艺术作品从边到边填满卡片,不设置内边距叠加层;图像本身就是卡片,标题覆盖其上。

建议避免

  • 不要用投影表现抬升;系统刻意由边框定义,添加模糊会破坏线框感。
  • 不要引入第二种彩色品牌色;Signal Blue与Prism Gradient是调色板中仅有的彩色工具。
  • CTA按钮不要填充;Outlined Primary Button是唯一操作样式,实色填充按钮会与细线优先的语言冲突。
  • 字体字重不要超出400和500;700粗体标题会在轻声紧密的500展示文字旁显得高声张扬。
  • 顶部导航不要添加边框、分隔线或分隔符;导航从边到边悬浮于黑曜石画布上。
  • 正文不要低于14/400,标签不要低于12/400;8–12px范围只保留给微型标签和小标签,绝不用作段落。
  • 模板卡片不要采用实色背景;每张卡片都是通向彩色艺术作品的窗口,涂满背景会毁掉画廊效果。