Outsource Consultants 网站预览
Outsource Consultants 网站预览

Outsource Consultants

建筑版画风格,使用灰白纸张。专著式美学,其中一段强烈的靛蓝区块打破原本温暖、极繁风格的网格布局。

Outsource Consultants 采用一种鲜明的编辑-建筑系统:温暖的灰白色画布,一个鲜明的靛蓝色在满幅区域爆发,字体在160px的无衬线粗体与10px的等宽微标签之间切换。该美学借鉴了瑞士版画和建筑版画——大字号承担主要信息,而信息被压缩进等宽元数据中。布局呈非对称且宽松,各区块在灰白与靛蓝之间交替,而非堆叠在白色背景上。组件无边框,几乎为平面,依靠尺寸变化和靛蓝与灰白的对比来建立层级,而非使用阴影、填充或立体效果。这套系统更像是一本技术工作室的印刷式专著,而非SaaS仪表盘。

查看原始网站

使用规范

建议采用

  • 让PP Neue Montreal负责所有工作——将显示字号推至46–160px,使用行高0.94–1.10在这些尺寸下;不要因字号小而增加字重。
  • 专用于标签、标题、导航项和折叠面板说明,使用GT America Mono;保持字号在10–14px之间,10px时字间距-0.05em(紧凑),14px时字间距+0.02em(开放)。
  • 在灰白画布与靛蓝满幅区域之间交替,以形成区块节奏——禁止在没有靛蓝中断的情况下连续堆叠多个灰白区块。
  • 将边框视为细线:1px墨线,低不透明度用于分隔折叠面板行与区块分界线;绝不用于卡片或容器。
  • 在右侧边距使用垂直旋转文字(18px PP Neue Montreal)作为区块注解工具。
  • 每个区块均以左对齐的全宽显示标题锚定,使用正文色(靛蓝在灰白上,灰白在靛蓝上);标题保持全宽且无边界限制。
  • 保持所有角落锐利——所有元素(包括按钮、卡片和标签)的圆角均为0px。

建议避免

  • 不要引入阴影、光晕、模糊或任何形式的下压立体效果——该系统刻意保持平面。
  • 不要将靛蓝用作按钮背景填充——菜单按钮为白色,搭配一个靛蓝方块图标;靛蓝是表面色,而非操作色。
  • 不要引入第二个强调色——系统仅包含灰白、靛蓝和单一靛蓝;任何新增色彩角色都将削弱编辑张力。
  • 不要在小于12px时使用PP Neue Montreal——无衬线字体在小字号下失去特征;任何小于14px的情况均应切换至GT America Mono。
  • 不要居中标题或换行——显示文字保持左对齐并延伸至页面边缘。
  • 不要使用带有背景、内边距或圆角的卡片——内容直接位于灰白画布上,仅通过细线分隔。
  • 在首屏区域不要使用系统字体作为备用——若PP Neue Montreal不可用,应替换为无衬线字体(Inter或Söhne),而非人道风格无衬线字体。