dither-laser-dark-mode

仓库原始内容

按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。

Dither Laser Dark Mode Skill

Create a dark premium design system that combines near-black surfaces, subtle ordered-dither texture, and a thin accent-colored laser atmosphere.

Apply this as a full design-system direction across background, surfaces, panels, controls, spacing, borders, and motion.
Use it when the interface should feel premium, technical, atmospheric, and dark, with a restrained laser motif and subtle dither texture.
This is not just a background effect. The whole UI should feel unified around dark-mode depth, precise framing, and luminous accent restraint.

Build the interface on a near-black or charcoal foundation with premium dark surfaces layered above it.
Introduce a subtle ordered-dither, coarse pixel, or soft digital grain texture in the background or low-priority surface layers so the darkness feels material instead of flat.
Use a thin laser beam or scanning-line atmosphere as a focused visual motif, tinted with the design's primary or strongest accent color rather than a hardcoded blue.
Keep the laser cinematic and restrained: a narrow white-hot core, soft accent halo, and light volumetric haze or bloom around it, not a thick neon bar.
Pair the atmospheric background with crisp panels, glass-dark cards, muted strokes, border gradients, and selective glow so the UI feels like a polished command surface.

Use dark surfaces with subtle tonal separation: deep black base, slightly lifted panels, quiet translucent overlays, and thin white or accent-tinted borders.
Apply dither or grain sparingly in the backdrop, large empty regions, or secondary fills. It should add texture and mood without making the interface noisy or retro-gamey.
If using WebGL, canvas, or shader layers, keep them fixed behind the UI with pointer-events: none and place content on a higher stacking context.
Derive the laser glow, smoky haze, or bloom from the active accent color, but keep the brightest laser core close to white for clarity.
Use the laser as a compositional anchor: center line, offset beam, corner convergence, or background sweep. It should support hierarchy, not overpower content.
Panels, dashboards, and navigation should use precise spacing, subtle blur, dim highlights, and understated elevation rather than loud glassmorphism or generic cards.

Floating dark nav shells with backdrop blur, thin borders, and restrained accent activity states.
Framed dashboard containers with corner markers, fine grid lines, or vertical boundary rules over a softly dithered dark field.
Dark glass or near-opaque cards using one-pixel gradient borders, soft shadows, and limited accent glows.
Thin laser or beam motif behind the hero area, around a central axis, or converging near a focal region with faint smoke or haze.
Data surfaces that stay legible with white or neutral text, while the accent color appears in status chips, active tabs, icons, progress bars, or focal controls.

Dither density: keep the texture visible enough to enrich the background, but quiet enough that it disappears behind content.
Laser intensity: separate beam thickness from halo width so the beam stays thin while the glow can breathe softly.
Accent restraint: use the brand color selectively and let neutral dark tones dominate the system.
Surface contrast: tune the gap between page background, panels, and overlays so the interface has depth without becoming muddy.
Atmosphere: add haze, bloom, and fog only around focal laser areas instead of filling the whole screen.

Thick neon laser bars, overwhelming bloom, or full-frame fog that destroys readability.
Hardcoding indigo or cyan when the design clearly uses another accent color.
Heavy dither everywhere, which makes the interface dirty, retro, or low-resolution instead of premium.
Flat black layouts with no texture, depth, or material separation.
Generic SaaS cards and gradients that ignore the laser-plus-dither visual system.