TWOTWO 网站预览
TWOTWO 网站预览

TWOTWO

单色混凝土上的电压青柠:黑白编辑网格中唯一的霓虹重击。

TWOTWO 遵循严格视觉纪律:近乎纯黑白系统只被唯一刺眼的电压青柠强调打断。品牌像剥至骨架的运动科技目录,大量白留白、承担所有语调的瑞士无衬线 Whyte,绝无装饰渐变、阴影或次级色相。产品摄影是页面唯一按自身规则允许的色彩:球拍带来珊瑚、蓝、鼠尾草与橙,但所有界面表面、边框和标签都单色。青柠作为功能标点,填充胶囊按钮、悬停状态、小色样标签,绝不作为装饰。一切几何、紧凑、自信:16px 图片圆角、50px 胶囊按钮、72px 展示标题、大写宽字间距导航、紧密 1.1 行高,让排版承担主要表达。氛围更像白大理石长凳上的工业设计目录,而非板式网球商店。

查看原始网站

使用规范

建议采用

  • Voltage Lime #e3fc03 只用于填充操作、激活状态和 72px 首屏标题,绝不铺作背景色层或装饰渐变。
  • 所有按钮和输入框圆角设为 50px 完整胶囊形,所有卡片和图片设为 16px,系统只允许这两个值。
  • 13px 与 38px 之间所有文字使用 Whyte Book 400,不引入粗体建立层级,改用字号与色彩阶差。
  • 每页以 Paper White #ffffff 构图,Concrete #e6e6e6 是区块分割与背景唯一允许的中灰。
  • 1px Obsidian #000000 细线留给卡片边框和结构分割,系统用线而非阴影分隔表面。
  • 产品照片满幅放在 16px 圆角画框内,让球拍颜色承载网格中全部视觉变化。
  • 所有顶栏与页脚文字用 13px Whyte Book,大写,字间距约 0.04em。

建议避免

  • 不要引入第二种彩色色相,产品摄影外无蓝、红或绿;页面就是单色加青柠。
  • 不要用 box-shadow 或投影托起卡片,浮起来自白表面上的 1px Obsidian 边框,绝不来自模糊阴影。
  • 标题不要用粗体或字重 600+,Whyte Regular 400 配紧密字间距才是标志,粗重会破坏编辑语调。
  • 图片或卡片只能用 16px 圆角,不用 4px 或 8px 微圆角,系统只有两个圆角档位。
  • 彩色或摄影背景上的按钮不要缺少 Voltage Lime 填充,白或黑按钮会丧失品牌唯一信号。
  • 不要青柠叠青柠,如青柠按钮放在青柠高亮上;强调必须对着 Paper White 或 Obsidian 才能显现。
  • 正文、产品标题或价格不要居中,居中只留给首屏标题和区块标题。