Plate № 03 · Scheduling · time-zone surface

A pattern from the gf.cx specimen book

Timeline overlap · zone-card

The problem

Some surfaces have to answer a question that's half rule and half clock: when, in time, should this happen — and is it happening now? A cross-region transfer window, an on-call handoff, a market overlap, a maintenance slot. Each reader sits in a different time zone, so a single local-clock answer is wrong for everyone but one person. You need an axis everyone can read their own row off, a stated window, and a live "where are we now" tick — without three separate widgets fighting each other.

The element, in-page

The live copy below runs in a sandboxed iframe (the pattern-preview primitive), so its styles never touch this page. The now-tick is keyed to your current UTC time — the card is green inside the window, charcoal outside it. Flip the tabs to read the source that produced exactly what you see.

The three baked-in defaults

• Solid dark-green gate-hero (#2c4a3a) carries the action: the window, a duration chip, a live countdown. Mirrors the data.gf.cx gate-hero.
• UTC-anchored timeline — every column is the same absolute moment; each row shows its own local hours, so a reader in any zone reads their own line. Labels emit on UTC-even columns so the rows align regardless of offset parity.
• Clickable legend chips toggle zone overlays (off-peak band, active-hours band) — the chart is both a planning tool and an exploratory one.

Where it applies — and where it doesn't

• Use when an action window spans time zones and needs a live "where are we now" tick — transfer schedules, cross-region maintenance, market overlap, on-call handoff.
• Skip when the window is single-zone (a plain countdown is enough), is continuous (use a status badge), or carries day-of-week / DST complexity beyond a one-line tweak (build a calendar surface instead).

The shared closed-state

Outside the window every surface carrying this pattern flips to one charcoal field — unified grammar across the portfolio: dark field means closed, green field means live. The reference link stays available 24/7; closed is a visual mode, not a hidden element (the planning question "when does it next open?" matters as much as the live one). Tokens: field #1a1a1a · lead #dddddd · time-accent honey #8a6f1f · muted #8a8a8a. JS toggle is one client-side tick() adding a .closed class on UTC hour — no server re-bake.

Reusable elements

The named, copyable pieces — lift any one without the others:

• Gate-hero card — solid #2c4a3a field, honey-accent window numbers, live countdown hint. The "what + when" block.
• UTC-anchored multi-row axis — one absolute-time column set, N local-clock rows; the projection that makes a cross-zone read trivial.
• Now-tick — ::before-pulsed line decoupled from its tooltip pills (pills stay rock-steady), traffic-light coloured by zone.
• Gradient band edges — linear-gradient fade-in/out so a semantic boundary (UTC 14:00) reads as a warm-up, not a wall.
• Charcoal closed-state token set — the four hexes above, applied uniformly so every surface goes dark together.

Reference

Source

Dan, 2026-06-04 · ~25 min of iterative screenshot-loop refinement.

In use / example

status.gf.cx/transfer-windows/ — live, with the /clock alias. Copy its index.html as the starting template; swap the TZ offsets, band positions, window times, and the updateNow() countdown.

Reusable elements

Gate-hero · UTC-anchored axis · pulsed now-tick · gradient bands · charcoal closed-state tokens (listed above).

Origin policy

APAC transfer-window policy, 2026-06-04 — why the off-peak overlap (Asia overnight × NYC working hours) is the chosen window.