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.
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
-
Clone the repo.
git clone https://github.com/MengTo/Skills -
Point Codex at the skill file.
agent-skills/web-design/glass-dark-mode-clock/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Start with a near-black base plus faint grid and beam guides.
-
Build nav, pills, and buttons as dark glass capsules with 1px highlight wrappers.
-
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.