Studio Gruhl 网站预览
Studio Gruhl 网站预览

Studio Gruhl

深灰色基底、文字主导与大字排版。

页面以深灰色为基底,搭配白色文字。字体采用 GreedStandard、Arial。视觉特点包括文字主导、大字排版、视频展示、大幅摄影展示。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 每页唯一的宣言标题时刻,采用GreedStandard 700、80px和1.00行高;它是品牌唯一的排版锚点。
  • 每个屏幕都建立在Carbon(#2e2e30)画布上;Obsidian(#18181b)只用于吸顶导航和深层,Lime Cream(#eef0b1)只用于少见反转分区。
  • 所有功能表面,包括卡片、按钮和图块,都采用12px border-radius;9999px只留给导航胶囊和行内标签。
  • 正文、导航和卡片文字默认采用GreedStandard 400、15-16px;除系统后备字体正在渲染外,绝不要使用Arial。
  • 案例视频和图像以原始直角满幅铺开;作品只由悬浮信息卡片约束,而非放进圆角图像框。
  • 深度通过Carbon → Obsidian → Lime Cream表面色变化和1px白色边框传达,绝不用box-shadow。
  • 次级文案保持Ash(#969696),Bright White只留给标题、激活状态和主要元数据。

建议避免

  • 绝不要引入彩色CTA;系统没有强调按钮,操作采用#2e2e30中性色填充,或白色透明描边样式。
  • 任何组件都绝不要使用box-shadow、drop-shadow或模糊;设计刻意平面,抬升只来自表面。
  • UI附属元素或功能组件绝不要采用渐变;渐变只留给内容媒体,位于视频或图像内部,而非框架上。
  • 卡片或按钮绝不要打破12px圆角惯例;只有9999px导航胶囊、9px图标和40px少见展示面板可以例外。
  • 主画布绝不要采用浅色或白色页面背景;Carbon是唯一允许的基础,Lime Cream是少见满幅反转,而非默认背景。
  • 展示时刻绝不要用系统字体替换GreedStandard;80px定制字体让宣言具有Studio Gruhl的身份。
  • 绝不要添加多列仪表盘布局或侧栏导航;结构是单列满幅滚动页面,配居中胶囊导航。