Colors

OpenGov Primary Brand Colors

Brand and primary colors

1

2

3

4

5

<div class="swatch color-blue">1</div>
<div class="swatch dark-blue">2</div>
<div class="swatch light-blue">3</div>
<div class="swatch orange">4</div>
<div class="swatch green">5</div>

UI Primary hues are created from the entity color generated from the entity color generator. $colorPrimary3 is the same as $colorPrimary and is the base value of the palette. Following our convention, $colorPrimary1 is the darkest value, while $colorPrimary6 is the lightest.

1

2

3

4

5

6

7

<div class="swatch color-primary_1">1</div>
<div class="swatch color-primary_2">2</div>
<div class="swatch color-primary_3">3</div>
<div class="swatch color-primary_4">4</div>
<div class="swatch color-primary_5">5</div>
<div class="swatch color-primary_6">6</div>
<div class="swatch color-primary_7">7</div>

UI Grays

The neutral palette is designed to maximize legibility, accessibility and usability. While a complete grayscale was defined (matching the value sequence of the larger palette), we limited use within the UI to the seven “System Neutrals” defined below. Each neutral has a primary function within the UI, but can be leveraged for other uses.

0

1

2

3

4

5

6

7

8

9

<div class="swatch color-gray_0">0</div>
<div class="swatch color-gray_1">1</div>
<div class="swatch color-gray_2">2</div>
<div class="swatch color-gray_3">3</div>
<div class="swatch color-gray_4">4</div>
<div class="swatch color-gray_5">5</div>
<div class="swatch color-gray_6">6</div>
<div class="swatch color-gray_7">7</div>
<div class="swatch color-gray_8">8</div>
<div class="swatch color-gray_9">9</div>

Report Visualization Colors

Report Colors are

<div class="ui-col-3of6">
<div class="swatch report-color_1"></div>
<div class="swatch report-color_2"></div>
<div class="swatch report-color_3"></div>
<div class="swatch report-color_4"></div>
<div class="swatch report-color_5"></div>
<div class="swatch report-color_6"></div>
<div class="swatch report-color_7"></div>
<div class="swatch report-color_8"></div>
<div class="swatch report-color_9"></div>
<div class="swatch report-color_10"></div>
</div> <div class="ui-col-3of6">
<div class="swatch report-color_11"></div>
<div class="swatch report-color_12"></div>
<div class="swatch report-color_13"></div>
<div class="swatch report-color_14"></div>
<div class="swatch report-color_15"></div>
<div class="swatch report-color_16"></div>
<div class="swatch report-color_17"></div>
<div class="swatch report-color_18"></div>
<div class="swatch report-color_19"></div>
<div class="swatch report-color_20"></div>
</div> <div class="clearfix"></div>

Status colors (new)

Status colors indicate status

Greens

1

2

3

4

5

6

Yellows

1

2

3

4

5

6

Reds

1

2

3

4

5

6

<div class="ui-col-2of6">
<strong>Greens</strong>
<div class="swatch colorStatus-G1">1</div>
<div class="swatch colorStatus-G2">2</div>
<div class="swatch colorStatus-G3">3</div>
<div class="swatch colorStatus-G4">4</div>
<div class="swatch colorStatus-G5">5</div>
<div class="swatch colorStatus-G6">6</div>
</div><div class="ui-col-2of6">
<strong>Yellows</strong>
<div class="swatch colorStatus-Y1">1</div>
<div class="swatch colorStatus-Y2">2</div>
<div class="swatch colorStatus-Y3">3</div>
<div class="swatch colorStatus-Y4">4</div>
<div class="swatch colorStatus-Y5">5</div>
<div class="swatch colorStatus-Y6">6</div>
</div><div class="ui-col-2of6">
<strong>Reds</strong>
<div class="swatch colorStatus-R1">1</div>
<div class="swatch colorStatus-R2">2</div>
<div class="swatch colorStatus-R3">3</div>
<div class="swatch colorStatus-R4">4</div>
<div class="swatch colorStatus-R5">5</div>
<div class="swatch colorStatus-R6">6</div>
</div><div class="clearfix"></div>