Hex 网站预览
Hex 网站预览

Hex

在奶油羊皮纸上呈现的炼金实验室——文学性衬线标题置于密集数据笔记本之上

Hex 将其营销网站设计成一本研究笔记:温暖的奶油色画布,近黑色的紫罗兰色墨水,以及一个手绘风格的编辑标题浮现在清晰的无衬线正文文字之上。首屏区域搭配 PP Editorial New 斜体,字重为 200,与 PP Formula 的压缩 800 字重形成呼应——一种文学柔美与工程密度之间的张力贯穿始终。行动号召(CTAs)刻意保持低调:采用细而深色的描边和深色文字搭配白色背景,无填充按钮,也无阴影,以免喧宾夺主。表面仅有的色彩温暖来自紫罗兰色边框和阴影(rgba(71,57,130,0.1)),而产品截图和数据可视化则承载真正的色彩——类似 viridis 风格的紫色、青色、绿色和黄色,如花朵般在笔记面板中绽放。整个网站呈现出紧凑、技术性且自信的气质:密集的信息块、控件上的 3px 微小圆角,以及各板块之间充足的留白空间。

查看原始网站

使用规范

建议采用

  • 使用描边按钮模式:1px #31263b 边框,3px 圆角,白色填充,IBM Plex Sans 500 14px #01011b。绝不以品牌色填充 CTA 按钮——克制正是品牌本色。
  • 首屏展示行搭配 PP Editorial New 200 斜体(78px)与 PP Formula SemiExtended 700(60px):在极端字重不对称的衬线与无衬线字体之间形成鲜明对比,这是其标志性特征。
  • 为产品卡片应用三层紫罗兰调色阴影堆叠:rgba(49,38,59,0.22) 1px 边框 + rgba(49,38,59,0.1) 26px 靠近 + rgba(49,38,59,0.09) 103px 环境。绝不使用纯黑色阴影。
  • 按钮、导航项和链接使用 3px 圆角,卡片和输入框使用 6px,仅限标签型徽章使用 9999px 圆角。
  • 页面背景设为 #fffcfc(温暖的近白色),而非 #ffffff。奶油质感与紫罗兰墨水相呼应,使整个画布统一。
  • 在每个部分中将产品截图作为主要视觉内容嵌入——包括笔记面板、AI代理对话线程、数据可视化。不应出现摄影图片或抽象渲染图。
  • 所有代码单元格使用 IBM Plex Mono 400 字重 11px,语法颜色设定为:#544692(关键字)、#22863a(字符串)、#005cc5(函数)和 #89828d(注释)。

建议避免

  • 不要使用品牌色背景的填充式 CTA 按钮。描边与深色文字的模式是刻意为之——填充按钮会破坏设计语言。
  • 不要在正文或阴影中使用纯黑色(#000000)。文字和阴影使用 #01011b 以及 rgba(49,38,59,*)。紫罗兰底色是系统感知品牌感的关键。
  • 不要将 PP Editorial New 首屏与标准粗体无衬线字体搭配。78px 字重 200 斜体是反常规做法;在衬线字体上使用 600 以上字重会破坏编辑性的低语感。
  • 不要引入第二衬线字体或第三种展示字体。系统由 PP Editorial New(编辑类)+ PP Formula(展示类)+ IBM Plex Sans(正文)+ IBM Plex Mono(代码)+ Cinetype(次要 UI)构成。增加更多字体会割裂整体语调。
  • 不要在卡片或按钮上使用大圆角(12px 以上)。3px 和 6px 是系统标准,更大的圆角会显得消费者导向,而非数据工作台风格。
  • 不要在不同区块间交替使用深色/浅色带。页面是一整块连续的羊皮纸画布。区块分隔为 80px 间距和细线,而非颜色变化。
  • 不要将 viridis 图表色彩(#472d7b, #21918c, #5ec962, #fde725 等)应用于 UI 元素。这些是内容/可视化色彩,而非界面设计变量。