Iad-lab 网站预览
Iad-lab 网站预览

Iad-lab

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

页面以近黑色为基底,搭配近白色文字。字体采用 Neue Haas Unica、Display (custom or system fallback)。视觉特点包括大幅摄影展示、大字排版、宽松留白、网格布局。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 所有文字与边框使用 #f8f8f8;唯一背景为 #222222,这种二元关系就是体系。
  • 任何圆润元素,包括按钮、标签、标签块和容器,都采用 20px border-radius;交互表面不使用尖角。
  • 展示标题超出视口,字标必须越过左右边缘;若所有字母完整可见,说明尺寸太小。
  • 默认使用 Neue Haas Unica 400 字重,700 仅留给激活或强调标签,不混用中间字重。
  • 列表项以 1px solid #f8f8f8 底边框分隔;细线是体系主要结构分隔手段。
  • 默认元素间距为 24px,紧凑间距为 16px;所有间距决策遵循 4px 基础单元。
  • 摄影填满 100vw,不加内边距或 border-radius;视觉面板必须铺满边缘。

建议避免

  • 除四种中性色(#222222、#f8f8f8、#2a2b2d、#757577)外,不引入其他颜色,禁止彩色强调。
  • 不添加投影、渐变或发光;抬升由摄影尺度表达,而非 CSS 阴影。
  • 不添加传统导航栏、页眉或页脚框架;元信息标签和圆点导航就是全部结构框架。
  • 文字不在狭窄列中居中;文字应短、左对齐,并被充裕负空间包围。
  • border-radius 仅使用 15px 或 20px;避免 4px、8px 或完全圆润的 9999px,它们都不符合体系几何语言。
  • 展示标题不采用所有字母均能放进视口的尺寸;裁切是有意为之,并定义视觉身份。
  • 正文 line-height 不超过 1.35,标题不低于 1.10;紧凑标题行高创造建筑感。