Doo 网站预览
Doo 网站预览

Doo

白色基底、产品图像展示与胶囊形控件。

页面以白色为基底。字体采用 Avenir Next。视觉特点包括产品图像展示、胶囊形控件、文字主导、细线分隔。适合参考的场景:工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

  • 所有屏幕的 CTA 均使用 Indigo Pulse (#3b3996) —— 这是营销页面中唯一的饱和填充色,若过度使用则会削弱其效果
  • 所有按钮和链接的边框圆角设为 39px 以呈现胶囊形状;所有卡片的圆角设为 30px —— 这两个圆角是系统中唯一的曲线
  • 所有展示和正文文本使用 Avenir Next 400;导航项和小标签仅保留 600 字重
  • 任何 29px 及以上字号的文本,字间距设为 -0.04em;13px 标签使用 0.1em 字间距以营造小型大写字母的眉题效果
  • 通过留白和 Slate (#6e6d7a) 细线实现分隔——绝不使用阴影
  • 保持营销页面的单色基调;所有色彩均由产品 UI 的柔和分类标签承载,截图中不出现额外色彩
  • 首屏和功能标题居中对齐;所有内容区块使用最大宽度 1200px 的容器

建议避免

  • 营销页面不可引入额外的彩色 UI 元素——Indigo Pulse 是唯一允许的饱和填充色
  • 禁止使用阴影、渐变或发光效果——设计刻意保持扁平和纸张质感
  • 除按钮/链接/胶囊控件使用 39px 圆角,卡片使用 30px 圆角外,禁止使用其他任何圆角值
  • 禁止使用 700 或 800 字重——Avenir Next 本系统最高仅到 600,而轻盈的 400 字重标题是其标志性特征
  • 内容区块禁止添加背景色——页面整体保持纸白;仅在特定提升面板中使用 Mist (#edeef3)
  • 营销页面禁止使用图标或装饰性图形——产品摄影和三圆点标志是唯一的视觉元素
  • 禁止使用紧密的列网格布局;整体布局居中且宽敞,而非信息密集