Midday 网站预览
Midday 网站预览

Midday

浅灰色基底、衬线字形与居中构图。

页面以浅灰色为基底,搭配近黑色文字。局部操作控件以绿色强调。字体采用 Hedvig Letters Sans、Hedvig Letters Serif。视觉特点包括衬线字形、居中构图、产品图像展示、网格布局。适合参考的场景:支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 将正文无衬线字体设置为 10–14px 时字间距为 0.05em,16px 及以上时为 0.025em——正向字间距是该系统的编辑特征。
  • 在展示标题处使用 Hedvig Letters Serif 字体,字号 72px,字间距 -0.025em;其下方搭配带有字间距的无衬线体正文。
  • 所有按钮、徽章和胶囊形控件的圆角半径统一设为 9999px——界面中没有一个元素是方形的。
  • 主要行动号召按钮(CTA)填充色为 #18181b,反色为白色文字;所有次要操作保持透明描边或空心胶囊形。
  • 卡片、输入框和表格行使用 1px #dbdad7 的细线边框——与画布同色,因此边框感觉像是刻印而非压印。
  • 画布底色保持为 #dbdad7——绝不切换为冷灰色、纯白色页面背景或非品牌调的奶油色。
  • 仅在数据上下文中使用 #4caf50(如柱状图条、正向数值表格、状态胶囊)——绝不作为按钮填充或装饰性强调色使用。

建议避免

  • 任何组件均不添加盒阴影——深度仅来自表面色调变化和细线边框。
  • 不要将 #4caf50 用于行动号召、链接或品牌装饰——它是数据色,而非操作色。
  • 不要对无衬线体正文应用负向字间距——正向字间距是该设计的语气,而非需要修复的错误。
  • 按钮、输入框、徽章或标签均不可使用方形角——所有交互元素均为胶囊形。
  • 不要引入蓝色、紫色或任何其他彩色强调——该系统设计上为单色。
  • 不要将 Hedvig Letters Serif 用于正文、标签或导航——它仅限于 24px 及以上尺寸的展示标题。
  • 不要使用冷灰色边框或背景——温暖的石质调色板(#dbdad7、#e6e4e0)是不可更改的。