Glass Dark Mode Clock Skill

Use When

• Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.

Workflow

Scope

• Apply this as a full design-system direction across background, shells, navigation, hero layout, controls, circular focal components, and motion.
• Use it when the interface should feel like a premium dark instrument panel with glassy surfaces and a clock, dial, or calibration-device centerpiece.
• This is not generic glassmorphism and not just a standalone radial widget. The full interface should support the clock-like system aesthetic.

Visual target

• Build the page on a black or near-black base with very subtle grid lines, vertical and horizontal beam guides, and faint structural crosshairs.
• Use dark glass or frosted-black surfaces for nav bars, pills, and controls, with blur, thin white edge gradients, and restrained reflection.
• Introduce a dominant circular focal element that feels like a clock, calibration dial, or resonance instrument with rings, ticks, degrees, or rotating text paths.
• Keep the palette mostly monochrome: black, white, zinc, and smoky gray. Accent brightness should come from glass highlights and soft white glow rather than saturated color.
• Let the result feel precise, scientific, and slightly cinematic, with the circular dial anchoring the page like a timekeeping or calibration device.