top of page

STYLE GUI

COMPLETE STYLE GUIDE

Colours

Rectangle 43-1.png

HEX: 6993FF

Rectangle 44.png

HEX: FF84A9

Rectangle 45.png

HEX: FF9A98

Rectangle 46.png

HEX: F3C764

Rectangle 43-2.png
Rectangle 43-3.png
Rectangle 43.png

HEX: 222846

HEX: BABFD4

HEX: FFFFFF

Fonts

Family table.png
Font_image.jpg

Icons

Icons.jpg

UI elements

Buttons

Registration

Full length CTA.jpg
Small CTA.jpg
slider bar.jpg
Full length CTA white background.jpg
Small CTA white background.jpg
Text input.jpg
Progress bar with steps.jpg

Progress

Workout

Progress.jpg
Daily.jpg
Rating.jpg
Graph.jpg
Calendar.jpg
Class.jpg
Exercises.jpg
Cards.jpg
50 reps in 15min.jpg
Goal progress bar.jpg

Grid and layout

Mobile grid

  • Number of columns

     

  • Width

     

  • Offset


     

  • Margin

Tablet grid

  • Number of columns

     

  • Width

     

  • Offset


     

  • Margin

74 pt

grid.jpg

14 pt

4

18 pt

Desktop grid

4

180 pt

36 pt

14 pt

  • Number of columns

     

  • Width

     

  • Offset


     

  • Margin

4

234 pt

229 pt

14 pt

Imagery

Approved images.jpg

With neutral background and colour palette to ensure the user focus stays on the image content.


The models should be smiling, enjoying their workout, display some energy and effort but not struggle.


Posing should be natural and realistic.
Group images should showcase a few models and not be too crowded

Image used on Fitto should be:

inappropriate.jpg

  • With very dark background and too moody

  • Showcasing people in unrealistic poses

  • Unrealistic bodies that user can’t relay to.

  • Showcasing anger or struggle

  • Model shouldn’t be posing

Image used on Fitto shouldn't be:

bottom of page