Fitness Design

Concept

This is a 'light design' that follows the '' Material Design' guidelines, and provides templates and layouts useful to create fitness applications.

This design supports Dark Mode.

Default configuration

This design uses by default the following configuration:

  • Color palette: Blue; Light style with dark mode enabled.
  • Home: User fitness summary with tabs and no application bar; Onboarding is enabled.
  • Menu: Slide menu will not be added.
  • Security: Login with background image: Register with logo.
  • Fields design: Labels position is 'Top'; Data sections in elevated cards; Edit fields with an outline.

Samples

A mobile "Register Activity" form displays a running-person icon, an activity type dropdown set to Running, Date and time selectors, a Name text field, and Hours, Minutes, and Distance numeric fields, with a checkmark save icon in the top-right app bar.

A mobile fitness app home screen shows a circular progress ring around a profile photo with "21/30 fitness points", stats for Steps (1562), Calories (1718), and km (0.36), a "Last week activity" bar chart for Tue-Mon, and a Weight line chart ending near 60.  A mobile "Fitness" screen shows a circular progress ring around a profile photo with "21/30 fitness points", Steps (1562), Calories (1718), and km (0) stats, a "Last week activity" bar chart, and a bottom tab bar with Home, Diary, and Profile icons, Home selected.

A mobile login screen over a photo of joggers on a bridge shows User field "John freeman", a masked Password field with a visibility toggle, a blue LOGIN button, and a "No account yet? Create one" link below.