Brand colors and UI Text

2023.01

Brand colors

With the introduction of Brand colors, some components will have new default color decorations using the new Brand color. See examples below.

A theme will have a brand color and a brand contrast color. The default Envision theme will have a neutral brand color.

The brand color will be used to generate a palette of lighter and darker variants. Each color in the palette will get a matching contrast color for text verified against WCAG 2.0 AA.

UI text

UI Text will be used as the new default text styles for headings in all components.

<p class="env-ui-text-overline">Overline</p>
<h1 class="env-ui-text-heading">Heading</h1>
<h2 class="env-ui-text-sectionheading">Section heading</h2>
<h3 class="env-ui-text-subheading">Subheading</h3>
<p class="env-ui-text-caption">Caption</p>

Example branding of components

Branding of components

Brand button

Badge

Dropdown

• Action
• Properties
• Settings

UI Text Overline

UI Text Subheading

UI Text Caption

Section heading

Branded poll label 1

10 %

Branded poll label 2 (highlighted)

60 %

Branded poll label 3

30 %

Example brand color palette

Current example theme brand color palette

1. Brand color
2. Brand 05
3. Brand 10
4. Brand 15
5. Brand 20
6. Brand 25
7. Brand 30
8. Brand 35
9. Brand 40
10. Brand 45
11. Brand 50
12. Brand 55
13. Brand 60
14. Brand 65
15. Brand 70
16. Brand 75
17. Brand 80
18. Brand 85
19. Brand 90
20. Brand 95
21. Brand 100

Default brand color palette

1. Brand color
2. Brand 05
3. Brand 10
4. Brand 15
5. Brand 20
6. Brand 25
7. Brand 30
8. Brand 35
9. Brand 40
10. Brand 45
11. Brand 50
12. Brand 55
13. Brand 60
14. Brand 65
15. Brand 70
16. Brand 75
17. Brand 80
18. Brand 85
19. Brand 90
20. Brand 95
21. Brand 100

Inverted themes where the font color is lighter than the section background color will result in an inverted (reversed) palette where 05 is the darkest and 100 is the lightest variant.