Source: styleguide/styleguide.less, line 279

1.1 #permalink Brand Colors

Toggle full screen Open in new window 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.

Example
empty
Primary 1 Dark
Primary 1
Primary 1 Light
Primary 1 Lighter

Primary 2 Darker
Primary 2 Dark
Primary 2
Primary 2 Light

empty
Primary 3 Dark
Primary 3
Primary 3 Light
Primary 3 Lighter

Primary 4 Darker
Primary 4 Dark
Primary 4
Primary 4 Light

empty
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
empty
Secondary 1 Lightest

empty
empty
Secondary 2
Secondary 2 Light

empty
Secondary 3 Dark
Secondary 3
Secondary 3 Light
Secondary 3 Lighter
Markup
  <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>
  <br/>
  <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>
  <br/>
  <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_ggPrimary3Lighter sg-colorField darkText">Primary 3 Lighter</div>
  <br/>
  <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>
  <br/>
  <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>
  <br/>
  <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>
  <br/>
  <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>
  <br/>
  <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>
  <div class="col_ggSecondary3Light sg-colorField">Secondary 3 Light</div>
  <div class="col_ggSecondary3Lighter sg-colorField">Secondary 3 Lighter</div>
Source: base/colors.less, line 1