Summer · Step counter · 4 × 2 widget
Summer step counter widget
A summer step counter widget shows today's steps against your goal. Sea blue, coral and sunshine yellow. This page gives the exact colors, type settings and layers, with a preview drawn from the same values.

What a summer 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 summer style shapes it
Summer widgets are bright and warm: turquoise sea, coral, sunshine yellow and white, with bold friendly type. Good for holiday countdowns and step goals.
- Bars and rings: Use coral bars and a yellow circle as the sun.
- Numbers: Keep numbers teal and bold with a coral label.
Summer step counter widget recipe
| Layer | Settings |
|---|---|
| Canvas | 360 × 180, background #E8FBFF, corner radius 26 |
| Ring | diameter 104, stroke 12, progress #FF6B5E, range 0 to your goal |
| Text | percentage inside the ring, size 20, color #0B3C49 |
| Text | label "Steps today", size 12, color #5E99A6 |
| Text (fitness) | step count, Quicksand, size 46, color #0B3C49 |
| Text | goal, size 14, color #5E99A6 |
| Ornament | a yellow sun (circle) in the top right and a wavy lagoon-blue band along the bottom |
| Font | Quicksand (import the font file), or the built-in Sans |
| Home screen size | 4 × 2 cells |
Summer color palette
- Sea foam
#E8FBFFBackground - Lagoon
#BDEFF7Surface and tracks - Deep teal
#0B3C49Text - Tide
#5E99A6Labels - Coral
#FF6B5EAccent
How to make a summer step counter widget in WidgetCraft
- Create a widget and open Canvas. Set the size to 360 × 180, the background to #E8FBFF and the corner radius to 26.
- Open Data and connect Health Connect, allowing access to steps.
- Tap Add and choose Ring. Set the diameter to 104 and the stroke to 12, and connect it to steps with a range from 0 to your goal.
- Color the progress #FF6B5E.
- Add a Text layer connected to the step count at size 46 in #0B3C49, plus a label and your goal in #5E99A6.
- Add the summer ornament with Shape layers and move them below the other layers in Layers: a yellow sun (circle) in the top right and a wavy lagoon-blue band along the bottom.
- 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 summer step counter widgets
- Use turquoise, coral and yellow together.
- Add a yellow circle as a sun.
- 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 dark backgrounds.
- Do not use thin type.
Questions about the summer step counter widget
What size is a summer 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?
Sea foam (#E8FBFF) for the background, Deep teal (#0B3C49) for the main text, Tide (#5E99A6) for labels and Coral (#FF6B5E) as the accent.
Is it free to make?
The summer 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 beach step counter widget, tropical step counter widget, vacation step counter widget, sunset step counter widget. They describe the same look as this summer step counter widget.
More summer widgets
- Summer clock widget
- Summer analog clock widget
- Summer calendar widget
- Summer battery widget
- Summer countdown widget
- Summer to-do list widget
- Summer photo widget
- Summer quote widget
- Summer music widget
- Summer year progress widget
- Summer habit tracker widget
- Summer sticky note widget
- Summer world clock widget
- Summer date widget
- Summer home screen setup
- All summer widgets