Stykka 网站预览
Stykka 网站预览

Stykka

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

页面以白色为基底,搭配近黑色文字。字体采用 Inter、Azeret Mono。视觉特点包括大幅摄影展示、大字排版、紧密字距、细线分隔。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有文本元素和 1px 边框均使用 #000000 ——绝不引入第二色,系统刻意保持单色
  • 显示标题使用 Inter 字重 400(而非 700),字间距在 -1.2px 至 -1.93px 之间——紧致设置是其标志,而非字重本身
  • 使用 14px 大写加字间距标签(ls +0.29px)作为每个区块的开启元素——这是唯一重复的 UI 元素,承载编辑语气
  • 所有操作使用轮廓按钮(1px #000 边框,8px 圆角,透明填充)——不存在填充或透明描边变体,此为唯一按钮
  • 首屏和功能区块使用全视口摄影填充——所有图像容器圆角为 0px,照片延伸至网格线
  • 保持元素间距为 10px,区块间距为 60-80px——紧凑密度让空白显得有意识而非空洞
  • 任何包含文本的卡片表面使用 16px 圆角(而非 12px 或 8px)——额外柔和的处理使内容与硬朗的 8px 按钮几何形成区分

建议避免

  • 绝不引入强调色、品牌色或色彩高光——系统本无此类色彩,所有温暖感均由摄影提供
  • 绝不使用投影、内阴影或层叠效果来分组内容——改用 1px 边框或留白,此为平面系统
  • 绝不将显示标题设为 500 及以上字重——标题必须以 400 为基调,以保持编辑性语气
  • 在 16px 以上尺寸绝不使用正字间距——正字间距仅用于 11-14px 小型大写标签层级
  • 绝不使用填充或实心按钮——仅有的按钮形态是 1px 轮廓边框
  • 绝不将 16px 卡片圆角应用于图片——图片始终为硬边(0px),16px 仅用于承载文本的表面
  • 绝不将正文直接置于全彩色照片上而不进行色调处理——首屏叠加层使用 #ffffff 文字,照片上的任何文字必须为纯白或纯黑,以保证对比度