Luro 网站预览
Luro 网站预览

Luro

如同深红激光舱:深黑曜石色墙面中,每个表面都被炽热粉色等离子光环围绕。

Luro像一处深色电影式展示空间,产品悬浮在近黑曜石色的画布上,每张卡片都发出炽热的深红光晕。它的标志性特征并非某种表面色,而是一种阴影:宽广的粉色等离子辉光让卡片从虚空中浮起,使UI像黑暗房间中的霓虹标牌。排版采用几何感强、字间距紧密的Graphik;负字间距将大型展示标题拉拢成一个密集文字块。布局宽敞且居中,产品截图首屏下方是4列媒体网格,随后是交替排列的功能区块。视觉表达极度精简:少数卡片变体、一个胶囊按钮和一种一致的辉光阴影,就承担了全部设计表现。

查看原始网站

使用规范

建议采用

  • 每张卡片和图像都采用两段粉色等离子阴影叠层(0 0 33px 0 rgba(255,0,104,0.54) + 0 0 99px -21px rgba(255,0,104,0.4));这个光晕本身就是抬升语言。
  • 所有卡片、图像和功能区块的border-radius都设为24px;180px只留给胶囊按钮。
  • 字号越大,letter-spacing逐步收紧:14-18px时为-0.012em,40px时为-0.025em,104px展示字号时为-0.046em。
  • Frost White文字搭配深色画布(#10020a)或更温暖的Mulberry(#1e0313);绝不要将白色文字放在平面的中灰上。
  • 导航和按钮采用600字重,标题采用700,正文采用400;不要引入500。
  • 首屏构图居中,并让91%统计徽章带着自己的圆环悬浮在右侧,打破对称的标题块。
  • 产品截图放在深色卡片内部的浅色Chalk表面(#f2f2f2)上;虚空与明亮产品之间的对比,是页面的结构节奏。

建议避免

  • 不要使用灰色或黑色投影;任何非粉色阴影都会立即破坏品牌。
  • 主要卡片不要采用直角或4-8px圆角;24px曲线让辉光显得像柔和光晕,而非硬盒。
  • 不要将Plasma Pink(#ff0068)作为大面积表面的填充;它只能作为细描边、图标点缀或阴影颜色出现。
  • 不要使用500字重;系统从400跳到600,在紧密字间距下,500会显得淡而无力。
  • 浅色表面上的正文不要设为70%不透明度;降低不透明度的弱化处理只用于深色画布上的文字。
  • 不要用1-2px边框形成卡片边缘;卡片完全由辉光和表面色阶变化定义,而非轮廓线。
  • 同一屏幕中不要混用两种标题字体;Graphik Cond只用于每页唯一的渐变分区标题,其余所有文字采用Graphik Web。