Dovetail 网站预览
Dovetail 网站预览

Dovetail

午夜时分的蓝图控制室。

Dovetail的设计语言是一种深色控制中心:近黑色画布,细微的网格线框,以及冷灰色字体,其视觉效果会逐渐退后,从而让图表和数据成为焦点。单一鲜明的藏蓝(#6798ff)作为系统的唯一色彩强调——它仅出现在公告栏、功能图标和激活高亮处,从不作为装饰性噪音。字体在所有层级均采用Inter,随着字号增大,字间距逐步收紧(从14px时的-0.012em到64px时的-0.036em),使标题呈现出压缩、工程化的质感,而非营销化的浮夸。组件设计轻盈:8px圆角,使用#1e1e1或#313131的细线边框,无阴影,表面通过色调变化堆叠,而非通过立体层次。整体节奏紧凑、技术性强,如同仪器仪表——更像工具间,而非演示提案。

查看原始网站

使用规范

建议采用

  • 所有按钮、卡片和输入控件均使用8px圆角——唯一例外是小标签和内联芯片使用4px圆角。
  • 页面背景设为#0a0a0a,仅将#1e1e1保留用于卡片和按钮表面,以便通过色调层级清晰表达表面层级。
  • 仅将#6798ff用于功能性强调:公告栏、功能图标、激活导航状态和数据高亮描边——绝不作为内容区块的背景填充。
  • 显示标题使用56-64px的Inter 600字体,字间距在-2.0至-2.3px之间,使其呈现出工程感,而非编辑性的随意感。
  • JetBrains Mono仅用于眉题、BETA标签和小型数据标签,采用正值0.85-1.0px字间距,绝不用于正文或标题。
  • 各区块间距保持在64-96px之间,元素间距保持在8-16px之间,以维持紧凑、技术化的密度。
  • 主要操作使用白色填充按钮,次要操作使用深灰色(1px #454545)描边按钮——绝不将藏蓝作为按钮背景色。

建议避免

  • 禁止引入第二类色彩——该系统为单色系,仅含藏蓝作为色彩强调。
  • 禁止使用阴影或立体层次来区分表面——应依赖#0a0a0a、#141414与#1e1e1e之间的色调变化。
  • 禁止在任何表面、按钮或背景上使用渐变。
  • 禁止将#6798ff作为填充按钮背景——它仅应用于图标、公告栏和小型强调描边。
  • 禁止在卡片或按钮上使用66px或胶囊形圆角——8px圆角是该系统的标志性设计。
  • 禁止正文文字小于14px,或使用低于400字重的字体——字体层级刻意保持紧凑,而非纤弱。
  • 禁止使用纯黑色#000000作为页面背景——它仅用于SVG插图填充;页面背景应为#0a0a0a或#141414。