全息镭射Holographic

核心特征

• 珍珠白底，整体明亮通透
• 粉、蓝、薄荷、黄、紫的彩虹渐变
• 卡片与按钮用渐变描边或渐变填充
• 深色文字叠在渐变之上，保证可读
• 标题带粉蓝错位的柔和色差阴影

色板与字体

英文

Space Grotesk（自托管）

中文

系统黑体：苹方 / 微软雅黑

说明

原版潮流设计多用几何无衬线或圆体；真实项目可用 Space Grotesk、Manrope 或 Syne，中文用系统黑体。

起源与代表作

年代：2017 年前后在潮流包装与时尚品牌中流行

全息箔纸在 1990 年代就出现在贴纸与集换式卡牌上，1999 年发行的宝可梦集换式卡牌里的闪卡就是典型。2017 年前后，镭射材质在潮流包装、美妆与时尚单品中重新流行，并与千禧年的复古情绪相呼应。界面设计用渐变模拟这种随角度变色的光泽，常见做法是 conic-gradient 的彩虹色环，用于描边、按钮与装饰块。

AI 设计提示词 · Prompt

全息镭射（Holographic）风格界面：页面背景珍珠白 #F7F5FA，叠加冰蓝 #A0E9FF（50% 透明度）与镭射粉 #FF9AD5（40% 透明度）的两团柔和径向光晕。文字深靛 #1F2233，次要文字 #4D5068。彩虹渐变色标依次为 #FF9AD5、#A0E9FF、#C6FFDD、#FBE7A1、#D0B5FF。卡片与输入框白色填充，2px 透明边框，边框用 conic-gradient(from 210deg, 彩虹色标, #FF9AD5) 作为 border-box 背景实现，圆角 16px。主按钮使用 linear-gradient(115deg, 彩虹色标) 填充，深靛字，圆角 999px；次按钮白底，同样的渐变描边。标题使用 Space Grotesk 700，34px，带 2px 粉色与冰蓝错位的柔和文字阴影。引导标签使用深紫 #6B3FC4。所有正文对比度不低于 4.5:1，渐变上的文字必须使用深色，不得在渐变上放浅色文字。

A Holographic interface: page background pearl white #F7F5FA, with two soft radial glows in ice blue #A0E9FF at 50% opacity and holo pink #FF9AD5 at 40% opacity. Text is deep indigo #1F2233, secondary text #4D5068. The rainbow stops are #FF9AD5, #A0E9FF, #C6FFDD, #FBE7A1 and #D0B5FF in order. Cards and inputs are filled white with a 2px transparent border, and the border is drawn by using conic-gradient(from 210deg, rainbow stops, #FF9AD5) as a border-box background, with 16px corners. The primary button is filled with linear-gradient(115deg, rainbow stops) with deep-indigo text and fully rounded corners; the secondary button is white with the same gradient outline. Headings use Space Grotesk 700 at 34px with soft 2px pink and ice-blue offset text shadows. Eyebrow labels use deep violet #6B3FC4. Keep all body contrast at least 4.5:1 and always use dark text on gradients, never light text.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #f7f5fa;
  --ds-text: #1f2233;
  --ds-muted: #4d5068;
  --ds-pink: #ff9ad5;
  --ds-ice: #a0e9ff;
  --ds-violet: #d0b5ff;
  --ds-holo: conic-gradient(from 210deg, #ff9ad5, #a0e9ff, #c6ffdd, #fbe7a1, #d0b5ff, #ff9ad5);
  --ds-radius: 16px;
}

适合与不适合

和相近风格的区别

• Y2K 风格：两者都带金属与幻彩光泽。全息镭射以珍珠白底和彩虹渐变描边为主，更轻盈；Y2K 靠糖果粉蓝、铬银按钮与高光拟物，带着 2000 年前后的科技乐观感。
• 液态玻璃：全息镭射是不透明的彩虹渐变描边与填充，色彩跳跃；液态玻璃是半透明的玻璃材质，靠背景折射与高光边缘营造通透感，色彩来自背后的内容。

常见踩坑

• 渐变上放浅色文字会让对比度大幅下降，镭射渐变本身偏亮，文字一律使用深靛色并实测 4.5:1
• 渐变描边靠 padding-box 与 border-box 两层背景实现，需要 border 设为透明，部分旧浏览器渲染不一致，要准备纯色描边的降级
• 彩虹色整页大面积使用会显得杂乱，也容易引起视觉疲劳，渐变只用在按钮、描边与少量装饰上
• 如果给渐变加旋转或流动动画，需要提供 prefers-reduced-motion 的静态方案，并避免整页持续动画拖累性能

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题