WidgetCraftGet the appFlat · Home screen setup
Flat home screen setup
Flat widgets use blocks of solid color with white text and simple shapes. There is no depth at all, which keeps them crisp at any size and quick to build. This setup uses three widgets, one wallpaper and one palette so the whole screen reads as a single design.
The three flat widgets
- Flat clock widget (4 × 2): shows the time in large numerals with the day and date beneath.
- Flat year progress widget (4 × 2): shows how much of the year has passed as a percentage and a bar.
- Flat battery widget (2 × 2): shows your charge level as a ring with the percentage in the middle.
Place them top to bottom in that order and leave the row above the dock empty so the wallpaper has room.
Clock widget settings
A digital clock is the widget most people place first. It needs to be readable from arm's length, so the time takes most of the space and the date sits quietly below it.
- Canvas: 360 × 180, background #2D6CDF, corner radius 16
- Layout: stacked: weekday, time, then date, all left aligned
- Text or Date: weekday, built-in Sans, size 12, color #CFE0FF
- Numbers: Keep numbers white and semi-bold.
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 #2D6CDF, corner radius 16
- Text: year label, size 12, color #CFE0FF
- Text (formula): percentage of the year, built-in Sans, size 68, color #FFFFFF
- Bars and rings: Use solid bars in the yellow accent on a darker shade of the background.
Free to build. Full recipe and steps.
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 #2D6CDF, corner radius 16
- Ring: diameter 120, stroke 12, track #CFE0FF at 28% opacity, progress #FFC83D, round ends, start at top
- Battery: level as a number, built-in Sans, size 44, color #FFFFFF, centered in the ring
- Bars and rings: Use solid bars in the yellow accent on a darker shade of the background.
Free to build. Full recipe and steps.
How to set up a flat home screen
- Set the wallpaper first, so you can judge every color against it.
- Build the clock widget and add it to the home screen at 4 × 2.
- Duplicate its canvas settings for the year progress and battery 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.
Flat wallpaper ideas
A light neutral wallpaper lets the color blocks lead.
Flat icons and dock
Flat colored icon packs.
Flat home screen colors
- Cobalt
#2D6CDFBackground - Deep cobalt
#2459B8Surface and tracks - White
#FFFFFFText - Pale blue
#CFE0FFLabels - Sun yellow
#FFC83DAccent
Fonts for a flat home screen
Use built-in Sans at weight 600. Corner radius is 16 on every widget so the shapes match.
Do and avoid
- Pick one strong background color per widget.
- Use a darker shade of the same color for tracks.
- Do not add shadows or gradients.
- Do not use more than one accent.