BetterMe Well-Being Coach

Colors

• #0a0703Background Black · background
• #1a1512Card Dark · card background
• #e8dfd3Card Selected · selected card background
• #ffffffText White · titles · body text
• #1a1512Text Dark · selected card text

Type

• TitleSF Pro Display · 30px · bold · #ffffff
• SubtitleSF Pro Text · 17px · regular · #b3b3b3
• Card LabelSF Pro Text · 18px · semibold · #ffffff

Elements

• Option Card 1 (A few sizes smaller) · selectable card

  Top left grid position, contains an upper photo and lower text with an unselected radio circle. · Dark background fill with rounded corners.

• Option Card 2 (Athletic) · selectable card

  Top right grid position, selected state with checkmark. · Light beige fill with dark text and a filled checkmark circle.

• Option Card 3 (Shredded) · selectable card

  Bottom left grid position. · Dark background fill with rounded corners.

• Option Card 4 (Swole) · selectable card

  Bottom right grid position. · Dark background fill with rounded corners.

Layout

Top navigation bar, header text block with title and subtitle centered, followed by a 2x2 grid of selectable body goal image cards.

Notes

Grid items scale evenly across the lower section of the screen.