Midday 网站预览
Midday 网站预览

Midday

报刊风格的羊皮纸质感——72px 的衬线体标题置于温暖的石质底色上,搭配带有字间距的无衬线体正文,胶囊形控件,无任何阴影。

Midday 的阅读体验如同一份报刊编辑版的数字化转译:温暖的羊皮纸画布,带有字间距的无衬线体正文,以及用于标示章节的衬线体展示字体,如同杂志中的引语。整个系统以单色呈现,近乎简朴——表面采用温暖的米白调,边框为极细线条,色彩仅作为功能性的注解出现,例如财务数据中的单一苔绿色,以及深色填充的行动号召按钮(CTA)。所有交互元素均为胶囊形;没有一个元素是方形的。设计完全为平面——无阴影、无渐变、无装饰性深度。间距紧凑且富有节奏,基于 4px 网格,使密集的账目数据保持可读性,而无需额外留白。

查看原始网站

使用规范

建议采用

  • 将正文无衬线字体设置为 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)是不可更改的。