WidgetCraftGet the appPixel art · Home screen setup
Pixel art home screen setup
Pixel art widgets look like a handheld game console from the late 1980s. Text uses a pixel font, progress is shown as blocks or hearts, and the palette is a few flat greens or bright arcade colors. This setup uses three widgets, one wallpaper and one palette so the whole screen reads as a single design.
The three pixel art widgets
- Pixel art battery widget (2 × 2): shows your charge level as a ring with the percentage in the middle.
- Pixel art year progress widget (4 × 2): shows how much of the year has passed as a percentage and a bar.
- Pixel art to-do list widget (4 × 2): keeps today's tasks on your home screen with boxes you can tick.
Place them top to bottom in that order and leave the row above the dock empty so the wallpaper has room.
Battery widget settings
A battery widget turns one number into a shape you can read without thinking. A ring that fills clockwise is the clearest form, with the percentage inside it.
- Canvas: 200 × 200, background #D8E8C0, corner radius 0, outline 4 pt #22331F, shadow #22331F offset 6/6 with radius 0
- Ring: diameter 120, stroke 9, track #55704A at 28% opacity, progress #D64545, square ends, start at top
- Battery: level as a number, Press Start 2P, size 44, color #22331F, centered in the ring
- Bars and rings: Draw meters as ten square blocks and fill them one by one.
Free to build. Full recipe and steps.
Year progress widget settings
A year-progress widget is a gentle nudge: one bar that fills from 1 January to 31 December. The same layout works for the day, the week or a personal goal.
- Canvas: 360 × 180, background #D8E8C0, corner radius 0, outline 4 pt #22331F, shadow #22331F offset 6/6 with radius 0
- Text: year label, size 12, color #55704A
- Text (formula): percentage of the year, Press Start 2P, size 54, color #22331F
- Bars and rings: Draw meters as ten square blocks and fill them one by one.
Free to build. Full recipe and steps.
To-do list widget settings
A to-do widget works when it is short. Three tasks, a clear title and a box to tap are enough; a long list belongs in an app.
- Canvas: 360 × 200, background #D8E8C0, corner radius 0, outline 4 pt #22331F, shadow #22331F offset 6/6 with radius 0
- Text: title "Today", Press Start 2P, size 22, color #22331F
- Text: count such as "1 of 3", size 12, color #55704A, right aligned
- Lists: Treat rows as a quest log with a square marker and a short capitalised title.
Free to build. Full recipe and steps.
How to set up a pixel art home screen
- Set the wallpaper first, so you can judge every color against it.
- Build the battery widget and add it to the home screen at 2 × 2.
- Duplicate its canvas settings for the year progress and to-do list widgets so the background, radius and outline match exactly.
- Place all three, then adjust margins until the left edges line up.
- Change the icons last, and remove any app you do not use daily from the page.
Pixel art wallpaper ideas
A dark green, black or pixel-landscape wallpaper lets the bright screen color stand out.
Pixel art icons and dock
Pixel icon packs fit best; otherwise use plain square glyphs.
Pixel art home screen colors
- Screen green
#D8E8C0Background - Mid green
#B8CFA0Surface and tracks - Dark pixel
#22331FText - Moss
#55704ALabels - Heart red
#D64545Accent
Fonts for a pixel art home screen
Use Press Start 2P (import the font file), or the built-in Mono at weight 700, with labels in capitals. Corner radius is 0 on every widget so the shapes match.
Do and avoid
- Import Press Start 2P or Silkscreen for authentic pixel type.
- Keep every edge square and every color flat.
- Do not use smooth gradients or rounded corners.
- Do not use more than four colors in one widget.