holographic-ui

Holographic UI

"Made of light. Interfaces projected into thin air, visible but completely translucent."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Zero Opacity Backgrounds: Elements are never fully solid. Everything is semi-transparent, allowing the background to show through.
2. Scanlines and Interference: The illusion of a projection is sold by horizontal scanlines, slight chromatic aberration, or flickering.
3. Luminous Edges: The borders of elements are brighter than the centers, mimicking how lasers or light projections focus at the edges.

Visual DNA

• Colors: Almost exclusively monochrome Cyan, Blue, or Green, with white core highlights.
• Typography: Thin, technical sans-serifs. Must have a glowing text-shadow.
• Styling: Intensive use of rgba(), mix-blend-mode: screen or add, and CSS filters.

Web Implementation

• CSS Example:

body {
  background-color: #020202; /* Must be dark for holograms to show */
  background-image: url('dark-lab-background.jpg');
  background-size: cover;
  color: #88ffff;
}

.hologram-panel {
  background: rgba(0, 200, 255, 0.05); /* Extremely sheer */
  border: 1px solid rgba(136, 255, 255, 0.5);
  border-radius: 4px;