Home 网站预览
Home 网站预览

Home

白色基底、衬线字形与胶囊形控件。

页面以白色为基底,搭配近黑色文字。字体采用 TWK Lausanne、PP Mondwest。视觉特点包括衬线字形、胶囊形控件、大字排版、宽松留白。适合参考的场景:支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 首屏标题使用 PP Mondwest,字重 400、字号 165–295px,lineHeight 为 0.9,letterSpacing 为 -0.04em;紧致的字间距是文字具有印刷油墨质感的关键。
  • 主要操作按钮使用 #2bee4b 填充色 + #93b799 绿色调阴影;切勿在强调按钮上使用灰色阴影
  • 为每张摄影素材应用 grayscale + hue-rotate(80deg) 滤镜,使所有图像与页面保持同一色调体系。
  • 保持画布背景为 #fafffa(温暖的骨白)——切勿使用纯 #ffffff,这种暖调是区别于普通 SaaS 面板的关键
  • 使用 TWK Lausanne 11px / 550 大写,字间距 +0.01em,用于所有微标签、导航项和按钮——微字体在这里承担了 界面外围元素 的功能
  • 将编辑类照片插图(半径 14px)浮动于显示文字行之间,而非以网格形式排列,呼应印刷排版
  • 在页脚前以满幅 #2bee4b 条带作为页面的锚点,其功能相当于最终签名

建议避免

  • 切勿引入第二个饱和强调色——页面整体为单色,仅以绿色为唯一色彩元素
  • 切勿在主要操作按钮上使用圆润的胶囊形状(9999px);5px 保持其锐利与矩形,契合编辑风格
  • 切勿将正文文字字号设得大于 18px——设计依赖于 18px 正文与 96px 以上显示文字之间的尺寸差异来营造节奏感
  • 切勿在卡片或内容区块上使用 box-shadow;层级感仅存在于绿色按钮上
  • 切勿以全彩呈现照片——所有照片必须经过灰度转绿调过滤才能属于该系统
  • 展示标题不要使用无衬线字体;Mondwest 与 Editorial New 的对比赋予页面编辑版面的声音。
  • 内容宽度切勿超过 1400px——超大字号与宽敞画布共同营造出报纸般的视觉感受