Lottielab 网站预览
Lottielab 网站预览

Lottielab

动画工作室在明亮的纸上

Lottielab的视觉语言是一种安静、慷慨的工作空间,专为创作者打造:近白色的画布、细线边框,以及仅在需要时出现的单一明亮紫罗兰色点缀。界面偏重克制而非装饰——深靛蓝调文本显得权威而不喧宾夺主,组件平铺于表面且几乎无阴影,让产品UI本身承载视觉分量。字体设计几何感十足且现代,大标题采用紧密的负字间距,小标签则略微打开字间距,形成自信的垂直节奏。色彩使用极为精准:品牌紫罗兰色用于高亮标题中的关键词、填充主要行动号召按钮,并标记激活状态;其余部分保持中性。整体氛围如同动画工作室的数字草图板——宽敞、以工具为核心,专为流畅操作而设计。

查看原始网站

使用规范

建议采用

  • 使用#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的微调)。
  • 不要在同一视口内堆叠多个紫罗兰色元素——每个视口仅一个色彩时刻,以保持强调的分量。