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

Clase bcn

白色基底、大字排版与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 SuisseIntl-Regular、Suisse Int'l。视觉特点包括大字排版、细线分隔、单栏阅读排版、大幅摄影展示。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

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

建议避免

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