Blok 网站预览
Blok 网站预览

Blok

白色基底、细线分隔与宽松留白。

页面以白色为基底,搭配近黑色文字。字体采用 Poppins、Jost。视觉特点包括细线分隔、宽松留白、扁平表面、摄影展示。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • Signal Teal(#1dd8e1)只用于交互时刻,如按钮、链接、激活标签页和星级评分,并由它承担100%的彩色表现。
  • 所有展示标题采用Jost 700和0.09em字间距;任何超过24px的文字都不要使用Poppins或Cabin。
  • 通过#0a0d0f细线边框,或#ffffff → #f7f7f7的色调变化分隔表面;不要引入box-shadow表现抬升。
  • 任何低于21px的标签、眉题或分类文字都采用全大写Cabin 500-600,字间距为0.064-0.09em。
  • 产品卡片保持无边框,采用3px圆角和24px内部内边距;视觉表现交给产品图像。
  • 页面背景默认#ffffff;媒体报道条和产品图像容器等交替分区则切换为#f7f7f7。
  • 分区标题和产品页标题居中;只有正文和表单内容左对齐。

建议避免

  • 不要给卡片、按钮或弹窗添加box-shadow;系统刻意保持平面,通过边框和色调区分。
  • 不要引入额外强调色;除中性边框或文字之外,每个交互元素都应使用Signal Teal。
  • 正文不要使用第二种字体;所有UI和产品描述均由Poppins 400-500承担。
  • 卡片和输入框圆角不要超过3px,胶囊按钮不要超过100px;系统大部分保持锐利,只设置少量刻意的胶囊形。
  • 正文或UI文字不要使用全大写;字间距处理只保留给Cabin标签和Jost标题。
  • 不要将青绿色文字放在青绿色背景上,也不要将青绿色按钮放在Bone(#f7f7f7)页脚上;对比建立在白色画布与深色墨迹之上。
  • 不要挤压分区;即使是密集产品页,sectionGap也不应低于64px。