Brand colors

An Envision theme will have one brand color and a matching contrast color. The default theme uses a neutral color.

The brand color is used to generate a palette of lighter and darker variants. Each color in the palette has a matching contrast color verified against WCAG 2 AA.

Example 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

  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.

Envision documentation