DESIGN
hermes-web-app — product design
Section titled “hermes-web-app — product design”Hermes — Fleet Intelligence. The dispatch brain and the God view for Rechaj ops: every keke, battery, station, technician and KaaG unit on one near-black command map, legible at a glance and actionable in one click. UI to the hermes-java-api telemetry / dispatch / command service. The canonical interactive build lives at flows/god-view/ — read its design.md before touching any Hermes screen.
Rationale
Section titled “Rationale”Hermes is the one Rechaj surface that runs dark, because it is a 24/7 command center (station tablet, dispatch phone), not a transactional app. The dark basemap recedes so the assets emit the only light — brightness is activity, motion is movement, status is felt before it’s read. The audience is every ops team (Field Support, Swap, Charging, KaaG, Finance, leadership); the hero job is killing the rider-search phase in field dispatch.
The dark surface forces a small set of deliberate, documented overrides to the global system. They are catalogued in the flow’s design.md → “Deliberate divergences”. The two that future agents most need to know:
- Brand signal is the canonical green
#01E46F(logo bolt /primary.6), not the design-brief’s illustrative mint. Primary button stays#01E46Fbg + dark text. - Hairline borders carry surface separation on this product only (see next section). The type stack stays on General Sans + JetBrains Mono — the brief’s Sora/Hanken were not adopted.
Inherits from global DESIGN.md
Section titled “Inherits from global DESIGN.md”This is a web/desktop product (1440px). The .phone mobile shell and rsm-* mobile scaffold don’t apply directly, but every token, brand, and component foundation does. Before adding a new screen, read these sections of the master DESIGN.md:
- Global Rules — official logo SVG, no emojis, no card strokes, 4px-grid spacing.
- Color Tokens, Typography, Spacing, Shadows, Border Radius — token foundations.
- Card Design — same no-stroke rule.
- Table Design — driver-list / dispatch tables, pagination, per-page selector.
- Breakpoints & Grid.
- App header (
.mhdr) — the canonical web/desktop top bar pattern. - Status chips — canonical 3-color rule for trip / dispatch / driver state.
- Status timeline (state-machine progress) for trip lifecycle log.
- Class-name prefix ownership.
Class-name prefix
Section titled “Class-name prefix”hermes-* for Hermes-specific web components (driver list, trip detail, route map tile). Register in the global class-name ownership table.
Cards — borders (documented dark-surface exception)
Section titled “Cards — borders (documented dark-surface exception)”The global rule is “cards have no strokes — box-shadow only.” That rule exists because shadow separates surfaces on light. On Hermes’s near-black canvas, shadow is invisible, so a uniform 7%-white hairline (--hair) is the correct, genre-standard separator. This is a deliberate, product-scoped exception — not drift. Do not “fix” it back to shadow-only; you will erase every surface edge on the dark map.
The part of the rule that still holds, hard:
- ✅ Hairline borders are recessive and uniform (
--hair/--hair-2) — for separation only. - ❌ No single-side accent stripe encodes state. State is the dot + badge + label, never a coloured edge alone. (Brief rule: pair colour with shape/label; never rely on hue.)
- ❌ Never a coloured full-card fill as the only status signal — pair it with the badge.
For any future light Hermes surface (none today), revert to the global shadow-only rule.
The canonical interactive build is flows/god-view/ — the full command center (God View · Dispatch · Impact · Field Technician mobile). See its design.md for the brief→build map, the divergence ledger, and the states still to design.