Muscle Monster Workout Planner

Colors

• #000000Background Black · screen background
• #FFCC00Primary Yellow · continue button fill · highlighted date text · progress bar
• #FFFFFFText White · primary headings · body text · button text
• #FF5722Graph Orange · graph line · data points

Type

• headerSF Pro Display · 36px · bold · #FFFFFF
• buttonSF Pro Text · 20px · bold · #000000

Elements

• Continue Button · button

  Bottom of screen, centered horizontally, fixed width and height with large corner radius. · Solid yellow fill, dark text, no shadow or border.

• Progress Bar · progress indicator

  Upper section below brand header, horizontal bar with nodes. · Yellow line with circular nodes and checkmarks.

Layout

Vertical stack layout with top brand header, progress indicator, prediction text, weight loss curve graph, motivational message, and bottom call-to-action button.

Notes

Dark mode interface with high contrast yellow and white elements.