Altitude Beverages 网站预览
Altitude Beverages 网站预览

Altitude Beverages

近白色基底、等宽文字标注与胶囊形控件。

页面以近白色为基底,搭配近黑色文字。字体采用 HelveticaNowDisplay、EditorialNew。视觉特点包括等宽文字标注、胶囊形控件、渐变展示、大字排版。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 主要首屏标题采用HelveticaNowDisplay 800字重、160px;它必须显得超大且紧缩,绝不是舒适或稳妥的尺度。
  • 超粗展示文字与EditorialNew 200字重副标题配对;200与800的对比就是排版身份。
  • 所有UI附属元素保持单色调色板(#fafafa、#d9d9d9、#07060b、#cdcdce);彩色只属于产品摄影。
  • 导航胶囊和主要按钮采用100px border-radius,产品卡片和内容容器采用44px。
  • 所有导航、按钮标签和元数据都采用DepartureMono全大写、11-12px和-0.071em字间距。
  • 主要内容块之间保持36-80px分区间距,让编辑式留白呼吸。
  • 产品摄影是唯一的彩色元素,绝不要将品牌强调色引入UI组件。

建议避免

  • 任何组件都不要添加阴影;全部深度通过表面色阶(#fafafa → #d9d9d9)和渐变过渡表达。
  • 卡片圆角不要低于44px,按钮不要低于100px;系统由胶囊与长圆形几何定义。
  • 正文不要采用HelveticaNowDisplay;它只留给60px+展示标题。
  • 按钮、徽章或交互元素不要使用彩色;所有操作都是暖灰或白色表面上的黑色文字。
  • 不要用彩色分区打破明暗交替;深色渐变是唯一的非单色表面。
  • 标题行高不要高于1.06;紧密行距是紧缩编辑式感受的一部分。
  • 不要给UI添加图标或插画;系统依靠摄影、组合标志和纯排版。