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

Altitude Beverages

如同单色编辑式跨页。想象一张时尚杂志跨页,除产品摄影外去掉全部彩色,所有叙事都由文字和留白承担。

Altitude Beverages像一张单色编辑式跨页:近白画布(#fafafa)承载超大排版陈述,饱和的产品摄影提供唯一彩色活力。系统在两个极端之间摆动,一端是轻盈、画廊般的浅色表面,配巨大160px展示标题和胶囊等宽导航,另一端是密集的炭灰至石板色渐变分区,作为电影式对照。每个UI元素都精简为基本几何:胶囊按钮、细线边框,没有阴影,也没有装饰。排版阵容才是真正的身份系统,细字重衬线字体EditorialNew用于编辑式点睛,超粗展示无衬线字体HelveticaNowDisplay用于首屏冲击,等宽标签字体DepartureMono用于导航;颜色和组件刻意退居幕后,让文字与摄影充分表现。

查看原始网站

使用规范

建议采用

  • 主要首屏标题采用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添加图标或插画;系统依靠摄影、组合标志和纯排版。