Modern Business Intelligence 网站预览
Modern Business Intelligence 网站预览

Modern Business Intelligence

暖白色基底、紧密字距与衬线字形。

页面以暖白色为基底，搭配近黑色文字。字体采用 Times (system serif fallback)、Grenette。视觉特点包括紧密字距、衬线字形、分屏构图、大字排版。适合参考的场景：SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • Pale Sage或Paper White表面上的所有正文都采用Deep Forest（#043f2e）；18.4:1对比度是刻意选择，而非后备方案。
  • 所有36px+展示标题和分区标题都采用Grenette衬线；超过36px的字号绝不要使用Graphik。
  • 填充CTA背景采用Chartreuse Lime（#c8f169），配Ink Black文字；这是系统唯一的填充按钮色。
  • 所有卡片、图像块和大表面采用16px圆角，按钮、输入框和标签采用4px。
  • 深度通过鼠尾草 → 森林绿 → 黄绿色的表面叠放建立，从浅到深、从中性到彩色，而非采用阴影。
  • 所有分区标题上方的眉题标签都采用Graphik全大写、12–14px和0.06em letter-spacing。
  • 摄影保持温暖、纪实和人性化；绝不用摆拍图库照片、双色处理或图像彩色叠加层。

建议避免

  • 展示标题不要使用Graphik；大字号中的衬线与无衬线对比是标志性特征，必须保持。
  • 卡片或按钮不要添加box-shadow；深度来自鼠尾草、森林绿、黄绿色叠放，而非抬升。
  • 页面背景不要采用纯白（#ffffff）；画布始终使用Pale Sage（#eef2e3），Paper White（#fcfcfc）只用于抬升卡片。
  • 正文或展示文字不要采用600+粗体；衬线标题字重保持400，Graphik UI最高500。
  • 每个视口不要使用超过一种彩色强调；Chartreuse Lime是唯一强调，Forest Mid是其悬停色，Vivid Green仅用于数据可视化。
  • 不要混用圆角，不使用8px、12px或20px；系统只有4px小元素和按钮，以及16px大元素和卡片。
  • 衬线字体不要用于36px以下；它会失去编辑式冲击力，在正文字号下也难以阅读。

相似设计语言