Essie Wine 网站预览
Essie Wine 网站预览

Essie Wine

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

页面以白色为基底。字体采用 BasicCommercial LT Com Roman、Adobe Caslon。视觉特点包括细线分隔、衬线字形、网格布局、大字排版。适合参考的场景：产品介绍页、品牌展示页。

查看原始网站

使用规范

建议采用

  • 三种章节色用于铺满边缘的分区：#c9a9b5 玫瑰色、#aa9e54 芥末色、#ffffff 白；不调底色、不混合，也不作小面积强调。
  • 全部标签、导航项与按钮文字采用 Elementa 小型大写，letter-spacing 0.042em；印章式字间距是标志性微排版。
  • 主要文字与插画线条使用 #062d32 Ink Teal，#000000 Carbon 留给表单标签和提交按钮等最高对比场景。
  • 分区纵向内边距为 100–150px，默认 section-gap 为 150px；页面像印刷页呼吸，而非仪表盘。
  • 输入框仅有底边框（1px #767676），没有盒框、填充或圆角，输入框就是彩纸上的印刷线。
  • 编辑分区由一个大衬线段落（BasicCommercial 38–49px）承载，不把编辑正文拆成多个短段或副标题。
  • 全部边角方正，任何位置均为 0px 圆角，设计身份是印刷，而非材料拟态。

建议避免

  • 不引入填充 CTA 按钮；唯一操作是 1px 黑边、透明填充的描边提交按钮。
  • 不使用阴影、渐变或抬升，深度仅来自分区颜色切换。
  • 不使用摄影、产品照片或 3D 渲染；#062d32 线描插画是唯一图像。
  • 章节色 #c9a9b5、#aa9e54 不用于小色块、徽章或图标填充，它们是铺满边缘的背景场，而非强调。
  • 不添加吸顶或悬浮操作栏、巨型菜单、侧栏或固定辅助导航；顶栏就是唯一界面框架。
  • 不变圆边角、不用胶囊形或任何 border-radius，容器、按钮与输入框均为尖角。
  • 不以多种无衬线字重建立层级，层级来自衬线与无衬线配对及尺寸，而非粗体/常规变化。

相似设计语言