Colour Palette

The colours below are used throughout the mobile apps and each specifies the hexcode and the suggested name for each.

Reusable Colours

Below are the common greys used throughout many different areas in the app. We recently revised the greys we use throughout. When in doubt, SoftGreyBlue.

  • SoftGreyBlue

    #9CA9BC

  • SoftGrey

    #E2E2E2

  • DarkGrey

    #48484A

Text Colours

The colour PrimaryBodyColour is used for main body text used in the app including headings, paragraphs and form input text. Additionally forms will use SecondaryBodyColour for labels and placeholder text in the input field should be SoftGreyBlue.

MetaTextColour is used in many instances in the app. For example, it is used for captions underneath images or video, social statistics, timestamps and helper text displayed under form fields.

  • PrimaryBodyLight

    #343D4C

  • SecondaryBody

    #6D7C99

  • SoftGreyBlue

    #9CA9BC

  • SoftGreyLight

    #E2E2E2

  • MetaText

    #6D7C99

  • Error

    #DF0604

Border and Background Colours

The colours below represent those used for borders in the app. DividerColor is used commonly in form inputs, form dividers and secondary button border. CommentDividerColor is used for the comments and social UI.

  • SoftBackground

    #F6F6F6

  • CommentDivider

    #D9D9D9

  • DividerColor

    #E0E0E0

  • DarkBackground

    #484647

Links and Interactions

While the colour of many of the buttons inside the native apps are determined by the app branding (set by the App Editor), other links and the social buttons use the colour palette below. Secondary links usually found underneath Primary Buttons are blue, shown below as LinkColour.

A user can tap on the red heart to "like" content within the app, and tap the comment icon to post a comment. The colours used for these social icons are shown below.

  • LikeIcon

    #D22B36

  • ReplyingToButton

    #C9CEDA

  • LinkBlue

    #106DE0

  • NotificationUnread

    #F1F7FF

Dark Mode Variants

What do you call a Sith Lord with joint pain? Darthritis

The colours documented below are the ones changed to accomodate darkmode. Any that aren't listed with the 'Dark' a the end are the same in both light and dark modes.

  • PrimaryBodyDark

    #FFFFFF

  • SoftGreyDark

    #2E2E2C

  • MetaTextDark

    #999AB8

  • SoftBackgroundDark

    #48484A (DarkGrey)

  • CommentDividerDark

    #2E2E2C

  • DividerColorDark

    #2E2E2C

  • LinkBlueDark

    #0984FF

  • NotificationUnreadDark

    #161B25