By branding your platform with your organisation's logo, color scheme, and other visual elements, it becomes an extension of the organisation's overall brand identity. This creates a sense of consistency and familiarity for employees when they engage with the platform, which can lead to increased engagement and adoption.
Ultimately, the branding of the platform should match with the organisation's own branding to reinforce the your mission and values and to promote a sense of unity and belonging among employees.
To adjust the layout of your platform go to the 'Layout' tab under 'Settings' in Control.
Platform colours
The primary colour
The primary colour is used most commonly in your platform. In some places it is also used as a background colour. Therefore please pick a colour that contrasts with white text.
Examples of places your primary colour will show:
The active items in your navigation bar and profile:
Labels, icons and buttons on your activities:
The top banner of your journeys:
Highlighted items in your activities (e.g. background feedback, hotspot, progress bar):
Background and buttons in your social timeline:
The secondary colour:
The secondary colour is used as an accent colour. Please pick a colour that contrasts nicely with white text.
Examples of places your secondary colour will show:
Supertitles in spotlighted widgets:
Highlighted icon in your to do list:
The base colours:
The base colours are used throughout the platform. These usually don't require to be changed but if your platform should use different shades of the colours below, you can edit them here.
Examples of places your base colours will show:
Budget and accreditation labels on your activities:
Notification dot in your navigation bar items (e.g. To do & Notifications):
Wrong/correct answers on questions:
Tags on your activities (E.g. 'New'):
💡Tip: if your primary colour is a shade of red or green please indicate so under 'Growing interaction'. Then the platform will use different colours than red and green to indicate wrong/correct answers
Rounded corners
Here you can customise the appearance of the corners on tiles and buttons.The platform uses rounded corners by default on both tiles and buttons.
Rounded corners:
Squared corners:
Fonts
You can adjust the heading font and the body font used on your platform. Learn how to implement those here or use the tours provided in control:
Font colours
Highlighted
The highlighted font colour is used for highlighted titles and texts. Please use a colour that is readable on top of a white background.
Examples of places the highlighted font colour will show:
Headings in certain question types:
Supertitles in activities:
Dark
The dark font colour is the most commonly used font colour. Used for body texts and titles on light backgrounds.
Examples of places the dark font colour will show:
Headings on your discovery stream:
Activity titles and programme descriptions:
Header and posts on your timeline:
Body text in your Upskill badge titles and category descriptions:
Body text in your activities:
Body texts in your notifications:
Light
The light font colour is used on top of images, dark backgrounds, and when dark theme is enabled.
Examples of places the light font colour will show:
Text on your magic wall:
Text in your activity labels:
Text in your supertitles and buttons on your widgets:
Journey titles and subtitles:
Feedback in your activities:
End screen of your activities:
Subtitle
Choose a subtle font colour for instructions that is still easily readable against light backgrounds.
Examples of places the subtitle font colour will show:
Instruction texts in your activities:
Instruction texts in several navigation bar items (e.g. 'My progress'):
Platform background pattern
The platform background pattern is used to add some playfulness to the platform styling. Used in Upskill, the Timeline, the user profile, the accordion template and the swipe series template.
Examples of places the platform background pattern will show:
Upskill:
Timeline:
User profile:
Swipe template:
Accordion (when dark theme is enabled for templates):
Light vs dark theme
There are a few places in the platform where you can choose to use either light or dark theme. Dark theme means that texts will show in the light font colour instead of dark. You can combine light theme with a light background colour, or dark theme with a dark background colour.
Application
Adjust the theme for the application. This changes the theme for login screens, intro, intake, navigation and mobile header. Make sure the platform logo is white (or light) if you pick dark theme.
Update the background colour if you want the background to be a different colour than white (in light theme) or the platform’s primary colour (in dark theme).
Examples of places the application theme will show (dark theme with adjusted color):
The navigation bar:
Intro:
Login screen:
Learning templates
Adjust the theme for learning templates. This changes the theme for the swipe, accordion and perspective templates of a learning bite.
Update the background colour if you want the background to be a different colour than white (in light theme) or the platform's primary colour (in dark theme).
Examples of places the learning templates theme will show (dark theme with adjusted color):
Perspective:
Swipe cards:
Accordion:
Discovery stream
Adjust the theme for the discovery stream.
Update the background colour if you want the background to be a different colour than white (in light theme) or the platform's primary colour (in dark theme).
Example of discovery stream theme (dark theme with adjusted color):
Guiding pages
Adjust the theme for guiding pages. This changes the theme for the to do, notifications, FAQ and platform feedback.
Update the background colour if you want the background to be a different colour than white (in light theme) or the platform's primary colour (in dark theme).
Examples of places the guiding pages theme will show (dark theme with adjusted color):
To do:
Notifications:
FAQ:
Platform feedback:
Activities, journeys and spotlighted activities
Here you can customise your activity tiles, journey tiles and spotlighted widgets.
Spotlighted activity
The spotlighted widgets in the discovery stream have a white background by default, with dark or highlighted texts.
Example of spotlighted activity theme (light theme with adjusted color):
Activity tiles
The activity tiles have a white background by default, with dark or highlighted texts.
Example of activity tiles theme (light theme with adjusted color):
On the discovery stream:
In a journey:
Journey tiles
Adjust the size of the journey title and subtitle. By default, the journey title is larger than the subtitle. Check the checkbox if you want this the other way around.
Example display title (small) and subtitle (large):
Example display title (large) and subtitle (small):
Navigation items
You can edit the icons and the order of the navigation items.
