Daylit 网站预览
Daylit 网站预览

Daylit

近白色基底、插画元素与大字排版。

页面以近白色为基底,搭配深红色文字。字体采用 Tt Commons Pro Variable、Geist Mono。视觉特点包括插画元素、大字排版、紧密字距、细线分隔。适合参考的场景:金融产品官网、财务服务介绍页。

查看原始网站

使用规范

建议采用

  • 默认文字颜色和主要按钮填充使用 #4d1520;它是体系唯一的彩色支点,每个画面都应出现。
  • 页面画布使用 #fbf9f6 羊皮纸色,而非纯白;温暖象牙色让酒红更具表现力。
  • 所有卡片、按钮和输入框默认采用 6px 圆角;1440px 仅用于胶囊形徽章。
  • 44px 及以上展示标题使用 Tt Commons Pro 的 400 字重;大尺寸下轻盈的字重是标志性特征。
  • 酒红色阴影 rgba(77,21,32,0.16) 19px 32px 73px 仅用于首屏尺度的抬升卡片,不用于小型界面元素。
  • #faffa7 柠檬色用作插画块和徽章背景的装饰填充,不用作深色表面上的文字颜色。
  • 内容在 1200px max-width 列中居中,横向内边距为 24–40px,形成舒适阅读节奏。

建议避免

  • 不要引入冷灰(#e5e7eb、#f3f4f6、#6b7280);整个体系采用暖色,冷中性色会与之冲突。
  • 卡片或按钮不要使用 8px 或 12px border-radius;6px 圆角是体系独特几何形态的一部分。
  • 正文或标题不要使用 600 或 700 字重;体系的强调字重最高为 600,优先使用 400–500。
  • 文字不使用纯黑(#000000),即便正文也使用 #4d1520 酒红墨色。
  • 按钮、导航项或小型交互元素不要添加投影;阴影仅用于首屏尺度的抬升。
  • 状态不要使用蓝、绿或标准语义色;体系通过不透明度、位置与单一品牌色表达状态。
  • 超过两行的正文段落不要居中,应左对齐以便阅读;仅标题和简短 CTA 居中。