Jitter 网站预览
Jitter 网站预览

Jitter

近白色基底、胶囊形控件与紧密字距。

页面以近白色为基底,搭配深紫色文字。字体采用 TWK Lausanne、Inter。视觉特点包括胶囊形控件、紧密字距、分屏构图、居中构图。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • #7a40ed 用于页面唯一首屏行动按钮,应单独出现,而非重复于多个操作表面。
  • 所有按钮圆角 50px,所有卡片、徽章与预览块 40px,胶囊与枕头几何就是标志。
  • 首屏展示使用 TWK Lausanne,或替代 Inter Tight,80px、字重 750+,字间距 -0.032em,行高 0.95。
  • 所有浮起卡片使用四层漫射阴影叠层,150px+ 垂直扩散让元素像漂浮。
  • 正文和界面文案保持 Inter 14–18px,字重 400–500,颜色 #19171c,#6e6e73 留给次要描述文字。
  • 区块标题上方放丁香胶囊徽章 #cab3f8 作为分类引导,每区块一个徽章,绝不堆叠。
  • 限制强调色,每视图一个紫罗兰行动按钮,可选青蓝 #00b2ff 与 Volt #f5ff63 只留给标签或状态语境。

建议避免

  • 任何地方不要用尖角或低于 20px 的圆角,圆润几何不可妥协。
  • 导航栏不要放紫罗兰行动按钮 #7a40ed,导航级行动填充应是深色 #19171c。
  • 正文或按钮填充不要用原始 #000000,始终 #19171c,保留品牌紫底调。
  • 不要使用硬边阴影或单层低模糊值,低不透明度多层漫射叠层就是系统。
  • 深背景上用 Volt 黄 #f5ff63 前,必须确认配有深色文字标签;对比极强,会起警告作用。
  • 26px 以上展示文字不要用 Inter;Inter 用于界面,TWK Lausanne 拥有 36px 及以上全部文字。
  • 不要引入紫罗兰、蓝、Volt 之外第四种彩色强调,系统靠色彩稀缺运转。