MarketTimeWidget — 4 Variant Mockups

Produced for operator request 2026-05-31. Explores richer treatments of the MarketTimeWidget beyond the post-#3182 baseline (tabular-nums, moss pulse, no-wrap). Each variant covers two modes and two states.

Screenshots rendered 2026-06-06 at 1440×900 via Playwright (Chromium).

Related memory rules: - feedback_moss_pill_live_indicator — moss-pill is a brand pattern; every variant preserves it - feedback_all_surfaces_confidence_engine — CE moss/cream/ink palette used throughout - feedback_no_forward_looking_framing — countdown labels say "Closes in" / "Opens in", not predictions

Comparison Grid

Variant A — Baseline

The post-#3182 reference implementation. A flat, single-line compact strip in the AppHeader: day name + ET time + pill + countdown. Full/Dashboard mode scales up the time display to 22px and adds the pill inline. No spatial or session-boundary information is conveyed — purely a status strip. It's the lowest-weight option and the stable floor for evaluating the others.

Variant B — Hours Bar

Adds an SVG horizontal timeline covering a 16-hour window (4 AM–8 PM ET) divided into three colored segments: premarket (dim moss), regular hours (solid moss), after-hours (dim moss). A live "now" marker (white tick + pulsing dot) slides across. Compact mode shows a ~120px bar beside the time label; full/Dashboard mode expands to a labeled 460px bar with ticks at 4 AM, 9:30, 12 PM, 4 PM, and 8 PM. The now-marker gives instant spatial awareness of where you are in the session — no reading required.

Variant C — Clock Face

A 24-hour radial clock SVG as the identifying element. The outer ring is divided into arc segments keyed to the CE palette — bright moss for regular trading hours, dim moss for extended hours, transparent for the closed overnight gap. A single hand points to the current ET hour; a pulsing dot marks the hand tip when the market is open. Compact mode embeds a 32px circle in the AppHeader before the time label; full/Dashboard mode uses a 96px face alongside the day/time/pill strip. This is the most brand-distinctive treatment — nothing else in the app looks like it.

Variant D — Rich Schedule

A full-card Dashboard widget that surfaces everything a user needs before a session: day + full date at large size, live ET time at 26px tabular-nums, the session's open and close times flanking a thin progress line, a ticking countdown with seconds separated to prevent layout jitter (46h 28m · 07s), and a next-holiday note. Compact/AppHeader mode trims to a text strip similar to A. The full card is meaningfully richer than the other full modes — it answers "when does it open, when does it close, what's coming up" without a click.

Comparison Table

Designer's Recommendation

Ship C (Clock Face) in the AppHeader compact slot + D (Rich Schedule) as the Dashboard card.

Variant C's compact 32px SVG clock is the most brand-distinctive element any of the four variants produce. The hand-position against the moss arc communicates "where are we in the trading day" at a glance without the user reading any text — that's a meaningful UX improvement over A's pure text strip. The engineering cost is the highest of the set (2–3 days) but the SVG is fully self-contained; no library dependency.

Variant D's full card wins for the Dashboard slot — it has the most information density in the clearest layout, and the separated-seconds countdown (h/m · s) is a thoughtful touch that keeps the layout stable while making the live nature of the data visible.

Variant B is a strong second option if C feels too unconventional. The hours bar in full/Dashboard mode is highly legible and would be immediately understood by any user who thinks in "session blocks." Compact B is weaker — the mini bar without a legend may feel opaque on first encounter.

Variant A is the floor. Keep it if there's no bandwidth for anything else, but the other three represent meaningful UX gains with small implementation budgets.

Files

Each file is fully self-contained: no external CSS, no CDN dependencies, live JavaScript ticking at 1s intervals.

Variant Intents + Tradeoffs

Variant A — Baseline (reference)

Intent: Document what is already live. A flat, single-line, compact strip: day name + ET time + pill + countdown. Full mode adds larger time display.

Tradeoffs: - Very low visual weight — fits cleanly into any header. - Carries no spatial/contextual information about where we are in the trading day. - Serves well as the stable floor for comparing the others.

Data dependency: is_open, next_open_at, next_close_at (all already available).

Variant B — SVG Hours Bar

Intent: Make the trading day legible as a spatial timeline. A 16-hour window (4 AM–8 PM ET) is rendered as an SVG bar divided into three segments: premarket (dim moss), regular hours (solid moss), after-hours (dim moss). A live "now" marker (white tick + pulsing green dot) slides across.

Compact mode: 120px bar sits beside a compact day/time label. The bar becomes a mini progress indicator — "where are we in today's session at a glance?"

Full mode: 460px bar with labeled time ticks (4 AM / 9:30 / 12 PM / 4 PM / 8 PM). Hover tooltip names the segment. The now-marker's pulse animation makes it feel alive.

Tradeoffs: - High legibility for spatial position in the trading day — particularly useful for users who think in "session blocks." - Compact bar may feel opaque on first encounter without a legend. - Tooltip is hover-only; mobile needs a tap reveal. - Adds ~40px of horizontal width vs. baseline compact. - Requires no new data (segment boundaries are static constants).

Data dependency: Same as A. Segment boundaries are hardcoded constants.

Variant C — Clock Face

Intent: A radial 24h clock face as the identifying element. The outer ring is divided into four arc segments keyed to the CE palette: premarket (dim moss arc), regular hours (bright moss arc), after-hours (dim moss arc), closed (transparent gap). A single moss hand points to the current ET hour. The minute-position dot pulses when the market is open.

Compact mode: 32px circle sits in the header before the time label. The clock functions as a "what session is active" glyph — the hand's position against the moss arc is immediately readable.

Full mode: 96px clock alongside day name, time, pill, and countdown. The larger face shows tick marks at 0h, 6h, 12h, 18h.

Tradeoffs: - Highest brand distinctiveness — a radial 24h clock is unusual and memorable. This is the "coolest thing" candidate. - Compact 32px face is readable but requires brief user orientation on first use (24h, not 12h). - The SVG is fully self-contained; no canvas or external library needed. - Requires no new data beyond what's already available. - Animation is disciplined: one pulsing dot, one ticking hand. Nothing else moves.

Data dependency: Same as A. Clock hand uses client-side ET time only.

Variant D — Rich Schedule

Intent: A card mode that shows everything a trader needs before the session: the current date and time prominently, the session's open/close times side by side, a live countdown with the seconds component ticking, and the next market holiday. Compact mode trims to day + time + pill + countdown, slightly tighter than baseline.

Full mode key elements: - Day name + full date ("Saturday, Jun 6") — large and prominent - Live ET time at 26px tabular-nums - Pill with moss pulse - Open time / connector line / Close time (9:30 AM — 4:00 PM) - Countdown with separated seconds ("46h 28m · 07s") so h/m stays stable while seconds tick - Next holiday note (static data, operator-supplied or hardcoded for v1)

Tradeoffs: - Highest information density of the four. Best for a dedicated Dashboard widget slot; too tall for an AppHeader insert. - Compact version is strictly a text strip — no new visual affordance vs. A. - Holiday note requires either a hardcoded lookup table or a new API field. For v1 a static US market holiday list is ~10 lines of data. - The separated-seconds pattern (46h 28m · 07s) is specifically chosen to prevent layout jitter from seconds changing the h/m column width.

Data dependency: is_open, next_open_at, next_close_at (already available) + optional next_holiday: { date, name } from getMarketHours().

Decision Matrix

How to Evaluate

Navigate to:

https://raxx-mockups.pages.dev/market-time-widget-variants-2026-06-06/

Open each HTML file and view at: - Desktop (1280px) — check the full-mode cards read cleanly - Tablet (768px) — check the state-row wraps without clipping - Mobile (375px) — verify compact-mode header doesn't overflow

Key evaluation questions: 1. Does the compact-mode widget feel native in the AppHeader dark bar? 2. At a glance, can you tell where you are in the trading day without reading text? 3. Does the animation feel disciplined (not distracting during a backtest review)? 4. Does the full-mode add meaningful context versus just a bigger version of compact?

Specs for feature-developer

If picking up these mockups, getMarketHours() already returns the fields needed for A, B, and C. Variant D's holiday note is the only additive field:

{
  "is_open": true,
  "next_open_at": "2026-06-09T13:30:00Z",
  "next_close_at": "2026-06-09T20:00:00Z",
  "next_holiday": {
    "date": "2026-07-03",
    "name": "Independence Day"
  }
}

The next_holiday field can be omitted at first (the widget hides the holiday band when absent) and added in a follow-up backend card.

All client-side clock math uses Intl.DateTimeFormat with timeZone: 'America/New_York' — no moment.js or date-fns dependency. The existing etWallClockToUtc helper in MarketTimeWidget.js can be extracted to a shared util.