# Standing TV visual system — proposal

**Status:** Approved on 1 November 2026 and implemented in the root `DESIGN.md`. This file remains the pre-implementation proposal snapshot. It applies to `standing-tv.html` for a browser-driven portrait display and records the old system separately from the proposed changes.

## Product purpose

A visitor should recognize the room and understand the relevant session, its time, topic, and three speakers at a glance. The operator must still be able to select a room, enter fullscreen, rotate the output, and edit the schedule. This is a noninteractive display first; setup controls are secondary.

## Observed system

- Colors: UNAIR blue `#002147`, deep blue `#00152E`, yellow `#FFC72C`, white, and additional blue card fills. These values appear in `standing-tv.html` lines 22–32 and 79–85.
- Typography: Plus Jakarta Sans from Google Fonts; many `font-extrabold`/`font-black` utilities. Existing CSS uses `--u` relative to frame size for display type.
- Layout: header with room and clock; three vertically stretched cards; footer with date and institution. Active card is white with a thick yellow border, glow, nested light cards, progress line, and pulsing status pill. Other cards are dark blue. Decorative UNAIR motif appears as a repeat and corner watermarks.
- The data file contains a `categoryBadge` for each room, but the TV header currently does not use it.

## Proposed direction

An institutional timetable, with the focus and restraint of a printed event program: large room name, unmistakable time, aligned session structure, and calm blue/yellow contrast. Avoid promotional dashboard styling. No new logo, illustration, gradient, glow, emoji, floating card, or continuous pulse.

### Composition

1. **Masthead:** room name is the largest anchor; room category may appear beneath it using the existing data. Clock and date are compact, aligned to the opposite edge, and consistently labeled WIB. Keep a safe inset from all edges for possible TV overscan; the final inset is verified on target hardware rather than assumed.
2. **Featured session:** a single light or high-contrast panel carries the current session, or the next session before it starts. Show start–end time, plain-language state (`Sedang berlangsung`, `Berikutnya`, or `Selesai`), full main theme, and its three subthemes with speaker names. Use a number or rule to separate the three topics; use text, not a microphone emoji.
3. **Other sessions:** two compact rows show time and full main theme with a status word. They are deliberately quieter, but retain sufficient contrast. Before/after all sessions, the most relevant session remains featured and status wording must not falsely imply it is live.
4. **Footer:** institution and date as static text. Operator actions are absent at idle and appear only in an operator interaction state.

### Color roles

| Role | Proposed value / rule |
| --- | --- |
| Canvas | Existing UNAIR blue `#002147` |
| Deep neutral | Existing `#00152E` for limited separation, not a nested card layer |
| Accent | Existing yellow `#FFC72C` for current status and one structural rule |
| Featured surface | White or near-white, with deep blue text; final value checked in browser |
| Secondary text | Solid light text on blue; avoid low-opacity text for essential schedule data |

### Type and spacing

- Use Plus Jakarta Sans if it can be packaged locally with a valid license; otherwise use a tested system sans fallback. Use regular/medium for speaker and secondary text, semibold for subthemes, bold for session title and room. Avoid all-caps for long content.
- Set a meaningful size floor for the actual 1080×1920 and 540×960 outputs. Initial targets at 1080×1920: room 56–64 px; featured theme 40–48 px; subtheme 32–36 px; speaker 28–32 px; secondary session titles 30–34 px. These are design targets, not measured current values. Adjust only after rendering longest supplied strings; never silently clip to hit a target.
- Use one consistent spacing scale based on the frame width/height. Align times and text to a common vertical grid. Prefer open space and thin rules to padded pills and nested boxes.

### Behavior and states

- All clock, date, and session-state calculations use `Asia/Jakarta`. The displayed `WIB` label must match that calculation.
- `NOW`, `UPCOMING`, and `PAST` remain explicit in text. No session present is a distinct state, not a fake live state.
- The idle screen has no blinking or pulsing element. Content transitions only when session state changes; reduced-motion settings are respected if a transition is used.
- The screen does not rely on scroll, hover, or touch to reveal schedule information. Keyboard shortcuts and an operator-accessible settings entry remain available.
- Fullscreen, 90° rotation, Wake Lock, room switching, the editor, and same-browser storage behavior remain in scope for regression checks. Cross-device updates require a separate data-delivery design and are not implied by localStorage.
- Runtime styling and iconography must remain readable without an internet connection once the page is deployed locally.

### Open implementation decision

The proposed hierarchy gives full subtheme/speaker detail to one session and time/title summaries to the other two. If the event requires all nine speaker rows visible at once, the information architecture and type targets need to be reconsidered with the actual TV size and viewing conditions. No physical display assumptions have been made in this proposal.