Dovetail 网站预览
Dovetail 网站预览

Dovetail

浅色基底、圆角卡片与大字排版。

页面以浅色为基底,搭配近黑色文字。字体采用 Lausanne。视觉特点包括圆角卡片、大字排版、紧密字距、细线分隔。适合参考的场景:金融产品官网、财务服务介绍页。

查看原始网站

使用规范

建议采用

  • 使用 #f9e5b1(奶油黄)作为首屏和特色板块的主画布——它是品牌的氛围,而不仅仅是背景色
  • 将大标题设定为 48–72px,使用 Lausanne 700 字重,负字间距(-0.0050 至 -0.0100em)以增强编辑风格的庄重感
  • 仅将 91px 车轮半径用于能力/专业标签;绝不应用于按钮或卡片
  • 用 8–12px 的间距堆叠胶囊标签,形成分栏页面右栏的标志性垂直列
  • 使用 1px 亚灰(#e5e7eb)细线分隔板块,而非阴影或背景变化
  • CTA 仅保留一个深色填充的胶囊按钮——按钮是点睛之笔,而非横幅
  • 文字链接搭配箭头符号(↗)在 600 字重下使用,以提示跳转至其他页面
  • 正文文字设定为 20–22px,略带正字间距(0.0050–0.0070em),以匹配印刷页面的阅读节奏

建议避免

  • 绝不使用阴影或渐变——该系统完全为扁平设计;深度仅来自奶油色叠加和细线边框
  • 不要引入额外的强调色——整个系统仅基于奶油黄、黑色墨水、暖骨色以及两种中性色运行
  • 不要将 9999px(胶囊)半径应用于卡片或图片容器——胶囊仅用于交互元素和标签,卡片保持 16px
  • 不要在正文使用显示粗体(700)——仅用于 28px 及以上的大标题;正文使用 400 字重
  • 正文文字绝不小于 18px——编辑风格的尺度从宽裕开始并保持宽裕
  • 长篇正文绝不居中对齐——所有小于 32px 的内容必须左对齐以提升可读性
  • 避免重叠装饰元素或 Z 轴分层——布局严格为水平和二维
  • 不要添加图标徽章、头像或装饰点——该系统以文字为核心,图像仅为唯一的视觉点缀