Literal 网站预览
Literal 网站预览

Literal

近白色基底、产品图像展示与细线分隔。

页面以近白色为基底。局部操作控件以绿色强调。字体采用 Inter、Libre Baskerville。视觉特点包括产品图像展示、细线分隔、宽松留白、衬线字形。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • #278458绿色只用于主要CTA和品牌星形字形;绝不要作为文字、图标或边框上的装饰强调。
  • 标题采用Libre Baskerville 28–40px、500字重;展示文字绝不要替换为Inter或系统衬线字体。
  • 页面画布保持#f8f8f8,卡片表面为#ffffff,配1px的#eeeeee边框;避免彩色卡片背景,也避免超过rgba(0,0,0,0.04)的投影。
  • 按钮和图像采用4px圆角,卡片采用8px,大型媒体块采用16px;绝不要混入6px或12px等中间数值。
  • 所有分区标题都居中,功能和客户评价分区一致保持3列网格。
  • 正文默认采用Inter 15–16px、400字重和1.45–1.50行高;这是为阅读优化的基础规格。
  • 维持80px纵向分区间距,以保留轻盈、书页般的感受。

建议避免

  • 不要引入第二种彩色;单色系统就是品牌。
  • 正文、图片说明、按钮或任何UI元素不要使用Libre Baskerville;它只保留给标题。
  • 主要CTA填充不要采用#000000;这一角色由#278458承担,#000000只用于深色App Store按钮和标题文字。
  • 不要采用厚重投影、辉光或彩色阴影;抬升只通过边框和1–2%不透明度阴影传达。
  • 不要使用圆润胶囊按钮或超过16px的圆角;系统清晰、富有书卷气,而非泡泡般圆润。
  • 卡片或分区不要添加渐变、玻璃拟态或背景图像;表面保持平面。
  • 不要用不对称或左对齐首屏构图打破居中、对称布局;页面应像印刷书页。