IDHEAL 网站预览
IDHEAL 网站预览

IDHEAL

白色基底、大幅摄影展示与大字排版。

页面以白色为基底,搭配近黑色文字。字体采用 Helvetica Neue LT Pro (Md)、Helvetica Neue LT Pro (Roman)。视觉特点包括大幅摄影展示、大字排版、扁平表面、衬线字形。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • #ffffff是唯一的页面和卡片背景;绝不要引入相互竞争的表面色调。
  • 展示标题采用Helvetica Neue Medium 67–105px,行高0.80–1.00,形成报头尺度的冲击力。
  • 彩色(#bc5346、#ff00bc、#51633c)只作为1–2px边框和轮廓线使用,绝不要作为填充或背景。
  • New Century Schoolbook用于正文,Helvetica Neue用于展示文字,以维持编辑式杂志的张力。
  • 链接采用10px圆角,按钮采用15px,导航胶囊采用37.5px;这三种圆角定义系统的曲率尺度。
  • 分区间距保持约30px,元素间距约10px,以保留画廊般紧密的密度。
  • 导航和主要控件采用4px 2px 4px rgba(0,0,0,0.2)阴影,以锚定页面。

建议避免

  • 绝不要用#ff00bc、#bc5346或#51633c填充按钮或大面积表面;这些颜色只存在于轮廓描边中。
  • 不要使用厚重或多层阴影;系统建立在平面感之上,只允许极少的表面凸显。
  • 避免在同一屏幕中混用超过两种字体家族;New Century与Helvetica的配对只有在各自角色清晰时才成立。
  • 不要将Helvetica Neue 12px用于正文;12px只保留给图片说明和微文案。
  • New Century Schoolbook的正文绝不要低于16px;衬线字体需要足够字号才能保持易读。
  • 不要引入新的border-radius数值;严格采用0px卡片、10px链接、15px按钮和37.5px导航。
  • 避免居中或对称的卡片网格;编辑式布局依赖不对称、杂志式的放置方式。