glass-dark-mode-clock — Claude Code skill: dark glass UI

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

# 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.

## Recommended patterns
- Fixed dark nav with backdrop blur and thin bottom border floating above a low-contrast grid field.
- Eyebrow pills and buttons built as glass-dark capsules with 1px highlight wrappers and clean inner dark fill.
- Circular hero dial with outer text path, degree labels, rotating tick groups, and a minimal center emblem.
- Background beam lines and crosshairs that align with the circular module and typography to reinforce calibration logic.
- Soft white wisps, fog, or radial highlight inside the dial zone to make the glass and clock surfaces feel alive.

## Tuning knobs
- Glass strength: tune blur, opacity, and highlight intensity so surfaces read premium without becoming muddy.
- Dial complexity: add or reduce rings, ticks, labels, and technical markers depending on how instrument-like the system should feel.
- Motion tempo: keep rotations and beam sweeps slow enough to feel stable and controlled.
- Contrast: preserve strong readability between white text, gray support copy, and the dark glass layers.
- Glow restraint: use soft white glow only near focal glass edges or inside the dial, not across the whole page.

## Avoid
- Generic pastel glassmorphism with bright translucent cards floating on colorful blobs.
- Treating the clock motif as a decorative afterthought disconnected from the layout.
- Overloading the dial with too many labels or motion until it becomes noisy.
- Using strong accent colors that break the monochrome calibration aesthetic.
- Flattening everything into plain black boxes with no glass depth, beam structure, or radial hierarchy.