Typography
To ensure simplicity and consistency throughout the app, typography is limited to specific sizes and weights. Only the Lato typeface is used to ensure legibility at small sizes.
Display Text
Name | Size | Weight | Color |
NavigationBarTitle | 20 | Regular | #primary2 |
TabBarItemTitle | 10 | Regular | #gray2/#primary1 |
SectionTitle | 12 | Regular/UpperCase | #gray2 |
Button Text
Name | Size | Weight | Color |
ButtonTitle1 | 15 | Semi-Bold | #primary2 |
ButtonTitle2 | 15 | Semi-Bold | #white/#primary1 |
ButtonTitle3 | 18 | Semi-Bold | #white/#primary1 |
Text
Name | Size | Weight | Color |
Caption1 | 12 | Regular | #gray2 |
Caption2 | 14 | Regular | #gray1 |
Body1 | 14 | Regular | #gray1 |
Body2 | 15 | Regular | #gray1 |
Body3 | 16 | Regular | #gray1 |
Body4 | 18 | Regular | #gray1 |
Body5 | 20 | Regular | #gray1 |
HeadLine1 | 18 | Regular | #gray1 |
HeadLine2 | 19 | Regular | #gray1 |
HeadLine3 | 20 | Regular | #gray1 |
HeadLine4 | 22 | Regular | #gray1 |
XLarge1 | 25 | Regular | #gray1 |
XLarge2 | 35 | Regular | #gray1 |
XLarge3 | 65 | Regular | #gray1 |
XLarge4 | 90 | Regular | #gray1 |
XLarge5 | 55 | Regular | #gray1 |