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 and Titles to make your branding visually richer.

Heading

• Used for large headings typically at the top of a page or as a starting point of a section
• Choose a font with the font weight you prefer, although we recommend using Bold
• Letter case: You can choose to display headings in uppercase (capital), lowercase (small), capitalized (title case), or as originally typed

Titles

• Titles are prominent texts more appropriate for smaller sections and chunks inside a page
• Choose a font with the font weight you prefer, although we recommend using Bold
• Letter case: You can choose to display headings in uppercase (capital), lowercase (small), capitalized (title case), or as originally typed

Body

• Most used style, usually for all texts that are smaller in size, full sentences, paragraphs and tertiary buttons
• Choose a font that includes Regular, Semibold, and Bold weights since all three are in use

Please note: these are the requirements for fonts:

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

Colors

Heading

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

Titles

Be careful with the 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 the title color, we recommend using the black color, but you can choose other any other dark one. In terms of the size, titles are in between headers and body texts.

1. Heading color
2. Title color

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, the 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 creates good contrast with the footer background.