WidgetCraftGet the appCyberpunk · Home screen setup
Cyberpunk home screen setup
Cyberpunk widgets look like a readout from a science-fiction interface: acid yellow on black, cyan data lines, capital labels with codes and numbers, and sharp angled panels. This setup uses three widgets, one wallpaper and one palette so the whole screen reads as a single design.
The three cyberpunk widgets
- Cyberpunk battery widget (2 × 2): shows your charge level as a ring with the percentage in the middle.
- Cyberpunk clock widget (4 × 2): shows the time in large numerals with the day and date beneath.
- Cyberpunk step counter widget (4 × 2): shows today's steps against your goal.
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 #0A0A0C, corner radius 2, outline 2 pt #FCEE0A
- Ring: diameter 120, stroke 9, track #7C7C86 at 28% opacity, progress #00F0FF, round ends, start at top
- Battery: level as a number, Orbitron, size 44, color #FCEE0A, centered in the ring
- Bars and rings: Use segmented bars and thin cyan lines as if they were data readouts.
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 #0A0A0C, corner radius 2, outline 2 pt #FCEE0A
- Layout: split: the time on the left at size 51, a thin divider at x 236, and the weekday and date stacked in a column on the right
- Text or Date: weekday, Orbitron, size 12, color #7C7C86, capitals, letter spacing 0.1
- Numbers: Show numbers in yellow with a small cyan unit label beside them.
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 #0A0A0C, corner radius 2, outline 2 pt #FCEE0A
- Ring: diameter 104, stroke 9, progress #00F0FF, range 0 to your goal
- Text: percentage inside the ring, size 20, color #FCEE0A
- Bars and rings: Use segmented bars and thin cyan lines as if they were data readouts.
Styling is free; the live data needs Pro. Full recipe and steps.
How to set up a cyberpunk 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 step counter 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.
Cyberpunk wallpaper ideas
A dark city-at-night photo or plain black.
Cyberpunk icons and dock
Angular line icons in yellow or cyan.
Cyberpunk home screen colors
- Void
#0A0A0CBackground - Carbon
#16161ASurface and tracks - Acid yellow
#FCEE0AText - Steel
#7C7C86Labels - Cyan
#00F0FFAccent
Fonts for a cyberpunk home screen
Use Orbitron (import the font file), or the built-in Mono at weight 700, with labels in capitals. Corner radius is 2 on every widget so the shapes match.
Do and avoid
- Keep corners sharp and add one thin accent line.
- Use yellow for values and cyan for structure.
- Do not use soft rounded fonts.
- Do not use more than three colors.