ARAHARAH // TELEMETRY RAMS

DSGN-02 APPROVAL GALLERY

Rams implementation vs mockups — side-by-side, token by token. Left columns are the mockup reference renders; right columns are the implementation component sheet rendered from the token package.

AUTOMATED EVIDENCE (D-13)

`npm run audit` exits 0 — zero off-token values across every rendered declaration (colors, typography, radius, shadows, blur all derive from theme/src/tokens.css). Re-run it from the repo root; the gallery is the human side of the same gate.

MOCKUP VS IMPLEMENTATION ACTIVE ROUTE GUIDANCE

Active route guidance mockup render — MOCKUP — REFERENCE RENDER

Rams component sheet rendered from the token package — IMPLEMENTATION — COMPONENT SHEET

Compare: maneuver banner + arrow (SEC-05), telemetry card (SEC-04), event chips (SEC-03), headline / telemetry-num typography, buttons (SEC-01).

MOCKUP VS IMPLEMENTATION NAVIGATE MAP OVERVIEW

Navigate map overview mockup render — MOCKUP — REFERENCE RENDER

Compare: layer-control toggle (SEC-06), chips / status badges (SEC-03), label typography, inputs (SEC-02). The map canvas itself is the basemap row below.

MOCKUP VS IMPLEMENTATION COMMUNITY INCIDENT REPORTER

Community incident reporter mockup render — MOCKUP — REFERENCE RENDER

Compare: input fields (SEC-02), buttons (SEC-01), checkbox (SEC-06), hazard chips (SEC-03), body typography. The reporter's interactive modal flow is intentionally static here (out of scope, deferred).

MOCKUP VS IMPLEMENTATION TELEGRAM LIVE TRAFFIC FEED

Telegram live traffic feed mockup render — MOCKUP — REFERENCE RENDER

Compare: full typography specimen (SEC-00) — display, headline, body, labels, telemetry-num — plus chips (SEC-03), buttons (SEC-01), inputs (SEC-02), telemetry card (SEC-04).

BASEMAP DIRECTION RAMS LIBERTY // KL METRO

Rams Liberty basemap rendering over KL with the reserved signal-orange route vector

Grayscale / muted land + water grounding, desaturated roads, muted labels — every cartographic color derived from the token package (D-09), labels in Rams-adjacent hosted fonts (D-10). Signal-orange appears nowhere except the route vector placeholder, reserved for Phase 5 (D-08). Confirm: no orange in the cartography, no saturated non-red hues, hierarchy by road weight, not tone.

TOKEN LEDGER NAMES ONLY // D-07

Typography scale — every name rendered in its own token (the package owns every numeric value):

DISPLAY-LG: DISPLAY-LG
DISPLAY-LG-MOBILE: DISPLAY-LG-MOBILE
HEADLINE-LG: HEADLINE-LG
HEADLINE-LG-MOBILE: HEADLINE-LG-MOBILE
HEADLINE-MD: HEADLINE-MD
HEADLINE-SM: HEADLINE-SM
BODY-LG: BODY-LG
BODY-MD: BODY-MD
BODY-SM: BODY-SM
LABEL-LG: LABEL-LG
LABEL-MD: LABEL-MD
LABEL-SM: LABEL-SM
TELEMETRY-NUM: 18:42

Hero color tokens — swatches render the tokens themselves:

SIGNAL-ORANGE: SIGNAL-ORANGE
FUNCTIONAL-RED: FUNCTIONAL-RED
OLIVE-GREEN: OLIVE-GREEN
SOFT-BEIGE: SOFT-BEIGE
MATTE-BLACK: MATTE-BLACK
CHASSIS-SUBTLE: CHASSIS-SUBTLE

APPROVAL SCOPE // DSGN-02

This gate covers the fidelity bar — every component family on the sheet renders from the token package, verified token-by-token against the mockup renders — and the basemap direction (Rams-constant cartography, accent reserved). It does NOT cover interactive flows: incident-report modal flows, map interaction, and animation polish are intentionally out of scope for this phase (deferred per the phase context).

Resume signal for the phase checkpoint: "approved" (fidelity bar met, basemap direction good) — or a list of specific screens / components / basemap aspects to fix and iterate before DSGN-02 is recorded.