Endlesstools 网站预览
Endlesstools 网站预览

Endlesstools

近黑色基底、渐变展示与紧密字距。

页面以近黑色为基底,搭配白色文字。字体采用 Inter。视觉特点包括渐变展示、紧密字距、细线分隔、居中构图。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 每个整页表面都以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范围只保留给微型标签和小标签,绝不用作段落。
  • 模板卡片不要采用实色背景;每张卡片都是通向彩色艺术作品的窗口,涂满背景会毁掉画廊效果。