Unicorn Studio 网站预览
Unicorn Studio 网站预览

Unicorn Studio

如同烟色玻璃后的极光:黑色天鹅绒虚空被棱镜般紫罗兰光穿透,文字在旁安静呼吸。

Unicorn Studio生活在近黑虚空中,光本身成为产品:画布为哑光炭灰,排版以冷珍珠灰轻声表达,唯一彩色语气是紫罗兰WebGL极光,透过渐变、链接边框和首屏氛围扩散。表面以几乎无法察觉的深暗阶梯叠放,#08080a → #0d0d12 → #17171c,因此深度通过明度变化而非阴影传达;交互元素上的细深色关键线`#31313a`,偏移-1px,承担抬升作用。展示字体Overused Grotesk采用最高-0.063em的强负字间距,将字母拉得几乎接触,正文则保持系统字体栈,舒适的16px和细微-0.01em收紧。交互克制,虚空前的浅奶油填充按钮、链接的紫罗兰细下划线和3px微圆角,让语言具有建筑感,而非亲切感。

查看原始网站

使用规范

建议采用

  • 所有深度沟通都使用中性表面叠层#08080a → #0d0d12 → #17171c → #25252d,绝不依赖厚重投影。
  • 标题letter-spacing在64px+时为-0.063em,32–48px时为-0.040em,以匹配Overused Grotesk展示语气。
  • 10px圆角只用于卡片,所有按钮、标签和输入框采用3px。
  • Lavender Beam(#ab8ff1)留给链接下划线、聚焦状态和WebGL极光渐变;它是系统唯一彩色信号。
  • 正文保持系统栈-apple-system,16px、1.4行高和-0.01em字间距。
  • 所有主要填充按钮都采用深色关键线`box-shadow: #31313a 0 -1px 0 0`,形成标志性的顶部边缘效果。
  • 所有主要操作默认采用奶油填充按钮,背景#dad7de、文字#08080a;无填充或描边样式只用于次级导航操作。

建议避免

  • 不要引入彩色填充按钮;主要操作始终为深色上的浅色,绝非深色上的紫罗兰。
  • 圆角不要大于10px;更圆润的形态会破坏建筑语言。
  • font-weight不要高于600;系统通过字号和字间距传达强调,而非字重。
  • 不要引入紫罗兰家族之外的彩色;单色加紫罗兰的纪律就是品牌。
  • 正文行高不要高于1.4,展示文字不要低于1.0。
  • 静态元素不要采用投影;阴影只保留给交互反馈和悬浮叠加层。
  • 悬停、激活或禁用等状态不要通过颜色沟通;改用边框不透明度、文字不透明度或表面明度变化。