Analogue aF-1 网站预览
Analogue aF-1 网站预览

Analogue aF-1

白色基底、大幅摄影展示与细线分隔。

页面以白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 ITC Garamond Std Light Narrow、Graphik Medium。视觉特点包括大幅摄影展示、细线分隔、扁平表面、衬线字形。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 在引语、产品名称和分区开场等编辑式时刻,使用Garamond 400字重、40-64px;这是系统的标志性语气。
  • #002fff只保留给任一屏幕上的唯一主要操作;绝不要用于装饰、标签或次级按钮。
  • 卡片采用20px圆角,产品图像采用30px圆角;圆润柔和的几何形态与鲜明的黑白调色板形成对照。
  • 分区以50px纵向间距组织,卡片内边距保持20px;紧凑密度是有意的,系统通过留白呼吸,而不是膨胀的内边距。
  • Graphik Medium只使用400字重;不要引入粗体或细体变体,单一字重的一致性就是设计语言。
  • 呈现模拟或怀旧图像时,以胶片条齿孔图案框住满幅摄影;边框本身就是品牌宣言。
  • 任何超过30px的展示文字都采用-0.018em或更紧的letter-spacing;紧密字间距让几何形态形成建筑式密度。

建议避免

  • 绝不要将#002fff用于背景、图标或文字;它只能是按钮填充色,装饰性蓝色会削弱它作为系统唯一操作色的力量。
  • 不要引入投影;系统采用平面表面和细线边框,唯一允许的阴影是输入框内嵌的白色辉光。
  • Garamond不要使用粗字重;轻盈字重正是要点,粗体Garamond会将编辑式低语变成高声呼喊。
  • 交互元素的圆角绝不要低于10px;圆润几何是高级感不可更改的要求。
  • 不要给UI组件添加渐变;渐变只作为满幅分区上的氛围色洗出现,绝不用于按钮、卡片或输入框。
  • 任何状态都不要使用暖色、绿色、橘色或红色;系统由无彩色加钴蓝组成,需要成功或错误状态时使用中性色阶(#171717、#696969)。
  • 功能性UI文字,如按钮、标签和输入框,不要使用Garamond;它只用于编辑式时刻,所有功能性文字都由Graphik处理。