Visual language
We want the project list, experiment controls and Godot view to feel like one tool, not a website wrapped around a second application. A dark neutral canvas keeps the arena prominent. Bright blue marks the main action and current selection; muted text holds supporting detail. Colour alone never indicates a permission or run state: the UI also uses labels such as Ready, Open and Saved replay.
Type
The website and Godot use Inter Variable. The website loads web/fonts/Inter-Variable.ttf through web/styles.css; Godot loads assets/fonts/Inter-Variable.ttf through src/app/brand_theme.gd. Inter is distributed with its SIL Open Font License in assets/fonts/OFL.txt. The documentation site uses the same font so examples and interface descriptions read consistently.
Body text is kept near 16 px. Small uppercase eyebrow labels identify a section, not its main action. Buttons and form fields inherit the body font. We use clear words on controls, such as Save draft and Close door, instead of relying on an icon or a colour change. Code and exported JSON remain monospaced so data is easy to inspect.
Palette
These are the shared application tokens, not colours assigned to arena materials or scientific stimuli. An experiment can deliberately use a different light or region colour.
| Use | Hex | Why |
|---|---|---|
| Page background | #080d16 | Recedes behind the workspace and 3D arena. |
| Surface | #111827 | Separates cards, side panels and dialogs from the page. |
| Input field | #0e1727 | Gives editable controls a distinct but quiet surface. |
| Border | #2b3850 | Defines controls without a bright grid of lines. |
| Main text | #edf3fb | Readable text on the dark background. |
| Secondary text | #9aabc2 | Descriptions and hints, not the sole carrier of a decision. |
| Accent | #38bdf8 | Selection, focus and links. |
| Strong accent | #0ea5e9 | Main buttons that start or save an action. |
| Success | #86efac | Connected and completed states, with a text label. |
| Warning | #fde68a | Validation or incomplete states, with an explanation. |
web/styles.css and src/app/brand_theme.gd are the source files to change together. A contract test in backend/tests/test_ui_contract.py checks the shared font and core colours. Ahmed's 2D arena editor currently lives on its own branch; its web/editor.css should be checked against these tokens before merge.
Layout and interaction
- Projects first: the first screen is for choosing or creating a project. New project details and template selection live in one popup, so they do not crowd the project list.
- Three experiment stages: Setup, Run and Review follow the researcher's task order. Setup has smaller Conditions, Arena, Templates and Environment sections, rather than one long form.
- One controller: the embedded Godot build hides its desktop menus. Website buttons send commands to the 3D engine. The standalone Godot build retains native controls for development.
- Keep the arena visible: on wider screens, the setup pane scrolls independently. Run and focus modes favour the arena, while live doors remain reachable where permitted.
- Safe feedback: validation stays beside the action, and replay has a visible mode label and Exit control. Planned model drop zones explicitly say they do not upload files.
We have automated checks for element-to-command wiring and shared tokens, but this is not a completed accessibility audit. Keyboard navigation, focus order, contrast, zoom and narrow-screen use still need hands-on testing with users.
AI Attribution: This page was drafted with OpenAI Codex assistance from the current application styles and code. The team should review it before submission.