Zelt 网站预览
Zelt 网站预览

Zelt

暖白色基底、紧密字距与细线分隔。

页面以暖白色为基底，搭配近黑色文字。字体采用 sans-serif (system)。视觉特点包括紧密字距、细线分隔、扁平表面、非对称构图。适合参考的场景：软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 每个视口恰好一个主要操作元素使用 Honey（#ffcd6d），不用于其他位置。
  • 所有按钮、导航、标签和卡片等交互表面采用 12px border-radius；胶囊形轮廓是标志性特征。
  • 58px 及以上尺寸搭配 500/700 字重，并将字间距收紧至 -0.043em；标题通过克制而非声量获得分量。
  • 页面画布使用 Parchment（#e4e0dd），内容采用 White 或 Linen 卡片及低不透明度的 1px Ink 细线边框抬升，不用投影。
  • 首屏块居中，包含一个 76–86px 标题、一个 18px 副标题和一个 Honey 按钮，不让首屏图像与文字竞争。
  • Apricot（#ffe2aa）用于通知栏、柔和标签等环境暖意，Honey（#ffcd6d）只用于操作；两种琥珀各有职责。
  • 分区间距保持 80px，让奶油画布呼吸；宽松感与颜色一样属于品牌。

建议避免

  • 不引入第二种饱和色；体系是暖单色加一种琥珀强调，第二种色相会破坏氛围。
  • 卡片、按钮或导航不加投影；仅通过 1px 细线边框和表面填充定义边界。
  • 展示标题的字重不低于 500；紧凑字间距必须配足够字重，才显得自信。
  • 交互元素圆角不低于 8px，卡片和按钮不低于 12px；尖角会与胶囊形语言冲突。
  • 链接、图标或强调不使用蓝、紫或任何冷色；全部彩色能量来自暖琥珀家族。
  • 大面积表面不用 Honey；强调色覆盖超过按钮大小的区域时会失去意义。
  • 正文不低于 16px，也不超过 18px；体系采用编辑比例，而非密集数据界面比例。

相似设计语言