Improved iOS Sleep Schedule UI

Overview

The dial now displays sunrise/sunset information using a gradient, and I changed the alarm symbol to alarm.fill because it still doesn't match bed.double.fill in the official version (as of iOS 16 beta 1)

Technical details

Color (HSL)

Blue: 192 100 65

Yellow: 40 100 68

Dial

The dial is just longer lines rotated around the center by 15 degrees, with smaller lines rotated by 3.75. They have a conical gradient applied to it, using the same colors as the symbols, but with red in between (otherwise it would blend through green which makes no sense)

Shadows and effects

The only place where shadows are used is the handle, the drop shadow is configured with the multiply blend mode, radius of 15px (on a 2560x1600 300 DPI canvas) and opacity of 7%

Text

Because it's an iOS interface it uses the rounded system font, San Francisco. Secondary text is set to 50% opacity.

More by Team Puzel

View profile