Craft Docs 网站预览
Craft Docs 网站预览

Craft Docs

暖白色基底、胶囊形控件与大字排版。

页面以暖白色为基底,搭配近黑色文字。字体采用 UntitledSerifFont、UntitledSansFont。视觉特点包括胶囊形控件、大字排版、紧密字距、错落拼贴。适合参考的场景:产品介绍页、品牌展示页。

查看原始网站

使用规范

建议采用

  • 所有主要标题(H1、H2)均使用`UntitledSerifFont`,以确立品牌文学化、手工制作的质感。
  • 为衬线标题应用紧密的负字间距(例如,-2.24px 在 56px 字号下),营造专业而精致的视觉效果。
  • 层叠纸张纹理与柔和的粉彩色块(`Mint`,`Marigold`)搭配,营造出标志性的拼贴美学。
  • 将复杂、多层的阴影风格应用于所有关键的浮层元素,如卡片。
  • 主页面内容置于温暖的 `Canvas`(#fff3e7)背景上,而非纯白色。
  • 结合 宽松 的角落圆角(14px,24px)与胶囊形按钮,打造亲切友好的界面风格。
  • 保持内容区块之间的垂直空白空间(至少96px)。

建议避免

  • 不要将衬线字体用于UI控件、正文内容或任何小于24px的文本。
  • 不要使用纯黑色文本;始终使用更柔和的`Ink`(#030302)。
  • 不要使用硬质、单层的投影效果;应采用柔和、深邃、多层的投影风格。
  • 不要在按钮或卡片上使用尖锐的0px圆角。
  • 不要为长篇内容使用纯白色(#ffffff)页面背景。
  • 不要使布局杂乱;应优先保证宽敞感和清晰、居中的构图。
  • 不要在大背景表面使用鲜艳的强调色;应将其保留用于小范围的高亮或示意图框中。