Aker 网站预览
Aker 网站预览

Aker

如同暗房画廊墙。纪念碑般的文字像高端建筑画廊展品标签一样,悬浮于低饱和风景摄影上方;白墙、温暖陶土聚光,其余全部退居幕后。

Aker采用高端房地产开发商的视觉词汇:每个分区由戏剧性满幅摄影锚定,唯一温暖陶土强调划开近乎单色布局,排版则在轻声低语与纪念碑感之间摆动。界面依靠留白和深色图像承担主要表现,附属元素极少,边框是细线,交互元素精简为文字加箭头,或细微深色填充胶囊。最鲜明的选择,是品牌标志的Proxima Nova 300、168px,与同一家族15–18px正文之间的对比;相同字体同时承载高声与低语,使语气统一,而非混合。

查看原始网站

使用规范

建议采用

  • 需要显得高端的分区标题,使用Proxima Nova 300和62px+;大字号中的低语般轻字重是系统语气。
  • 所有主要操作默认文字箭头按钮,无填充,末尾带→;深色填充按钮只留给强强调时刻。
  • 任何按钮或胶囊容器都采用80px border-radius;这是系统标志性曲线,而非4px或8px。
  • 每个分区开场以100vw满幅照片锚定,随后过渡到下方白色画布内容。
  • Ember(#b75928)是唯一彩色强调,用于链接文字,每个分区最多一个暖色重点。
  • 展示字号letter-spacing设为-0.0250em,正文0.0100em;168px时的4.2px负字间距让文字标志像刻凿,而非普通排字。
  • 所有卡片表面和图像容器使用8px圆角,不要压为0px或圆至16px。

建议避免

  • 展示字号不要采用600或700字重;系统即使高声表达也采用300。
  • 除Ember外,不要引入额外强调色相;Pine和Tide冷品牌色用于卡片表面,而非文字或按钮。
  • 不要用投影表现抬升;深度来自摄影和表面色对比,而非box-shadow。
  • 正文段落不要居中;编辑式分区严格左对齐,max-width约600px。
  • 不要采用渐变;系统刻意平面,色调变化通过表面色和摄影实现。
  • 卡片或图像不要使用1584px胶囊圆角;它只保留给导航胶囊、徽章和标签。
  • Lora不要与Proxima Nova标题配对;Lora只是正文强调,绝不应出现在18px以上。