Flat widgets for Android

Flat widget recipes

Each recipe has a preview, exact colors and layer-by-layer steps.

Flat clock widgetFree to buildFlat analog clock widgetFree to buildFlat calendar widgetData needs ProFlat battery widgetFree to buildFlat countdown widgetFree to buildFlat to-do list widgetFree to buildFlat photo widgetFree to buildFlat quote widgetFree to buildFlat music widgetData needs ProFlat year progress widgetFree to buildFlat step counter widgetData needs ProFlat habit tracker widgetFree to buildFlat sticky note widgetFree to buildFlat world clock widgetFree to buildFlat date widgetFree to build

The flat palette

• Cobalt #2D6CDFBackground
• Deep cobalt #2459B8Surface and tracks
• White #FFFFFFText
• Pale blue #CFE0FFLabels
• Sun yellow #FFC83DAccent

Design rules

• Text: Use white text on the color block with a paler tint for labels.
• Numbers: Keep numbers white and semi-bold.
• Bars and rings: Use solid bars in the yellow accent on a darker shade of the background.
• Photos: Use photos sparingly; a flat color illustration fits better.
• Lists: Mark rows with solid circles in the accent color.

Do

• Pick one strong background color per widget.
• Use a darker shade of the same color for tracks.

Avoid

• Do not add shadows or gradients.
• Do not use more than one accent.

Wallpaper and icons

A light neutral wallpaper lets the color blocks lead.

Flat colored icon packs.

See the full flat home screen setup.

Questions

What colors suit flat widgets?

Start with Cobalt (#2D6CDF) for the background, White (#FFFFFF) for text and Sun yellow (#FFC83D) as the accent.

Which font works for flat widgets?

Use built-in Sans, at weight 600.

Does WidgetCraft have flat widgets ready to use?

There is no ready-made flat pack at the moment. Each recipe on this page lists the exact settings to build one in a few minutes, and most use only free features.

Related styles

• Material You widgets
• Bauhaus widgets
• Neo-brutalist widgets
• All widget styles