HeroKit

近黑色基底、紧密字距与细线分隔。
页面以近黑色为基底,搭配白色文字。局部操作控件以黄色强调。字体采用 PP Neue Montreal、PP Neue Montreal Medium。视觉特点包括紧密字距、细线分隔、分屏构图、网格布局。适合参考的场景:设计作品集、创意服务介绍页。
查看原始网站使用规范
建议采用
- Pale Lemon #ffffa7是唯一的彩色操作色,每个视口最多一个填充按钮。
- 展示标题设为100–120px、-4.8px letter-spacing和1.0行高,形成编辑式压缩感。
- 每个交互元素和卡片都采用8px圆角,绝不要混入更大的曲线。
- 所有非首屏分区的画布保持纯#000000;Pale Lemon背景每页最多用于一个满幅分区。
- 层级通过字号和颜色区分,而非字重;PP Neue Montreal只提供400。
- 首屏和分区开场中的3D渲染图可以越过画布边缘;画廊内部则将它们放在8px圆角卡片中。
- 维持80px分区间距和10px元素间隙;充裕负空间让极简调色板显得高级。
建议避免
- 绝不要引入第二种彩色强调;品牌只以柠檬黄、黑曜石色和纸色表达。
- 绝不要通过投影或悬停缩放暗示抬升;改用1px的#333333边框或颜色对比。
- 正文字号绝不要低于16px或高于20px;尺度刻意从20px正文跳到30px副标题。
- 绝不要混用多种border-radius;按钮、卡片、标签和输入框都只有8px这一数值。
- Pale Lemon绝不要放在浅色分区背景上;对比只在Obsidian #000000上成立。
- UI表面绝不要添加渐变;产品销售的是平面呈现的3D渲染图,界面附属元素必须保持哑光。
- 正文或导航项绝不要居中;系统以编辑式方式锚定左侧。