Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

11 — Design System Mapping (Scheduler Module)

Maps the Scheduled Jobs console to the platform design system (00-shared/02 tokens, 00-shared/03 components, 00-shared/09 a11y). No new tokens; all module components are (proposed) (07).

1. Semantic colour mapping

SemanticToken (00-shared/02)Used for
Successsuccess (green)JobStatusBadge.ok, replay success
Info / runningprimary (blue)JobStatusBadge.running (pulse)
Warningwarning (amber)JobStatusBadge.missed — no run in expected window
Errorerror (red)JobStatusBadge.failed, failedReason text, invalid cron
Neutraltext secondaryunknown badge, empty states
Background surfacesurface / surface-variantcards (C4/C6/C7), log tiles

Never used: emoji/colour-only status (a11y rule C1, 00-shared/09).

2. Typography

UseTokenNotes
Job namesbody-medium, weight 500row title
Cron patternsmonospace variantcode-styled, never auto-wrapped
Run history / logsmonospace body-smalltimestamps + error excerpts
Humanized schedulebody-small, text-secondaryC2 tooltip + summary
Headers/strip countsheadline-small / label-largeC4 summary strip

3. Spacing & layout

  • Console is desktop-first (admin tool, 05 §Keyboard): list max-width 1200 dp; two-column list/detail ≥ 1024 dp.
  • Cards: standard AppCard padding (16 dp); summary strip flush with list.
  • Sheets (S3): max-width 640 dp, keyboard-avoiding.

4. Iconography

MeaningIcon
ok / failed / running / missed / unknowncheck-circle / alert-circle / pulse-dot / clock / minus (C1)
Removedelete-outline
Run nowplay
Logsfile-text
DLQinbox-archive
Queue family (C3)delivery → send; processing → cog; system → server

5. Responsive & platform behaviour

BreakpointLayout
< 640 dpsingle column; sheets full-width; cron input smaller but still monospace
640–1023list; S2 detail pushed below
≥ 1024 dptwo-column list/detail master-detail
Desktophover row highlight; menu on hover too

6. a11y & contrast

  • Badges: icon+text, contrast ≥ 4.5:1 for text, ≥ 3:1 for badge fill (00-shared/09).
  • Focus order: list → row menu → actions; sheets trap focus (10 §8).
  • Timestamps: screen-reader gets absolute UTC; sighted users get relative.
  • Logs screen: no auto-scroll while screen reader active (tail-live off unless explicitly enabled, S4).

7. Motion

All motion per 00-shared/08: m-fast 150 ms state changes, m-base 300 ms sheet/route transitions; pulse animation on running badge only (reduced-motion respect).