Blue Laser Clean Glass Layout

---
name: blue-laser-clean-glass-layout
description: Create a clean dark glass layout system with a thin blue laser
  atmosphere, frosted premium shells, and polished dashboard structure.
---

# Blue Laser Clean Glass Layout Skill

## Use When
- Create a clean dark glass layout system with a thin blue laser atmosphere, frosted premium shells, and polished dashboard structure.

## Workflow

## Scope
- Apply this as a full design-system direction across background atmosphere, navigation, hero, floating cards, dashboard shells, tables, and motion.
- Use it when the interface should feel premium, dark, blue-led, and operational, with a restrained laser beam integrated into a clean glassy layout.
- This is not only a laser effect and not generic dark glassmorphism. The beam, fog, glass shells, and dashboard framing should all support one unified system.

## Visual target
- Build the page on a near-black base with subtle blue undertones and a fixed atmospheric laser background behind the interface.
- Use a thin blue or indigo laser beam with a white-hot core, soft halo, and light volumetric smoke or fog so it reads cinematic but precise.
- Layer the UI above the laser using dark frosted shells, border-gradient wrappers, translucent pills, and glass-like premium cards.
- Keep typography crisp and modern: white display copy, muted blue-gray support text, and clean compact labels for product credibility.
- Let the overall tone feel clean and expensive rather than noisy sci-fi, with the laser acting as a focused spatial motif instead of a spectacle.

## Implementation guidance
- Use a fixed full-screen canvas or background layer for the laser and fog, then keep all foreground UI in a separate scrollable content layer above it.
- Keep the laser narrow and elegant. Separate beam thickness from glow width so the line stays thin while the halo and smoke can breathe softly.
- Build navigation as a floating or sticky glass-dark pill with backdrop blur, thin borders, and calm white text.
- Use a framed central shell or max-width application container with border-x rails, tiny corner markers, or subtle vertical boundaries to structure the page.
- Introduce glass cards with dark translucent fill, one-pixel gradient borders, soft shadow falloff, and limited blue accent moments for charts, status chips, or icons.
- Dashboard sections should feel polished and modular: sidebars, metric cards, event streams, data tables, and search controls should share the same glass-dark surface logic.
- Use blue selectively for active indicators, CTA emphasis, icon accents, and the laser atmosphere while leaving most surfaces neutral and dark.
- Motion should remain calm and premium: masked headline reveals, subtle card drift, soft beam pulse, and gentle hover brightening are appropriate.

## Recommended patterns
- Fixed blue laser and fog field behind a central glass dashboard or hero shell.
- Floating pill nav with blurred dark fill, rounded full-width geometry, and restrained white borders.
- Border-gradient metric cards and event panels hovering beside or above the hero copy.
- Large dashboard container with frosted header bar, muted tabs, sidebar modules, and a clean data table.
- Blue CTA button paired with a quieter outline or glass secondary button.
- Tiny blue live dots, underglow accents, and soft atmospheric bloom near the beam or focal modules.

## Tuning knobs
- Laser intensity: keep the beam thin and readable while adjusting halo, pulse, and smoke separately.
- Blue mood: shift between indigo, cobalt, and cooler electric blue depending on how premium versus energetic the system should feel.
- Glass depth: tune blur, opacity, and edge highlights so shells feel premium without becoming muddy.
- Layout density: choose how many floating cards and dashboard modules appear around the hero before the clean composition starts to feel crowded.
- Atmosphere amount: let fog and bloom support the beam, but avoid filling the full page with haze.

## Avoid
- Thick neon laser bars that overpower the layout.
- Flat dark dashboards with blue accents but no meaningful glass depth or atmospheric beam logic.
- Pastel glassmorphism, bright blobs, or translucent white cards that break the dark premium feel.
- Overdecorating every component with glow, blur, or border effects.
- Letting the laser or fog reduce readability of foreground content.