Chester's Garden 网站预览
Chester's Garden 网站预览

Chester's Garden

近白色基底、细线分隔与衬线字形。

页面以近白色为基底，搭配近黑色文字。字体采用 Fraunces、Inter。视觉特点包括细线分隔、衬线字形、网格布局、摄影展示。适合参考的场景：产品介绍页、品牌展示页。

查看原始网站

使用规范

建议采用

  • 每个标题都采用Fraunces、字重300，字号为30、36或60px，行高为1.0-1.25，字间距为-0.03em；绝不将衬线字体设为粗体或半粗体。
  • 所有卡片表面都放在Paper Gray（#e5e7eb）底层上，以Bone White（#fafafa）填充；依靠这一级颜色变化实现分隔，不依靠投影。
  • 图片卡片采用8px圆角，小型UI控件采用4px圆角，强调标签胶囊采用9999px圆角。
  • 在Inter正文句子中，将个别词的字重从400提高至600以表达强调；绝不用下划线、斜体或颜色实现同一目的。
  • 标签背景选用Highlight Mint（#daf5ae）、Highlight Butter（#fde5a7）或Highlight Sage（#b7f2cc），并搭配Full Black文字；它们是UI元素中唯一允许的彩色填充。
  • 任何行内代码或技术标签都采用ui-monospace、14px及-0.025em字间距，使等宽文字块与周围的Inter协调对齐。
  • 导航和页脚保持为Paper Gray画布上的透明文字行，不添加填充、边框、标志或图标。

建议避免

  • 不要将Fraunces的字重提高到300以上；这种轻如低语的衬线字重是关键选择，加粗会破坏编辑式语气。
  • 不要为标准内容块添加投影、渐变填充或辉光效果；仅允许首屏图片卡片上的柔和10%黑色模糊阴影，以及1px内嵌纸边。
  • 不要为按钮、链接或行动号召使用明亮饱和的品牌色；本系统没有CTA专用颜色，操作以Ink Charcoal文字链接呈现。
  • 不要交替使用深色与浅色区块，也不要引入深色模式；整个页面始终保持同一种Paper Gray色调。
  • 不要添加图标系统、插画或3D图形；视觉内容仅限于Bone White卡片内的照片、书籍封面和截图。
  • 正文字号不要高于16px或低于14px；Inter的字号范围刻意保持狭窄，以维持紧凑的小刊节奏。
  • 两种行内强调色（Rust Underline、Navy Quotation）每句不要用于超过一两个词；它们是网站中色彩最鲜明的元素，必须保持罕见。

相似设计语言