1.1 #permalink Brand Colors

Toggle example guides Toggle HTML markup

Below are all the defined colors and associated classes to use as backgrounds and text colors.

If your module has various color options, please use modifier classes of the form yourModule_ggPrimary1 or yourModule_ggSecondary2.

Primary 1 Dark
Primary 1
Primary 1 Light
Primary 1 Lighter

Primary 2 Darker
Primary 2 Dark
Primary 2
Primary 2 Light

Primary 3 Dark
Primary 3
Primary 3 Light

Primary 4 Darker
Primary 4 Dark
Primary 4
Primary 4 Light

Primary 5 Dark
Primary 5
Primary 5 Light
Primary 5 Lighter
Primary 5 Very Light
Primary 5 Lightest

Secondary 1 Darker
Secondary 1 Dark
Secondary 1
Secondary 1 Light
Secondary 1 Lighter
Secondary 1 Lightest

Secondary 2
Secondary 2 Light

Secondary 3 Dark
Secondary 3
  <div class="sg-colorField">empty</div>
  <div class="col_ggPrimary1Dark sg-colorField">Primary 1 Dark</div>
  <div class="col_ggPrimary1 sg-colorField">Primary 1</div>
  <div class="col_ggPrimary1Light sg-colorField">Primary 1 Light</div>
  <div class="col_ggPrimary1Lighter sg-colorField darkText">Primary 1 Lighter</div>
  <div class="col_ggPrimary2Darker sg-colorField">Primary 2 Darker</div>
  <div class="col_ggPrimary2Dark sg-colorField">Primary 2 Dark</div>
  <div class="col_ggPrimary2 sg-colorField">Primary 2</div>
  <div class="col_ggPrimary2Light sg-colorField">Primary 2 Light</div>
  <div class="sg-colorField">empty</div>
  <div class="col_ggPrimary3Dark sg-colorField">Primary 3 Dark</div>
  <div class="col_ggPrimary3 sg-colorField">Primary 3</div>
  <div class="col_ggPrimary3Light sg-colorField">Primary 3 Light</div>
  <div class="col_ggPrimary4Darker sg-colorField">Primary 4 Darker</div>
  <div class="col_ggPrimary4Dark sg-colorField">Primary 4 Dark</div>
  <div class="col_ggPrimary4 sg-colorField">Primary 4</div>
  <div class="col_ggPrimary4Light sg-colorField darkText">Primary 4 Light</div>
  <div class="sg-colorField">empty</div>
  <div class="col_ggPrimary5Dark sg-colorField">Primary 5 Dark</div>
  <div class="col_ggPrimary5 sg-colorField">Primary 5</div>
  <div class="col_ggPrimary5Light sg-colorField">Primary 5 Light</div>
  <div class="col_ggPrimary5Lighter sg-colorField">Primary 5 Lighter</div>
  <div class="col_ggPrimary5VeryLight darkText sg-colorField">Primary 5 Very Light</div>
  <div class="col_ggPrimary5Lightest darkText sg-colorField">Primary 5 Lightest</div>
  <div class="col_ggSecondary1Darker sg-colorField">Secondary 1 Darker</div>
  <div class="col_ggSecondary1Dark sg-colorField">Secondary 1 Dark</div>
  <div class="col_ggSecondary1 sg-colorField">Secondary 1</div>
  <div class="col_ggSecondary1Light sg-colorField">Secondary 1 Light</div>
  <div class="col_ggSecondary1Lighter sg-colorField darkText">Secondary 1 Lighter</div>
  <div class="sg-colorField">empty</div>
  <div class="col_ggSecondary1Lightest sg-colorField darkText">Secondary 1 Lightest</div>
  <div class="sg-colorField">empty</div>
  <div class="sg-colorField">empty</div>
  <div class="col_ggSecondary2 sg-colorField">Secondary 2</div>
  <div class="col_ggSecondary2Light sg-colorField">Secondary 2 Light</div>
  <div class="sg-colorField">empty</div>
  <div class="col_ggSecondary3Dark sg-colorField">Secondary 3 Dark</div>
  <div class="col_ggSecondary3 sg-colorField">Secondary 3</div>
Source: base/colors.less, line 1