dark-glass-clean-layout

---
name: dark-glass-clean-layout
description: Create a dark glass layout system with frosted premium shells, clean multi-column workspace structure, floating data cards, and restrained atmospheric depth.
license: MIT
---

# Dark Glass Clean Layout Skill

## Use When
- Create a dark glass layout system with frosted premium shells, clean multi-column workspace structure, floating data cards, and restrained atmospheric depth.

## Workflow

## Scope
- Apply this as a full design-system direction across background atmosphere, navigation, outer framing, layout columns, glass panels, floating cards, and motion.
- Use it when the interface should feel like a premium dark workspace or intelligence console built from calm glass shells and clean structural layout.
- This is not generic pastel glassmorphism and not a radial sci-fi instrument panel. The focus is a clean layout system with dark frosted depth and quiet hierarchy.

## Visual target
- Build the page on a near-black base with soft atmospheric light or blurred WebGL texture behind the interface.
- Use a centered max-width layout shell with thin vertical boundary rails, tiny corner markers, and subtle framing so the page feels housed inside a precise workspace.
- Create the main hierarchy through dark frosted shells: sidebars, top navigation pills, floating data nodes, and operational cards should all feel glassy but controlled.
- Keep the palette mostly monochrome with white, zinc, smoke gray, and charcoal. If accent color is needed, derive it from the design or use it only for small state indicators.
- Let the center stage remain visually calm and breathable, with surrounding cards and rails supporting it rather than cluttering it.

## Implementation guidance
- Prefer a multi-column workspace layout, such as left navigation, central hero or visualization stage, and right operational sidebar on desktop, then stack cleanly on smaller screens.
- Use one-pixel gradient wrappers or faint highlight edges around dark glass shells, then place darker translucent fills inside with strong backdrop blur.
- Glass surfaces should feel smoky and premium: low-opacity dark fills, crisp top-edge highlights, soft shadow falloff, and restrained internal reflections.
- Add floating supporting cards near the central stage for logs, intelligence notes, action plans, or system events, but keep their quantity limited and their spacing generous.
- Use mono micro-labels, system IDs, tiny metadata, and compact operational headings to give the glass layout technical credibility.
- Buttons, pills, and interactive rows should use clean rounded geometry, subtle hover brightening, and low-drama border emphasis instead of loud color floods.
- Background atmosphere can include blurred particle fields, faint line motion, or abstract WebGL forms, but it should stay soft enough that the glass layout remains primary.
- Motion should feel floating and premium: masked text reveals, slow drift on data cards, tiny parallax, and gentle blur or highlight shifts are appropriate.

## Recommended patterns
- Fixed pill-shaped top navigation wrapped in a thin gradient edge with dark glass fill and strong blur.
- Left and right side shells built from stacked frosted cards, navigation groups, protocol steps, or telemetry modules.
- Central hero stage with restrained headline, soft radial wash behind the copy, and a simple high-contrast CTA.
- Floating info cards positioned around the center on large screens, using dark glass wrappers and tiny metadata footers.
- Thin vertical outer rails and tiny square corner marks to keep the workspace feeling aligned and architectural.
- Terminal-like or I/O cards that combine frosted shell depth with clean inner rows and muted system labels.

## Tuning knobs
- Glass intensity: tune blur and opacity so shells read clearly as glass without becoming muddy or washed out.
- Layout openness: preserve enough negative space between columns and floating cards so the system feels calm and premium.
- Accent restraint: keep accent color limited to status dots, active text, or tiny indicators rather than large fills.
- Atmospheric depth: add or reduce background blur, particle glow, or abstract WebGL texture depending on how cinematic the layout should feel.
- Frame visibility: make outer rails and corner markers visible enough to organize the page without turning it into a hard technical grid.

## Avoid
- Bright translucent glass cards floating over colorful blobs.
- Flattening the interface into plain black boxes with no frosted depth or layout elegance.
- Overcrowding the center with too many floating cards until the clean workspace structure collapses.
- Heavy neon glows or saturated effects that overpower the monochrome dark-glass system.
- Treating glass as a card style only instead of a full layout language spanning nav, sidebars, and supporting modules.