Honk 网站预览
Honk 网站预览

Honk

青色基底、圆角卡片与紧密字距。

页面以青色为基底,搭配近黑色文字。字体采用 Honk Header、Honk Sans。视觉特点包括圆角卡片、紧密字距、分屏构图、单栏阅读排版。适合参考的场景:工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

  • 每个顶级区块都用 #008fff 作全视口画布,绝不把标题放在蓝背景前的白卡片上,蓝本身就是表面。
  • 52px Honk Header 标题中一两个词转为 #ffe400 强调,不加下划线、斜体或粗体,颜色是唯一差异。
  • 所有正文用 Honk Sans 16-19px,并使用字号尺度中的负字间距:16px 时 -0.018em,19px 时 -0.006em;紧密无衬线是声音的一部分。
  • 蓝色场内任何白面板,包括通知条、内容卡片、图片容器,用 16px 圆角 Token;小胶囊或小块用 6px。
  • 手机样机在首屏右侧,占列宽 45-55%,周围放 2-3 个浮动白对话气泡装饰,绝不居中或加投影。
  • #3fcc6b 绿色专用于手机屏幕内的产品界面,营销表面只保持蓝、黄、白三色。
  • 图标描边保持 2px、Honk Sans 字重,蓝底白色;图标为线型,绝不填充或用彩色。

建议避免

  • 营销屏幕不要用白或浅灰页面背景,系统假定蓝色场始终存在,白页会像损坏。
  • #ffe400 不要用于正文、按钮背景或大填充区域,Signal Yellow 只是单词级高亮,而非表面色。
  • 营销表面不要引入紫、红、橙等第三种饱和色,只允许蓝色场、黄强调、白字与设备样机内的绿。
  • 卡片、按钮或手机样机不要用重投影,浮起来自与蓝色的对比,而非阴影叠层。
  • 标题不要超过 3 行,黄色高亮不要超过 2 个词,系统依赖一个标点时刻,而非散落强调。
  • 副标题、按钮或链接不要用不同字体,Honk Sans 不同字重覆盖全部界面,Honk Header 只用于展示。
  • 卡片或大面板不要用 6px 圆角 Token,按钮不要用 16px 圆角 Token,小元素小圆角,大表面大圆角。