Charlie 网站预览
Charlie 网站预览

Charlie

近黑色基底、大字排版与扁平表面。

页面以近黑色为基底。字体采用 Brasparz Variable、NeueHaas。视觉特点包括大字排版、扁平表面、胶囊形控件。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 仅在145px或更大字号时使用Brasparz Variable,行高设为0.70——更小则会丧失其雕塑感
  • 显示类文字的字间距保持在-0.06em至-0.08em之间;字号越大,字间距越紧
  • Brasparz的ss01和ss02参数必须设为0——原始形态不可更改
  • 所有交互元素(按钮、标签、导航)的边框半径设为100px
  • 让红色首屏区块完整铺满视口宽度——绝不被限制在卡片内
  • 所有文字颜色必须为#ffffff(在黑色或红色背景上)或#000000(在红色背景上)——禁止使用中灰体文本
  • 所有UI使用NeueHaas 19-20px字体;正文字号不得低于19px

建议避免

  • 禁止引入渐变、阴影或任何深度提示——该系统必须保持平面化
  • 禁止将Brasparz用于正文或UI标签——它仅限于显示用途,且在小字号下会崩溃
  • 禁止引入第二套强调色——红色是唯一的色彩语言
  • 中灰色(#838383)不要用于任何大于图注字号的内容;它在黑色画布上的对比度为 3.8:1,无法满足对比度要求。
  • 禁止将显示类文字限制在最大宽度容器内——必须延伸至视口边缘
  • 禁止在内容表面使用卡片式内边距、边框或圆角——只有导航胶囊控件获得100px半径
  • 禁止在NeueHaas正文上使用紧于-0.02em的字间距——字间距模式仅属于Brasparz