Lottielab 网站预览
Lottielab 网站预览

Lottielab

近白色基底、大字排版与紧密字距。

页面以近白色为基底,搭配深蓝色文字。字体采用 Plus Jakarta Sans、Google Sans Code。视觉特点包括大字排版、紧密字距、细线分隔、宽松留白。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 使用#7270ff作为页面中唯一的彩色填充——其他所有表面均保持中性色阶,范围从#f3f4f6到#2f2b4a。
  • 将显示文本设为60px,标题设为48px,字间距分别设为-1.5px和-1.2px,以匹配现代紧致的字间距节奏。
  • 所有卡片和面板采用8px圆角,按钮为12px,标签和图标容器为9999px——三级圆角系统不可更改。
  • 使用Mist(#e5e7eb)的1px边框替代阴影来分隔层级;层次感来自背景阶梯变化,而非模糊效果。
  • 在每条标题中突出一个关键词,使用Electric Violet(#7270ff)——其余文字保持Deep Indigo以形成单一的色彩节奏。
  • 大标题搭配Plus Jakarta Sans 700字重,行高为1.00–1.11;UI标签保留500字重,正文使用400字重。
  • 交替使用#ffffff和#f3f4f6作为节段分隔带,以创造节奏,无需使用颜色或阴影。

建议避免

  • 不要引入额外的品牌色彩——色彩调色板刻意仅限紫罗兰色;避免在核心UI中加入青色、绿色或粉色。
  • 不要使用阴影、光晕或模糊效果来营造层次感;应依赖表面色彩阶梯变化和1px细线边框。
  • 不要将正文文本设置低于14px,或使用低于400字重的字体——字体系统经过调校,确保在16px及以上时阅读舒适。
  • 不要在按钮、输入框或导航组件中使用渐变填充——渐变仅用于展示和营销视觉内容。
  • 不要在浅色背景上使用纯黑色(#000000)文字;应使用Deep Indigo(#2f2b4a)以保留品牌温暖的紫罗兰底色。
  • 不要打破8px间距网格——所有内边距、间距和外边距应落在8的倍数上(组件内部可允许4px和2px的微调)。
  • 不要在同一视口内堆叠多个紫罗兰色元素——每个视口仅一个色彩时刻,以保持强调的分量。