Luro

近黑色基底、产品图像展示与胶囊形控件。
页面以近黑色为基底,搭配白色文字。字体采用 Graphik Web、Graphik Cond Web。视觉特点包括产品图像展示、胶囊形控件、大字排版、紧密字距。适合参考的场景:设计产品官网、作品展示页。
查看原始网站使用规范
建议采用
- 每张卡片和图像都采用两段粉色等离子阴影叠层(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。