Typography

The typeface used throughout the mobile apps (the rest of TheAppBuilder platform) is Lato. The styles below illustrate the styling that the mobile apps should follow.

Modular Page Styles

These styles are on modular pages within the mobile apps, including the various heading styles, the paragraph, links, blockquote styles etc. Note that these styles also apply to Recognition and UGC pages.

  • Modular Page Heading One
    The quick brown fox jumps over the lazy dog
    Size: 26px Weight: Light Letter-Spacing: 0px
  • Modular Page Heading Two
    The quick brown fox jumps over the lazy dog
    Size: 21px Weight: Light Letter-Spacing: 0
  • Modular Page Heading Three
    The quick brown fox jumps over the lazy dog
    Size: 18px Weight: Semibold Letter-Spacing: 0px
  • Heading Number Four
    The quick brown fox jumps over the lazy dog
    Size: 15px Weight: Bold Letter-Spacing: 1.5px
  • Modular Page Paragraph
    The quick brown fox jumps over the lazy dog
    Size: 17px Weight: Regular Letter-Spacing: 0px
  • Modular Page Blockquote
    The quick brown fox jumps over the lazy dog
    Size: 22px Weight: Light Letter-Spacing: 0
  • Modular Page Image Caption
    The quick brown fox jumps over the lazy dog
    Size: 14px Weight: Regular Letter-Spacing: 0
Modular Page styles Modular Page styles

Modular page type styles in Recognition posts

Modular Page Social Styles

The styles below apply to the social section in Modular pages that house comments from users.

  • Modular Page Social Statistics
    21 Likes 3 Comments
    Size: 14px Weight: Regular Letter-Spacing: 0
  • Modular Page Comment Body
    The quick brown fox jumps over the lazy dog
    Size: 14px Weight: Regular Letter-Spacing: 0px
  • Modular Page Commenter Name
    Riley Keough
    Size: 15px Weight: Bold Letter-Spacing: 0
  • Modular Page Comment Meta Text
    Job Role, 3 hours
    Size: 13px Weight: Regular Letter-Spacing: 0px
Comments on a modular page Comments on a modular page

Social styles seen in the comment section of modular pages

General Screen Styles

The following styles apply to many app screens including onboarding and settings screens.

Onboarding Onboarding

General screen styles seen in onboarding screens including heading 1, paragraph and meta text

Looking for list layout typography styles? Check out the List Layouts chapter.