Lusion 网站预览
Lusion 网站预览

Lusion

在磨砂薰衣草色平面上呈现 3D 雕塑画廊。每个界面元素都应像可触摸的物体，静置在微凉的浅色画廊地板上，所有色彩与戏剧感均由 3D 内容提供

Lusion 将其官网视为一个数字雕塑画廊，而非普通的机构作品集。整个界面以冷调薰衣草色偏的浅灰白色（#f0f1fa）为底，使纯黑色 Aeonik 文字仿佛镌刻在画布上，而 3D 渲染内容——生动的电光靛蓝十字、抛光金属、玻璃柱体——则注入了每一滴色彩能量。87–100px 半径的胶囊形组件让 UI 体验如同真实物体放置于画廊地板，从不以卡片堆叠呈现。阴影被控制在 4% 的微弱程度；深度与戏剧感完全来自 3D 内容本身，而非 UI 的堆叠。留白充分，导航被简化为最基本元素，少数文本链接采用纯黑色，字间距与正文完全一致，为 -0.02em

查看原始网站

使用规范

建议采用

  • 将薰衣草雾（#f0f1fa）作为全页背景的画布使用；禁止使用纯白色作为页面底色——轻微的薰衣草色调是品牌调性
  • 所有文字统一使用纯黑色（#000000），Aeonik 字体字重 400–500，字间距 -0.02em；禁止引入粗体或更柔和的灰度用于强调
  • 所有操作按钮采用 87.5px 车轮半径，所有图片/首屏容器采用 100px 半径；这两个半径是品牌标志性的形状语言
  • 仅将电光靛蓝（#1a2ffb）作为色彩强调使用——图标描边、行内高亮、输入框的聚焦环——禁止作为大面积填充表面使用
  • 保持阴影为单一 4% 黑色微弱堆叠（0px 6px 10px + 0px 2px 4px）；禁止叠加多层阴影或引入彩色阴影
  • 各区块间垂直间距为 72px 的节奏；依靠充足的留白和 3D 内容本身来营造空间感，而非添加分隔线或边框
  • Aeonik用于从12px图注到144px展示文字的完整字号范围，让字号尺度本身建立层级，而非颜色或字重变化。

建议避免

  • 不要引入超过 500 的第三类字重——粗体或黑色字重破坏了克制的排版系统
  • 不要使用白色（#ffffff）作为页面背景；薰衣草雾画布才是让黑色文字和 3D 内容显得清晰锐利的关键
  • 不要在大范围 UI 表面填充电光靛蓝；它仅作为点缀，而非品牌主色调——大面积的靛蓝区块破坏了画廊地板的隐喻
  • 不要添加装饰性渐变、玻璃态、或模糊效果；所有表面保持平面与实体感
  • 不要在卡片、按钮或容器上使用 8px、12px 或 20px 的边框圆角——应仅使用定义的 3px、15px、18px、87.5px 和 100px 值
  • 不要添加悬停状态改变背景填充或引入颜色；应依赖不透明度变化和下划线显现，以静态画布为背景
  • 不要将酸黄绿（#c1ff00）用作 CTA 或文本背景；它缺乏交互元素所需的对比层级，仅限于 3D 组合内部或高亮渲染中使用

相似设计语言