Design
Components
Covers, tags, badges, banners, rows, buttons, the side menu and the footer hints, as the loader builds them.
On this page
Cover
The library’s main element: a portrait 2:3 cover, like box art in GOG Galaxy.
- 220×330 thumbnail in the library, decoded once and reused by every layout (290 KB each, about 19 MB for 64 games). The detail page decodes its own 300×450.
- Focused: an accent outline that grows in over 120 ms, and the cover scales up (12 % in the Row layout, 4 % in Grid and Cinematic).
- No picture: a placeholder, coloured from the folder name, with the title’s first letter.
- Covers are decoded one per frame after the library first appears, so start-up does not wait for them.
Tag
Used for “Experimental”, “Ren’Py 8.5.3”, “Handheld”, “Missing”, the profile and preset chips, and banners. One style for all:
- a full pill (
LV_RADIUS_CIRCLE), 16 px × 7 px padding; - the colour’s text on a 20 % tint of the same colour.
Badge
A small ! on a cover:
| Colour | Meaning |
|---|---|
| Red | The game cannot start |
| Amber | Switch performance issues |
Banner
A full-width strip under the header: red for a read-only SD folder, amber for a controller file loaded from its backup.
Row and button
- Rows (menu entries, settings) and buttons sit on
SURFACE_HI. - Focused: accent outline, accent text, and a dark accent fill inside: 10 % accent mixed into
#121215. Stronger fills (20 % and 40 % into#1f1f25) were tried and rejected: the pink text disappeared into them. - Disabled (“Can’t launch”): grey text, even when focused.
- On the details page the buttons are always at the bottom right, with Launch last and a play icon on it.
Side menu
The + menu: a panel that slides in from the right over the library. Its items scroll when they do not fit; the help (A, B) stays at the bottom under a rule. A tap beside it closes it. The Change picture choice (Use as cover / background / both) uses the same panel.
Notice
A centred panel with one button, for example the applet-mode notice. No “Launch anyway”. A tap beside it closes it.
Footer
- Status line, left: the last message from the logic, red for errors and green for success. Screens without a message show a note there (controller settings: the emergency combo).
- Hints, right: each action with the button currently mapped to it. They update as soon as a new mapping is saved, and a tap on a hint does its action.
Controller-shaped test
The controller test lays the buttons out as on the controller: shoulder buttons on top, D-pad and A/B/X/Y as crosses, the sticks between. Pressed buttons light in the accent.