Holographic UI
A translucent panel system for surfacing data and insight — layered over photography, color blocks, or used standalone on dark.
The base treatment
Every holographic UI element combines four ingredients: any rectangle or square, corner brackets, a broken outline, and a translucent gradient fill.
The pane reads as glass. Because the fill is translucent and the outline is incomplete, whatever sits behind the panel bleeds through. That bleed is part of the look — never paint a solid backdrop just to "make the panel readable."
Corner brackets
Bracket geometry
Each bracket is an L-shape that traces the corner — a short straight segment along the top, an arc following the corner curve, and a short straight segment down the side.
Stroke: 1.5px.
Leg length: Roughly 6–14px on a 10px-radius corner; scale up for 16px hero panels. Legs deliberately vary in length — and sometimes in opacity — both within a single bracket and across brackets on the same panel. Perfect symmetry looks generated; the irregularity is the effect.
Color: cyan-blue (#4A90D9) by default. Switch to Verdant Pulse green for panels that read as active, positive, or verified.
Placement: only on the three rounded corners. The pointed bottom-right corner gets no bracket — the sharp point already does the work.
Broken outline
The panel's edge between the brackets is intentionally incomplete. Two ways to express this:
- Ghost border (default) — a very faint full outline at low opacity (~15–20%) sits behind the corner brackets. The eye reads the brackets as the visible edge and the ghost line as ambient construction.
- Bracket-only — drop the ghost border entirely. The brackets float at the three corners with no connecting line. Use when the panel sits over a busy scene and any edge stroke would compete.
Pick one or the other per panel — don't mix on a single panel. Across a layout, prefer the ghost border by default; reach for bracket-only when the scene behind is doing the work.
A soft outer glow can suggest the panel is being projected — light leaking from the glass surface into the scene. Keep it ambient: 24–32px spread, cyan-blue at 25–35% opacity. Skip it when the scene is already dark and atmospheric; add it when the panel needs to feel actively lit.
Translucent gradient fill
The panel surface is an Imperial → Champion Blue gradient at reduced opacity (~65%). The translucency lets the scene behind bleed through — that bleed is what sells the "glass overlay" effect.
- Opacity range: 55–70%. Tighten toward 70% if the underlying scene is too busy and the panel content can't read; loosen toward 55% if the scene is calm and you want more atmospheric bleed.
- On dark scenes: the panel blends in cleanly. Internal content carries the visual weight.
- On light scenes: the same translucent fill renders as a deep blue glass pane. Text inside stays white or near-white.
- Never paint a solid backdrop behind the panel just to improve contrast. If contrast is failing, adjust opacity or rethink the panel placement — don't break the see-through effect.
Three photographs at varied brightness plus one constructed scene — showing how the fill reads across conditions and content types.
Prompt design ✓
Agent deployment
With text
Panel content follows a consistent hierarchy — eyebrow label, heading, optional divider, body, metadata. Green signals active, positive, or verified states. Blue carries in-progress elements.
Direction & Data-flow
Flowing wave forms that add movement and depth to any layout. Works as a full-bleed background on dark, a subtle texture on light, or an edge accent overlaid on photography.
On dark
Luminous streams — a wide blurred halo layered beneath a bright narrow core — give the impression of light moving through space. Particle trails run alongside or solo as a quieter data-in-motion counterpart.
On light
On white or pale backgrounds, only the particle trail form is used — no glow. Multiple parallel bands stacked at varying opacities create layered depth. Blue and green can run together.
Connectors & Diagrams
Building blocks for showing flow, sequence, and relationships. Blue is the default; green marks a completed path or positive outcome.
Lines & arrows
Solid carries primary direction. Dotted suggests flow in progress or a secondary path. Arc and S-curve handle non-linear relationships.
Nodes
Five states that mark points along a path — from start to complete.
Compositions
Common patterns built from the parts above.