LazyFit: Workout For Beginners

Colors

• #FFFFFFBackground · screen background
• #000000Text Primary · heading · subheading text
• #7A7A7AText Secondary · user count text · body description
• #FF5C8AAccent Pink · highlighted percentage text

Type

• headingSF Pro Display · 28px · bold · #000000
• highlightSF Pro Display · 28px · bold · #FF5C8A
• bodySF Pro Text · 16px · regular · #7A7A7A

Elements

• Back Button · icon button

  Top left · Black chevron

• Progress Bar · progress indicator

  Top center · Linear progress bar

• User Avatars Cluster · image group

  Upper middle of screen, clustered in a circular arrangement · Multiple circular profile photos overlapping

• Statistic Block · text block

  Lower middle of screen · Highlighted pink percentage with black text and explanatory body text

• Next Button · button

  Bottom center · Solid black pill shape with white text

Layout

Top navigation, headline text, cluster of user profile avatars with user count label, statistical text callout with descriptive body copy, and a solid black action button at the bottom.

Notes

Social proof screen emphasizing community size and success rate.