Introduction
The Style tab in Cogniss Creator allows you to configure the user interface elements. This includes the font, colours, background and button styles.
Colour
This determines the colour used across application user interface elements.
Primary colour: this is the main colour used in major actionable elements, such as primary & secondary buttons, the footer menu, the actionable dashboard widget and my profile menu icons button.
Secondary colour: Used as an accent colour, for indication and points. This includes any graph elements and survey selections, and icons.
Dark: General font colour used.
Light: White colour, use as font colour on the dark background.
Accent Colour: Optional colour which provides additional secondary colours. This can be selected in certain content elements (eg. Content block type: COLLAPSIBLE_TEXT_CONTENT)
Please note that it's essential to consider the contrast for optimal readability. The app buttons are primarily composed of a combination of the dark and primary colors.
The system will automatically provide the best contrast, however, we advise selecting these two colors thoughtfully to ensure sufficient contrast, facilitating clear and easily legible text for users across all interface elements.
Default colours for an application
Above is an example of what the application will look like with the default colours selected.
Font
This determines the typeface that appears throughout the application. By default, the Montserrat font is selected.
Lato
Montserrat
Roboto
Work sans
Quicksand
To provide consistency, Cogniss app will provide one font per app across web and mobile.
Button, tile, icon
This shows how different button and tile selections impact the design of the application.
This determines the style of buttons and clickable user elements. By default, the ROUND style is selected for various button elements, which refer to the button corner shape. The other two options are square and circular.
You can further configure the style of list, option and profile tile elements.
List tile: Explore menu list & dashboard widget style
Option tile: survey engine option tile style
Profile tile: profile/user grid menu icon background shape.
This determines the style of icons and badges in the application. This impacts the outline used to display the icon and badge. However, this does not actually change any uploaded media files used for the icon or badges.
General background (mobile app only)
This determines the dashboard (home screen) background appearance in the app. You can select a colour or an image to be displayed in the background.
We recommend images of approximately 834x1112 pixels, with a safe area to prevent cropping.
Follow the Canva template guide to ensure your background image is within the safe area to ensure it is compatible across different-sized devices.
Please consider the colour of the background selected, as it can impact the visibility of dashboard widgets and text.
Feature header
This determines the header appearance displayed on the activity launch screen and on a feedback page after completing an activity. You can select a colour only.
Activity header
This determines the header appearance displayed during an activity. You can select a colour or an image.
App header
This determines the header appearance across navigational sections of the app (Home, Explore, More). You can select a solid colour or transparent header.
