Brand colors

An Envision theme uses one base brand color and one matching contrast color.

• Brand color is the primary color for the theme.
• Brand contrast color is the text/icon color used on top of the brand color.
• From the base brand color, Envision generates a palette of lighter and darker variants.
• Each palette color has a matching contrast color verified against WCAG 2 AA.

The default theme uses a neutral brand color.

Palette rules

The brand palette follows these rules:

• --env-ui-color-brand is the base brand color.
• --env-ui-color-brand-{n} are generated variants of the base brand color.
• The scale is ordered from lighter to darker variants in a normal theme.
• Each palette value has a matching contrast variable that meets WCAG 2 AA requirements.

In dark themes, where the font color is lighter than the section background color, the scale is reversed:

• 05 is the darkest variant
• 100 is the lightest variant

Usage

Use the generated brand palette (CSS variables or utility classes) for components and UI states that should follow the active theme branding.

Typical branded usage includes:

• buttons
• badges
• dropdown triggers
• popovers
• progress indicators
• highlighted UI sections

Example branding of components

The following examples are visual demonstrations and do not define the color system.

Brand button

Badge

Dropdown

• Action
• Properties
• Settings

Section heading

Subheading

Caption

Section heading

Branded poll label 1

10 %

Branded poll label 2 (highlighted)

60 %

Branded poll label 3

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

The default theme uses this neutral brand 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

Brand color variables

The following CSS variables are available:

Base colors

• --env-ui-color-brand
  Primary brand color

• --env-ui-color-brand-contrast
  Text/icon color used on top of the brand color

• --env-ui-color-brand-dark
  A predefined darker variant of the brand color, separate from the numeric scale, typically used for hover and emphasis states

Generated palette

The brand palette is available as a numeric scale:

• --env-ui-color-brand-{n}
• --env-ui-color-brand-{n}-contrast

Where {n} is one of:

05, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100

Each {n} value defines a color and its corresponding contrast color.

Notes

• Lower values (05) are lighter variants
• Higher values (100) are darker variants
• Each {n} value has a matching -contrast color that meets WCAG 2 AA