Design Systems

Glass Dark Mode Clock

Dark frosted surfaces built around a circular calibration dial.

What it is

A dark glass direction centered on a clock-like dial: near-black base with beam grids, frosted nav capsules, and a layered ring and tick centerpiece.

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

Why it matters for design

  • A dominant dial anchors the layout instead of sitting as a decorative widget.
  • Beam lines and crosshairs align to the dial, reinforcing the calibration logic.
  • Monochrome palette means brightness comes from glass highlights, not saturated accents.

What it covers

  • Scope
  • Visual target
  • Implementation guidance
  • Recommended patterns
  • Tuning knobs
  • Avoid

How to install

Glass Dark Mode Clock

  1. Clone the repo.

    git clone https://github.com/MengTo/Skills
  2. Point Codex at the skill file.

    agent-skills/web-design/glass-dark-mode-clock/SKILL.md
  3. Then describe the UI you want. Codex follows the skill.

How to run it with Codex

  1. Start with a near-black base plus faint grid and beam guides.

  2. Build nav, pills, and buttons as dark glass capsules with 1px highlight wrappers.

  3. Layer the dial: outer ring, ticks, rotating labels, center emblem.

Every plugin here is free, open source, and links to its real upstream source.

More on the codex-design list ↗

Next step

Design with Open Design, without the setup

Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.