Cyberpunk step counter widget

What a cyberpunk step counter widget shows

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.

Steps come from Health Connect, which needs a compatible phone, your permission and a fitness connection (a Pro feature in WidgetCraft). The numbers are whatever your phone or watch has recorded; the widget does not count steps itself.

How the cyberpunk style shapes it

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.

• Bars and rings: Use segmented bars and thin cyan lines as if they were data readouts.
• Numbers: Show numbers in yellow with a small cyan unit label beside them.

Cyberpunk step counter widget recipe

Cyberpunk color palette

• Void #0A0A0CBackground
• Carbon #16161ASurface and tracks
• Acid yellow #FCEE0AText
• Steel #7C7C86Labels
• Cyan #00F0FFAccent

How to make a cyberpunk step counter widget in WidgetCraft

1. Create a widget and open Canvas. Set the size to 360 × 180, the background to #0A0A0C and the corner radius to 2. Add a 2-point outline.
2. Open Data and connect Health Connect, allowing access to steps.
3. Tap Add and choose Ring. Set the diameter to 104 and the stroke to 9, and connect it to steps with a range from 0 to your goal.
4. Color the progress #00F0FF.
5. Add a Text layer connected to the step count at size 38 in #FCEE0A, plus a label and your goal in #7C7C86.
6. Add the cyberpunk ornament with Shape layers and move them below the other layers in Layers: a yellow triangle cutting the top right corner, and a cyan data line with a short magenta dash along the bottom edge.
7. Tap Save, then Add to home screen and resize the widget on your launcher if needed.

The layout and styling are free. The live data connection for this widget needs WidgetCraft Pro, a one-time purchase.

Tips for cyberpunk step counter widgets

• Keep corners sharp and add one thin accent line.
• Use yellow for values and cyan for structure.
• Show the goal next to the count so the ring has meaning.
• Step data can lag by a few minutes depending on the app that records it.
• This is an activity display, not medical advice.
• Do not use soft rounded fonts.
• Do not use more than three colors.

Questions about the cyberpunk step counter widget

What size is a cyberpunk step counter widget?

It is designed for 4 × 2 home screen cells on a 360 × 180 canvas. You can resize it on the launcher and the design scales in proportion.

Which colors does it use?

Void (#0A0A0C) for the background, Acid yellow (#FCEE0A) for the main text, Steel (#7C7C86) for labels and Cyan (#00F0FF) as the accent.

Is it free to make?

The cyberpunk design is free to build. Showing live step data needs the one-time Pro upgrade.

What else is this style called?

People also search for futuristic step counter widget, sci-fi step counter widget, hud step counter widget, tech step counter widget. They describe the same look as this cyberpunk step counter widget.

More cyberpunk widgets

• Cyberpunk clock widget
• Cyberpunk analog clock widget
• Cyberpunk calendar widget
• Cyberpunk battery widget
• Cyberpunk countdown widget
• Cyberpunk to-do list widget
• Cyberpunk photo widget
• Cyberpunk quote widget
• Cyberpunk music widget
• Cyberpunk year progress widget
• Cyberpunk habit tracker widget
• Cyberpunk sticky note widget
• Cyberpunk world clock widget
• Cyberpunk date widget
• Cyberpunk home screen setup
• All cyberpunk widgets

Step counter widgets in other styles

• Neon step counter widget
• Gaming HUD step counter widget
• Terminal step counter widget
• All step counter widgets