Design
Tokens
Colours, type sizes, radii and motion of the loader UI, with the constants they come from.
On this page
OLED dark with one accent colour. On an OLED Switch, black pixels are off, so the background is pure black.
Colour
Token (ui_internal.h) | Value | Use |
|---|---|---|
BG | #000000 | Background |
SURFACE | #121215 | Cards and panels |
LINE | #26262d | 1 px hairline around cards and panels, so their edges show on black |
SURFACE_HI | #1f1f25 | Rows, buttons, controller-test chips |
TEXT | #f0f0f3 | Text |
DIM | #9b9ba4 | Secondary text, readable on black |
ACCENT | #ff5fa8 by default | Focus, selection, lit chips. One value from the setting, not a second palette |
RED | #ff4b2b | Errors. Orange-red, moved away from pink so “selected” and “problem” never look alike |
AMBER | #ffb547 | Warnings: performance issues, applet mode, unsaved |
GREEN | #52d48a | Success |
Only the accent changes with the setting. Background, cards, text and the status colours stay the same, so the separation between focus and errors holds for every accent. A custom hue within 25° of the error red shows a warning on the Layout page.
Accent presets
| Name | Value | Name | Value |
|---|---|---|---|
| Pink (default) | #ff5fa8 | Teal | #2dd4bf |
| Blue | #25d0f2 | Lime | #a3e635 |
| Violet | #a78bfa | Sky | #60a5fa |
| Indigo | #818cf8 | White | #e5e7eb |
Type
Token (ui_style.c) | Size |
|---|---|
f_s | 18 px |
f_m | 22 px |
f_l | 28 px |
f_xl | 36 px |
f_hero | 48 px, the Cinematic layout’s title |
f_icon, f_icon_big | The console’s button icons; 26 px in hints (see Button glyphs) |
- The text font is the console’s shared font “Standard”, read at run time from the
plservice through tiny_ttf. The.nrocarries no font file. It covers Latin and Japanese. - The console’s font reports a line box too tight for its own glyphs, so
fit_lines()measures real glyphs (Á, g, j, 夏) and sets each size’s line box from them, with some air. Running text gets 8 px between lines. - Montserrat 14 is LVGL’s default font and the fallback for its arrow symbols.
Shape
| Element | Radius |
|---|---|
| Covers | 20 px, baked into the thumbnail as transparency |
| Cards | 14 px |
| Rows | 10 px |
| Buttons | 12 px |
| Tags and chips | Full pill (LV_RADIUS_CIRCLE) |
Cover corners are transparent pixels in the decoded thumbnail (ARGB), so a focused cover’s outline stays whole and the Cinematic art shows around them. Baked in black, they hid the middle of the outline’s arcs on the first hardware run.
Layout
| Constant | Value |
|---|---|
| Screen | 1280 × 720 |
MARGIN | 48 px |
HEADER_H | 76 px |
FOOTER_H | 64 px |
COVER_W × height | 220 × 330 (2:3) |
Motion
All light, and only when something changes:
| Effect | Duration |
|---|---|
| Focus outline grows in | 120 ms |
| Fade between screens | 150 ms |
| Menu, notice and status line fade | 120 ms |
| Scroll to the focused item | animated |
| Focused cover scale | Row 12 %, Grid and Cinematic 4 % (st_grow_row, st_grow) |
A frame where nothing happened draws nothing. A test (tests/ui/mockups.c) fails if a settled screen keeps redrawing.