mobile➞Colour Palette

Colour Palette

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

Text Colours

Below are the colours used on the text inside the app including headings, paragraphs, blockquotes, form inputs and placeholder text.

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 PlaceholderColour. Secondary colour is also used for smaller "meta" text such as descriptions under actions..

Social Statistic Colour is used primarily for in social sections to show the numbers of comments and likes, as well as on timestamps for comments and list items. SubtleText is used to show job roles of the commenters in the social area.

  • PrimaryBody

    #181E26

  • SecondaryBody

    #637289

  • Placeholder

    #9CA9BC

  • Link

    #738bb2

  • Error

    #DF0604

Background and Dividers

Thrive's list pages will have a grey background (BackgroundGrey) to help the white list items stand out. Media blocks will employ DarkBackground to differentiate this section and users will see blocks coloured with ImageBackground colour if images have not yet loaded in.

Dividers are used in some pages such as forms and contact widgets. Dividers that stretch the full width of the screen use the colour PrimaryDivider, while SubtleDivider is used on form fields and to separate lists of users such as in the People Directory.

  • BackgroundGrey

    #F6F6F6

  • DarkBackground

    #2C313A

  • ImageBackground

    #C9C9C9

  • PrimaryDivider

    #C9C9C9

  • SubtleDivider

    #E0E0E0

Social Area

At the bottom of a Modular Page users can leave comments and like the content. This social area uses a light grey background (SocialBackgroundColour) to differentiate it from the main page content.

  • SocialBackground

    #FAF8F9

  • SocialCommentDivider

    #E5E6EA

  • LikeIconColour

    #D22B36

  • CommentIconColour

    #738BB2

Other

Unread notifications use a different background colour to differentiate them from notifications already seen by the user (NotificationUnreadColour)

Tray bars use the app's branding colour on the text and icon to highlight the active area, while if inactive the icons and text are light grey.

  • NotificationRead

    #FFFFFF

  • NotificationUnread

    #F1F7FF

  • TrayBarInactive

    #D22B36