WidgetCraftGet the appNeumorphic · Home screen setup
Neumorphic home screen setup
Neumorphic widgets appear moulded from the same material as the background. Shapes are the same color as the surface and are defined only by a soft light edge and a soft shadow. This setup uses three widgets, one wallpaper and one palette so the whole screen reads as a single design.
The three neumorphic widgets
- Neumorphic battery widget (2 × 2): shows your charge level as a ring with the percentage in the middle.
- Neumorphic clock widget (4 × 2): shows the time in large numerals with the day and date beneath.
- Neumorphic music widget (4 × 2): shows the song that is playing with play, pause and skip controls.
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 #E6EAF0, corner radius 28, soft shadow radius 12 at low opacity
- Ring: diameter 120, stroke 12, track #8B93A5 at 28% opacity, progress #5B7CFA, round ends, start at top
- Battery: level as a number, built-in Sans, size 44, color #3B4252, centered in the ring
- Bars and rings: Draw rings and bars as the same grey with a soft shadow, with a small blue fill.
Free to build. Full recipe and steps.
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 #E6EAF0, corner radius 28, soft shadow radius 12 at low opacity
- Layout: stacked: weekday, time, then date, all center aligned
- Text or Date: weekday, built-in Sans, size 12, color #8B93A5
- Numbers: Center the number in slate and keep it semi-bold.
Free to build. Full recipe and steps.
Music player widget settings
A now-playing widget shows cover art, the track and artist, a progress line and three controls. It works with whichever app is playing, not one particular service.
- Canvas: 360 × 180, background #E6EAF0, corner radius 28, soft shadow radius 12 at low opacity
- Image: cover art 140 × 140, radius 18, connected to media artwork
- Text: track title, built-in Sans, size 20, color #3B4252, one line
- Photos: Avoid photos or use a small round one inset like a button.
Styling is free; the live data needs Pro. Full recipe and steps.
How to set up a neumorphic 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 clock and music 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.
Neumorphic wallpaper ideas
A flat wallpaper in exactly the same grey as the widget.
Neumorphic icons and dock
Soft grey rounded icons or a neumorphic pack.
Neumorphic home screen colors
- Clay grey
#E6EAF0Background - Shade
#DCE1EASurface and tracks - Slate ink
#3B4252Text - Fog
#8B93A5Labels - Soft blue
#5B7CFAAccent
Fonts for a neumorphic home screen
Use built-in Sans at weight 600. Corner radius is 28 on every widget so the shapes match.
Do and avoid
- Make the widget background match the wallpaper color exactly.
- Use shadow radius 10 to 14 with low opacity.
- Do not use hard outlines.
- Do not use it over a photo wallpaper; the illusion needs a flat color.