Context

The easiest way to customize your Web App and bring it closer to your branding is to use your branding fonts. We recommend buying the license for the font in use, but also you can choose a similar free font from free libraries like Google Fonts.

We recommend using just one font with bold, semibold, and regular weights. You can add additional font for Headers to make your branding visually richer.

Headers

• Used for large headings typically at the top of a page or as a starting point of a section
• Weight in use: Bold

Titles

• Titles are prominent texts more appropriate for smaller sections and chunks inside a page
• Weight in use: Bold, Semibold

Body

• Most used style, usually for all texts that are smaller in size, full sentences, paragraphs and tertiary buttons
• Weight in use: mostly Regular, but also Semibold and Bold

Please note: these are the requirements for fonts:

• File format: OTF or TTF
• Font with Bold, Semibold and Regular weight
• Additional font for Headings if necessary
• License

Colors

Headers

You should be extra careful when choosing header colors. That color should have enough contrast with the background to be readable and fulfill accessibility standards. For header color, we recommend using the black color, but you can choose other.

Titles

Be careful with title color as well. That color also should have enough contrast with the background to be readable and live up to the accessibility standards. For title color, we recommend using the black color, but you can choose other. In terms of the size, titles are in between headers and body texts.

Body

This is the most used style, it applies to all small texts and paragraphs. Per usual - careful with this one too. Contrast with the background and accessibility are still applicable here. Additionally, for the body text we must choose a really dark color, preferably black because all other shades of text colors are made from that darkest color. So for example, placeholder for the input field is only 20% of the body text color.

1. Body color 100%
2. Body color 80%
3. Body color 60%
4. Body color 40%

Footer

This defines the color of the text inside the footer. Use a value that is creating good contrast with the footer background.