glass-dark-mode-clock

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.

Implementation guidance

• Use frosted shells with thin gradient borders, low-opacity fills, and soft backdrop blur for navigation, pills, and action controls.
• Support the circular centerpiece with crosshair lines, calibration marks, mono labels, radial rings, and small interface cues so it feels engineered.
• The clock or dial should be layered: outer ring, tick marks, rotating labels or text, central core, and optional hex or geometric inner frame.
• Keep hero copy clean and sparse, placed beside the dial within a split layout or balanced two-column composition.
• If motion is present, favor slow rotating rings, drifting beams, subtle wisps, and gentle reveal sequences. Motion should feel continuous and meditative rather than flashy.
• Glass treatment should stay dark and premium. Avoid translucent white blobs; use controlled smoky fills with crisp highlights instead.