WidgetCraftGet the appBlue · Home screen setup
Blue home screen setup
Blue widgets feel calm and clear. This recipe pairs a pale sky background with navy text and a mid-blue accent; flip the colors for a deep navy version. This setup uses three widgets, one wallpaper and one palette so the whole screen reads as a single design.
The three blue widgets
- Blue clock widget (4 × 2): shows the time in large numerals with the day and date beneath.
- Blue step counter widget (4 × 2): shows today's steps against your goal.
- Blue calendar widget (4 × 2): shows today's date beside your next event.
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 #E3F0FF, corner radius 22
- Layout: split: the time on the left at size 64, a thin divider at x 236, and the weekday and date stacked in a column on the right
- Text or Date: weekday, built-in Sans, size 12, color #6C87A8
- Numbers: Keep numbers navy and semi-bold.
Free to build. Full recipe and steps.
Step counter widget settings
A step widget shows one number and how close it is to a goal. A ring on one side and the count on the other reads well at a glance.
- Canvas: 360 × 180, background #E3F0FF, corner radius 22
- Ring: diameter 104, stroke 12, progress #2F7BE6, range 0 to your goal
- Text: percentage inside the ring, size 20, color #0F2A4A
- Bars and rings: Use azure bars on a powder-blue track.
Styling is free; the live data needs Pro. Full recipe and steps.
Calendar widget settings
A calendar widget answers two questions: what day is it, and what is next. The date sits in a bold block on the left and the next event takes the right side.
- Canvas: 360 × 180, background #E3F0FF, corner radius 22
- Shape: date block 104 × 124, radius 20, fill #2F7BE6
- Date: weekday (size 13) and day number (size 58) centered on the block, color #FFFFFF
- Numbers: Keep numbers navy and semi-bold.
Styling is free; the live data needs Pro. Full recipe and steps.
How to set up a blue 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 step counter and calendar 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.
Blue wallpaper ideas
Sky, sea or a pale blue gradient.
Blue icons and dock
Blue or white glyph icons.
Blue home screen colors
- Sky
#E3F0FFBackground - Powder blue
#C5DEFASurface and tracks - Navy
#0F2A4AText - Slate blue
#6C87A8Labels - Azure
#2F7BE6Accent
Fonts for a blue home screen
Use built-in Sans at weight 600. Corner radius is 22 on every widget so the shapes match.
Do and avoid
- Stay within one hue from pale to navy.
- Use the brightest blue only for progress.
- Do not add warm accents unless you want strong contrast.
- Do not use mid-blue text on a mid-blue background.