UI

What this is

The Standard Game UI ("UI" here; both are temporary names) is the shared, versioned UI standard every Steve Hinan Presents game follows: Synth, Polyrhythm, and Void today, and every game after them.

The shipped files live at /shared/ui/standard-game-ui/: tokens.css (the palette and basics), dial.css and dial.js (SHPDial, the rotary knob), recorder.css and recorder.js (SHPRecorderUI, the Record button, length dropdown, and progress). Version 1.1 adds tap-hint.css and tap-hint.js (SHPTapHint, the tap the art hint). Version 1.2 adds the encoding mute to recorder.js. Version 1.3 adds the A/B/C labels rule (docs only). Version 1.4 rebuilds the 20 styles in this app and adds the shared Hexapuss Drip theme, themes/hexapuss-drip.css, which is live. Version 1.5 adds optional page event callbacks to recorder.js; every other shared file stays at v1.4.

Rules

• One palette. Orange #FF8A1F, green #3DDC84, purple #A855F7, black, white, and five grays. No literal colors in game CSS: use a token or a mix of tokens.
• A/B/C labels. Parallel controls (rhythms, oscillators, keys, lanes, voices) are labeled A, B, C, never 1, 2, 3: Rhythm A or Oscillator A where space allows, Osc A where it is tight. A is orange, B is green #3DDC84, C is purple, in every game. Aria labels, popups, objectives, and recorded text use the same letters. Numbers stay for counts, progress, and ratios, such as Portal 2 / 4, 15 seconds, or 12 AGAINST 4 AGAINST 3.
• Red is for recording only. #FF3B3B marks the Record dot and the recording state, and nothing else.
• Shared components, not copies. Games load the dial, recorder and tap hint from /shared/ui/standard-game-ui/ and do not restyle them.
• Record. One Record button with a length dropdown: 15 or 30 seconds for Synth and Void, 4 or 8 cycles for Polyrhythm. Clips are Instagram 4:5, 1080 x 1350.
• Encoding mute. From the moment encoding starts until the player closes the Download and Close window, the game is silent. When the window closes, the sound comes back exactly as before. The ramps are click free and the mute never reaches the recorded clip.
• Tap the art. Starting or checking happens by tapping the art. There is no separate Check button.
• Tap hint. Whatever the player should tap is marked by the shared tap hint: a slow glow pulse plus a drawn tap hand. It is visual only, never drawn on the canvas, so it never appears in a recording. Polyrhythm shows the hand on Objective 1 and the pulse after; Void shows both on PLAY over the portal art; Synth shows it while the browser holds sound back.
• Popups close by themselves after 10 seconds, with a green bar that runs down toward the left.
• Type. Game titles are big, bold, and tracked out. Labels, readouts, and buttons use the UI font. In v1 every role uses the system UI font stack. The Hexapuss Drip preset uses title tracking of -0.05em.
• Cache busting. Every shared file is loaded with ?v= plus the first 8 hex characters of its sha256.

Versioning and review

The standard is versioned and will keep improving. Each release has a VERSION file, a version line at the top of every file, and a changelog. v1 (Nov 10, 2026) is the first release. v1.1 adds the tap hint without changing any v1 file. v1.2 adds the encoding mute to the recorder; every other file is unchanged. v1.3 adds the A/B/C labels rule; no code file changes. v1.4 rebuilds the 20 styles in this document and adds the shared Hexapuss Drip theme file; the other shared files are unchanged. v1.5 changes recorder.js only; the tokens and the Drip theme stay v1.4.

Every new build of every game is reviewed against the current version of the standard before it goes live. When the standard changes, the next build of each game is checked against the new version.

Style 2 (Standard) is the shipped look. The other 19 styles and every per-section control are explorations. An exported look is a proposal until Steve adopts it into a new version of the standard.

Recorder page events (v1.5)

recorder.js v1.5 is additive and backward compatible. When a game passes onHidden, onVisible, onPageHide, or onUnload, the kit binds the page hide and teardown events and calls them. Games that do not pass them are unchanged. The kit still does not capture or encode, and it does not decide whether Stop saves or cancels; each game does that.

Expected behavior in a game that uses them:

• Stop during a run offers the clip.
• Hiding the page finalizes the clip and offers it when the player comes back.
• Closing the page tears everything down, with no closing prompt.
• Cancel during encoding may still abort.

Void b4 is the first game to use them. Polyrhythm and Synth adopt them later. The shared tokens and the Hexapuss Drip theme are v1.4; recorder.js is v1.5. The two version numbers are separate.

Theme tokens

Each style in this app sets look tokens as CSS custom properties. These tokens are defined by the UI app presets:

• --sgu-font-title
• --sgu-title-tracking
• --sgu-surface
• --sgu-btn-radius
• --sgu-border-w
• --sgu-glow
• --sgu-focus, the focus ring, which stays white, because red is for recording only

--sgu-font-title, --sgu-title-tracking, --sgu-surface, --sgu-btn-radius, --sgu-border-w, and --sgu-glow are not in the shared tokens.css. The shared Hexapuss Drip theme, /shared/ui/standard-game-ui/themes/hexapuss-drip.css, is live and sets them; a game opts in by linking it after the standard UI files. --sgu-focus is already in the shared tokens.css as white; the app also sets it from the style's white token.

Standard controls

Besides the shared dial, recorder, and tap hint, these controls are part of the standard look. They are styled from the tokens and the patterns on this page. They are not yet shipped as shared kit files.

• Dropdown. The focus ring is white (--sgu-focus), because red is for recording only.
• Segmented buttons. The selected view and finish segments are purple.
• Toggle switch. Toggles are green when on.
• Stepper (- n +).
• Profile card picker. The selected profile card is orange.
• Icon button.
• Primary and secondary action buttons.
• Section label.
• Collapsible section.
• Stat rows.

Status

v1.5 is the current version of this document. The shared files at /shared/ui/standard-game-ui/ are v1.4, and the Hexapuss Drip theme, /shared/ui/standard-game-ui/themes/hexapuss-drip.css, is live. recorder.js is v1.5. Synth, Polyrhythm, and Void all use those shared files and the Drip theme. Truss applies the Hexapuss Drip look from this app's preset, with the theme tokens above in its own CSS. The name is temporary until Steve picks one.