Steve Hinan presents

UI Design Document

Standard Game UI v1.3 (temporary name)

One shared look for every Steve Hinan Presents game. Synth, Polyrhythm, and Portal all use it. The dials, Record row and tap hint below are the real shared components the games load from /shared/ui/standard-game-ui/. Pick a Style to restyle the whole app at once, fine tune any section, then Export the look.

Style

Palette

Every color in a game comes from these tokens. Red is for recording only and stays the same in every style.

Accent A Accent B Accent C

Typography

Title font Title weight Tracking UI font Body font

Game title

Polyrhythm

Body

Tap the circles to fly the tunnel. Match the rhythm to open the Rift.

Dial label

Volume

Dial readout

62%

Button

Record

Small label

Length

Buttons

Shape Border Glow

Record button and length

The real SHPRecorderUI. Synth and Portal use seconds (15 or 30). Polyrhythm uses cycles (4 or 8). Press Record to run a 5 second simulation (nothing is captured), or preview each state.

State

Seconds (Synth, Portal)

Cycles (Polyrhythm)

Dials

The real SHPDial. Drag up or down, use the arrow keys, or double tap the readout to type a value. Classic is the shipped v1 knob; the other dial styles are proposals drawn on top of it. Parallel dials use letters: Osc A (orange), Osc B (green), Osc C (purple).

Dial style

Sliders and steppers

Parallel rhythms are Rhythm A (orange), Rhythm B (green), and Rhythm C (purple). The numbers in the steppers are counts.

Slider style

Volume

Tempo

Amount

Rhythm A

Rhythm B

Rhythm C

Popups

Game popups close by themselves after 10 seconds. The green bar shows the time left and runs down toward the left.

Tap the art

Players start or check by tapping the art itself. The shared tap hint (a glow pulse plus a tap hand) shows what to tap. Portal: a big PLAY over the portal art. Polyrhythm: tap the shapes to check an objective.

Hint color Hand Pulse

Tap the portal to start.

Title lockups

Big titles in the title font. PORTAL runs nearly the full width.

Synth

stevehinanpresents.com/synth

Polyrhythm

12AGAINST4AGAINST3

stevehinanpresents.com/polyrhythm

Portal

stevehinanpresents.com/portal

What this is

The Standard Game UI ("UI Design Document" here; both are temporary names) is the shared, versioned UI standard every Steve Hinan Presents game follows: Synth, Polyrhythm, and Portal 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).

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 Portal, 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; Portal 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.
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.

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 1 (Standard v1) 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.

Status

v1.3 is the current version. Synth, Polyrhythm, and Portal all use it. The name is temporary until Steve picks one.