Repository navigation
Design Guidelines
Barry Launcher apps share one small screen under a thumb, below a game. These guidelines keep them comfortable to use and make them feel like part of Barry Launcher. They're advice, not rules.
- 1240 × 1080 pixels on the Thor, about 3.9 inches across: roughly 420 pixels per inch, so text that looks big on a monitor is small here.
- Landscape, held in both hands below the top screen. Thumbs reach the sides and the bottom most easily; the top centre is the stretch.
- AMOLED: black pixels are off. A black background saves battery and looks like part of the device.
All at barry.scale = 1:
| Smallest button | 90 × 90 (a fingertip). Give buttons people press a lot 120+. |
| Space between buttons | 14–20 |
| Margins at the screen's edges | 40 |
| Body text | 28–34 |
| Labels on buttons | 32–40, demibold |
| Titles | 56–72, bold |
| Corner radius | 24 for buttons, 36–40 for big panels |
Barry Launcher's own palette:
| Background | black |
 |
| Panels, buttons | #1b1d24 |
 |
| Borders | #3a3e4d |
 |
| Pressed | #4a4f60 |
 |
| Accent (selected, main action) | #6b2fb3 |
 |
| Accent, light (outlines, highlights) | #8a5cf0 |
 |
| Text | #eef0f4 |
 |
| Icons, figures | #cfe0ff |
 |
Secondary text is the text colour at 50–75 % opacity.
Noto Sans is on every PB-OS device; use font.family: "Noto Sans".
For another font, put the file in your app and load it:
FontLoader { id: display; source: "fonts/MyDisplayFont.ttf" }
Text { font.family: display.name }-
Show the press: change a button's colour while
pressed. A tap with no feedback feels missed. -
Tap on release, and only inside the button
(
gesturePolicy: TapHandler.ReleaseWithinBounds), so a finger that slides away cancels. - No hover: a finger has no hover. Nothing should depend on it.
- Keep away from the bottom edge for swipes: a swipe up from the bottom 45 pixels goes home.
- Long-press and drag are fine; explain them on screen the first time.
- Short and purposeful: 150–450 ms. Ease out (
Easing.OutCubic) for things arriving;Easing.OutBackgives a small, friendly overshoot. - Never animate forever when nothing is happening: a game runs on the same GPU.
- Square, SVG (best) or PNG (256 × 256 or bigger).
- Barry Launcher's icons are line art: light lines (
#cfe0ff) about 1.4 units wide on a 24-unit grid, round caps, no background (the tile draws it). Tabler Icons (MIT) are in that style and make good starting points; Barry's own Firefox, Discord and Signal outlines come from it. - A full-colour icon is fine too: keep its own background inside the shape, since the tile is dark grey.
- Short labels, verbs on buttons ("Roll", "Save", "Add note").
- Say what happened ("Saved.") and, for errors, what to do next.