Skip to content
Orbit CSS radial UI composer

CSS Roman numeral clock face — Orbit example

A Roman numeral clock face is the formal version of the analog clock — the one you’d put on a luxury brand homepage, a wedding planner app, or any UI where “Arabic numerals” feels too informal. The numerals (XII, I, II, III…) trade some readability for a sense of tradition and craft.

The trick with Roman numerals on a circle is keeping them upright. By default, satellites rotate to face outward from the center, which would tilt the labels. The spin-lock modifier counters that rotation so each numeral stays vertical, and the flip capsule keeps the text reading top-to-bottom on the bottom half of the clock.

How it works

  • spin-lock on each hour satellite is the key class. By default, satellites rotate to track their orbital angle, which would make the “VI” at the bottom appear upside-down. spin-lock cancels that rotation, keeping the numeral upright.
  • The <capsule> wrapper with flip handles the text-rendering direction. Capsules are layout primitives that ride along orbits with their own coordinate system, and flip reverses their internal text direction so multi-character numerals like “VIII” remain readable on the bottom half.
  • Three orbit-10 layers create the dial structure: a ring of 12 hour ticks, a ring of 60 finer ticks, and an inner blank ring (shrink-70) that creates the formal “double bezel” look. This is what distinguishes a luxury watch face from a casual one.
  • The hands stay numeric-style — there’s no rule that says a Roman-numeral face needs ornate hands. Stripped-down hands actually contrast nicely with the formal numerals.

Customization

Use Arabic numerals at 12, 3, 6, 9 for a hybrid “California dial” look — replace eight of the Roman numerals with empty satellites and only label four positions.

Add a brand label between the dial and the center, the same way the chronograph example does.

Make it black-on-gold for a luxury aesthetic:

.bigbang { background: #d4af37; }
.clock-frame { color: black; }
.satellite, .vector { background: black; }

Use this in your project

Install Orbit CSS and the markup above is your full clock.