Brand colors and UI Text

Coming soon

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

Badge

UI Text Overline

Example profile image

UI Text Subheading

UI Text Caption

Section heading

Branded poll label 1
10 %
Branded poll label 2 (highlighted)
60 %
Branded poll label 3 Your vote
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.