Dovetail 网站预览
Dovetail 网站预览

Dovetail

在黑色月亮下呈现蓝图网格——微弱的线条、白色文字,一个紫色亮点。

Dovetail 以午夜指挥中心的语言运作:近黑色的画布由一道微弱的蓝图网格结构,搭配白色文字和一个柔和的靛蓝色点缀。表面从纯黑渐变至灰黑色,每一步变化都足够细微,仿佛是通过亮度而非阴影实现的提升。系统简洁且数据密集——Inter 承载所有文本负载,JetBrains Mono 标注分类标签,8px 圆角使容器清晰锐利而非模糊。色彩被严格控制:大部分界面保持无彩色,仅在图标、统计标记和图表元素中以 #6798ff 出现作为功能性的点缀。

查看原始网站

使用规范

建议采用

  • 使用 #0a0a0a 作为通用页面背景——主画布绝不可使用纯白色或更浅的灰黑色。
  • 将表面从 #000000 → #0a0a0a → #141414 → #1e1e1 → #313131 渐变,通过亮度传递层级感,而非依赖阴影。
  • 仅将 #6798ff 用于功能性的强调(如统计图标、图表系列、链接悬停)——绝不可作为大面积填充或背景色。
  • 标题使用 Inter 400–500 字重,字间距从 64px 时的 –0.036em 递减至 20px 时的 –0.012em。
  • 在区块眉题上使用 JetBrains Mono 12px,大写,字间距 +0.071em,颜色为 #a7a7a7。
  • 按钮、卡片和输入控件默认使用 8px 圆角;仅在内联标签和微小元素中保留 4px 圆角。
  • 每个主要行动号召(白色填充)必须配以透明的次级控件(透明 + #454545 边框),并位于同一操作组内。

建议避免

  • 不要引入第二个彩色强调——系统仅以靛蓝色为基调;增加绿色、红色或暖色调会削弱信号。
  • 不要使用阴影来表现层级感;深度来自表面的渐变,而非边框阴影。
  • 不要对正文进行居中对齐——段落和描述应左对齐;仅在标题和统计数据块中使用居中对齐。
  • 不要在 Inter 中使用小于 40px 的显示字号;若需更小,应改用 JetBrains Mono 以获得标签类的视觉感受。
  • 不要将按钮圆角超过 8px;8px 圆角是系统的标志性特征——完整胶囊形按钮仅保留用于导航链接。
  • 不要在深色画布上叠加彩色填充(除小标记上的 #6798ff 外);页面应呈现为黑白配色,仅带一个紫色亮点。
  • 不要将 #ffffff 用作表面或卡片背景,除非在反色的 CTA 按钮内部;白色仅保留用于文字和主要操作。