Design reviewer
Can compare hierarchy, density, border discipline, typography and motion on identical sample content.
Product requirements · visual prototype
RZ Cockpit Re-skin Mockup
A deliberately small before/after prototype used to judge the industrial instrument-register surface while preserving operational color meaning. It is not a full cockpit, data model, production dashboard or live telemetry endpoint.
01 Purpose & hypothesis
Test whether a charcoal-green instrument register, thin-line geometry, mono typography and restrained motion improve scanability without changing load-bearing electrical/cooling semantics.
Decision boundary: passing this prototype supports a visual direction only. It does not approve production data, calculations, workflows, accessibility or performance.
02 Users & evaluation questions
Operations reviewer
Can confirm Feed A blue, Feed B green, trip red and cooling cyan retain the same meanings.
Frontend engineer
Can identify reusable surface tokens without copying prototype-only markup as production architecture.
Accessibility reviewer
Can flag color-only meaning, contrast, reduced motion and responsive gaps before adoption.
03 Scope & non-goals
In scope
- Two equal content columns.
- Four KPI labels and authored values.
- Illustrative two-feed SLD.
- Seeded CDU return trace.
- After-only count-up and trace draw.
- Semantic legend.
Non-goals
- No real API, engine or authentication.
- No operational alarm workflow.
- No complete responsive navigation or site shell.
- No production calculation assurance.
- No full parity with datahallAI.
04 Functional requirements
| ID | Requirement | Deterministic check |
|---|---|---|
| FR-01 | Render Before and After columns from the same semantic sample. | Both show PUE, IT, GPU, CDU, SLD and cooling trace concepts. |
| FR-02 | Keep Feed A blue in both columns. | Source, bus and closed breaker use the declared blue. |
| FR-03 | Keep Feed B green in both columns. | Source and bus use the declared green. |
| FR-04 | Let trip severity override Feed B domain color. | Open F1B breaker and label are red in both columns. |
| FR-05 | Keep the cooling trace cyan in the After column. | Trace uses the cooling semantic token. |
| FR-06 | Use thin lines and 3 px corners in the After surface. | Cards and panels avoid rounded-everything treatment. |
| FR-07 | Use IBM Plex Mono/JetBrains Mono instrument typography. | After labels and values resolve to declared mono stacks. |
| FR-08 | Animate only After values/trace, then hard-settle. | Final values equal authored targets within 1.2 seconds. |
| FR-09 | Generate trace data deterministically. | Reload produces the same SVG path. |
| FR-10 | Collapse comparison to one column below 900 px. | No comparison grid overflow at 375 px. |
| FR-11 | Expose an explicit semantic legend. | All four meanings have text labels. |
| FR-12 | Link public PRD and Manual. | Both resolve without an access gate. |
05 Display data & telemetry-like points
These values are visual fixtures. “Source binding” names local markup/code, not a telemetry transport.
| Display | Meaning | Unit / value | Semantic color | Source binding |
|---|---|---|---|---|
| PUE | Illustrative facility efficiency KPI. | ratio · 1.30 | Neutral/derived. | Authored DOM + data-count |
| IT | Illustrative IT load. | MW · 14.26 | Neutral. | Authored DOM + count-up |
| GPUs | Illustrative accelerator count. | count · 7,776 | Neutral. | Authored DOM + count-up |
| CDU | Illustrative running/installed count. | count · 36/48 | Cooling context. | Authored DOM |
| PLN-A / bus A | Feed A path. | state · closed | Blue. | sld({feedA}) |
| PLN-B / bus B | Feed B path. | state · closed | Green. | sld({feedB}) |
| F1B | Illustrative open/tripped feeder. | state · TRIP | Red overrides green. | breaker(..., false) |
| CDU return | Seeded visual trace. | display units · seeded 22–66 | Cyan in After. | seed(46,22,66,11) |
06 Determinism & calculation rules
xₙ₊₁ = (9301 × xₙ + 49297) mod 233280valueₙ = 22 + (66 − 22) × xₙ / 233280Seed = 11, sample count = 46. This is a visual pseudo-random trace, not a thermal model.
easedProgress = 1 − (1 − progress)³display = target × easedProgress; final = targetA hard settle prevents screenshots/tests from capturing an intermediate KPI.
07 Visual and interaction contract
After register
- Charcoal surface, restrained green/cyan signals.
- Thin borders and square industrial proportions.
- Mono labels and tabular values.
- Subtle graticule limited to the instrument frame.
Guardrails
- No dot-grid hero noise or generic purple accent.
- No cursor tracking, 3D tilt or bouncy text.
- No semantic-color reassignment.
- Motion must not hide the final number.
08 Acceptance criteria
| ID | Acceptance statement | Evidence |
|---|---|---|
| AC-01 | Both columns expose the same primary semantic content. | DOM contract. |
| AC-02 | Feed A/Feed B/trip/cooling colors match legend labels. | Computed-style + SVG assertions. |
| AC-03 | F1B remains red in both columns. | SVG snapshot. |
| AC-04 | Seeded trace path is identical across reloads. | Path checksum. |
| AC-05 | Animated target values settle to 1.30, 14.26 and 7,776. | Timed browser assertion. |
| AC-06 | Comparison becomes single-column at 375 px without page overflow. | Responsive screenshot. |
| AC-07 | Prototype, simulated data and non-production limits are explicit. | Copy assertion. |
| AC-08 | PRD and Manual links are keyboard reachable and HTTP 200. | Link/browser audit. |
09 Non-functional requirements
Performance
No framework or network data dependency; bounded SVG generation and a finite animation settle.
Accessibility
Semantic meaning has text labels; reduced-motion support and full shell accessibility are required before production reuse.
Security/privacy
No inputs, credentials, persistence, operational data or write endpoint.
Compatibility
Modern evergreen browsers; core comparison remains readable if animation does not run.
10 Provenance & validation map
| Evidence | Authority | Claim supported | Validation |
|---|---|---|---|
rz-cockpit-mockup.html | Current prototype | Markup, styles, fixture values, SVG and animation. | Static/browser inspection. |
| Prototype Manual | Project method note | Fixtures, algorithms, interpretation and limitations. | Documentation gate. |
| RZ design standard | Project visual authority | Typography, line, color and anti-pattern rules. | UIUX review. |
| Production cockpit | Future implementation authority | Actual data/workflow parity. | Separate frozen contract. |
11 Known gaps & release decision
Known implementation gaps
- The prototype has no standard site navbar/theme/cookie shell.
- Reduced-motion behavior is not implemented in the prototype.
- Before/After parity is conceptual, not a machine-checked field schema.
- The same four fixtures appear once in each comparison column by design; this is comparison parity, not duplicate telemetry.
Decision
Publish as an honest design prototype with public documentation. Do not label it a production cockpit or use its values as engineering evidence. Fix documented gaps under a separate cockpit contract because this task permits link-only cockpit changes.