Clase bcn 网站预览
Clase bcn 网站预览

Clase bcn

白墙上的编辑类画廊

Clase bcn 是一面白墙上的编辑类画廊:一家品牌代理机构,其作品集如同博物馆目录。界面几乎不可见——文本、细线分隔线以及满幅项目图像承担了所有工作。仅使用一种无衬线字体(Suisse Int'l)和一个字重(400),承载所有元素,从导航标签到超大尺寸的项目标题。留白充裕且具有结构感:项目卡片横跨全视口,标题和副标题直接叠加在摄影图像上。交互仅限于文本链接配箭头指示;没有按钮,没有填充,没有阴影,没有装饰性UI元素。色彩作为内容呈现——各个项目案例研究自带背景色板,而UI元素则保持无彩色且安静。

查看原始网站

使用规范

建议采用

  • 使用 Suisse Int'l(或类似无衬线字体的替代字体,如 Inter)字重 400 用于所有元素——不使用粗体,不使用斜体,不使用第二字体家族
  • 由项目图像和项目色彩填充承载全部视觉变化;所有UI元素保持在 #000000 和 #ffffff
  • 所有文本块的内边距均使用20px的间距(导航、卡片文本、页脚)
  • 项目之间垂直间距保持 100px 的呼吸空间——让每个卡片独立存在于其视觉静默中
  • 所有交互均以纯文本链接配 → 箭头标识,绝不作为填充或描边按钮呈现
  • 通过字号和行高实现层级关系——正文 24px,副标题 28px,展示标题 45px
  • 所有元素的圆角保持为 0——角部锐利,页面呈网格结构

建议避免

  • 不要引入按钮、胶囊形控件、标签或任何填充型交互组件——此系统中没有按钮
  • 不要为卡片或图像添加阴影、渐变或边框效果——表面深度仅来自色彩对比
  • 不要使用粗体或中等粗体字重——仅使用字重 400 作为唯一声音;层级关系仅通过尺寸实现
  • 不要使用 #43d491、#efccbe 或 #262a36 作为UI强调色——这些色彩仅属于项目卡片背景内部
  • 不要添加品牌标志、文字标识处理或品牌图标——导航栏中的 'Cl' 字即为完整标识
  • 不要将布局限制在最大宽度容器内——项目卡片必须满幅覆盖
  • 不要添加悬停动画、过渡效果或微交互——该网站呈现为静态,如同印刷目录