WidgetCraftGet the appNeon · Home screen setup
Neon home screen setup
Neon widgets imitate glowing tube signs: bright pink, cyan or lime outlines on a very dark ground with a soft halo. They are striking at night and pair well with dark wallpapers. This setup uses three widgets, one wallpaper and one palette so the whole screen reads as a single design.
The three neon widgets
- Neon clock widget (4 × 2): shows the time in large numerals with the day and date beneath.
- Neon music widget (4 × 2): shows the song that is playing with play, pause and skip controls.
- Neon countdown widget (4 × 2): counts the days left until a date you choose.
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 #0B0714, corner radius 18, outline 2 pt #31E8FF, shadow #31E8FF radius 12 for glow
- Layout: stacked: weekday, time, then date, all center aligned
- Text or Date: weekday, Tilt Neon, size 12, color #8F7FB3, capitals, letter spacing 0.1
- Numbers: Make the number the brightest thing in the widget and add a shadow in the same color for glow.
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 #0B0714, corner radius 18, outline 2 pt #31E8FF, shadow #31E8FF radius 12 for glow
- Image: cover art 140 × 140, radius 8, connected to media artwork
- Text: track title, Tilt Neon, size 20, color #FF4FD8, one line
- Photos: Use night photos with city lights, and add a thin neon outline.
Styling is free; the live data needs Pro. Full recipe and steps.
Countdown widget settings
A countdown widget keeps one date in view: a trip, a birthday, an exam or a launch. The number of days is the hero, the event name gives it meaning and a bar shows how far along you are.
- Canvas: 360 × 180, background #0B0714, corner radius 18, outline 2 pt #31E8FF, shadow #31E8FF radius 12 for glow
- Layout: stacked: label, number and event name, center aligned
- Text: label "Days until", size 12, color #8F7FB3
- Numbers: Make the number the brightest thing in the widget and add a shadow in the same color for glow.
Free to build. Full recipe and steps.
How to set up a neon 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 music and countdown 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.
Neon wallpaper ideas
Black, deep purple or a night city photo.
Neon icons and dock
Neon outline icon packs, or white glyphs.
Neon home screen colors
- Night
#0B0714Background - Deep violet
#170D2BSurface and tracks - Hot pink
#FF4FD8Text - Dusk grey
#8F7FB3Labels - Cyan
#31E8FFAccent
Fonts for a neon home screen
Use Tilt Neon (import the font file), or the built-in Sans at weight 600, with labels in capitals. Corner radius is 18 on every widget so the shapes match.
Do and avoid
- Add a shadow in the same color as the text with radius 8 to 12 for glow.
- Use two neon colors at most.
- Do not put neon on light backgrounds.
- Do not fill large areas with neon color; outlines glow better.