Primary Palette

Here is the intended semantics for how these colors are to be used in designs:

  • Primary, Secondary, and Tertiary are meant to set brand tone.
    • These colors shold have similar intensity, so that they can be used interchangeably for variability.
    • Secondary should be different from Primary
    • Tertiary can be mapped to Primary or Secondary -- whichever has to be more dominant.
  • Accent color is more prominent than any other color in the palette, to be used on small elements.
  • Action color will be used for call-to-action controls (mostly buttons):
    • Can be mapped to one of these: Primary, Secondary, Tertiary.
    • Accent color should be different from Action:
      • Where extreme prominence is required, Accent should be preferred.
      • Accent can be used as a state-change color to Action, e.g. when [Add to Cart] changes to [Checkout].
  • Neutral should be a scale of grays:
    • Neutral-Darkest will be mapped to $black which is used as contrasting color for text on light backgrouds.
    • Neutral-Intense can be used as a background for active buttons, so it should not be too light to avoid confusion with disabled buttons.
    • Neutral-Lightest will be mapped to $white which is used a contrasting color for text on dark backgrounds.
    • Neutral-Darkest, Neutral-Darker and Neutral-Dark should be dark enough to give enough contrast for text on -light, -lighter and -lightest backgrounds correspondingly.
  • Ground will be alternative for Neutral, primarily meant for toned-down backgrounds that need to be different from Neutral.

primary-darkest #7f960b
primary-darker #7f960b
primary-dark #8aa007
primary-intense #8aa007
primary-light #f0fbab
primary-lighter #f7f8d3
primary-lightest #fbfce8
secondary-darkest #f38216
secondary-darker #f38216
secondary-dark #f38216
secondary-intense #f59233
secondary-light #fac899
secondary-lighter #fde9d6
secondary-lightest #f6f2ef
tertiary-darkest #57aec0
tertiary-darker #57aec0
tertiary-dark #57aec0
tertiary-intense #6eb9c9
tertiary-light #b6dce4
tertiary-lighter #e2f1f4
tertiary-lightest #f0f8f9
action-darkest #f38216
action-darker #f38216
action-dark #f38216
action-intense #f59233
action-light #fac899
action-lighter #fde9d6
action-lightest #f6f2ef
accent-darkest #f6bb05
accent-darker #f6bb05
accent-dark #f6bb05
accent-intense #fac41e
accent-light #fde18e
accent-lighter #fef3d2
accent-lightest #fef9eb
ground-darkest #7d6648
ground-darker #7d6648
ground-dark #7d6648
ground-intense #9d815a
ground-light #baa78b
ground-lighter #ebe6de
ground-lightest #f5f2ee
neutral-darkest #000000
neutral-darker #000000
neutral-dark #333333
neutral-intense #333333
neutral-light #666666
neutral-lighter #cccccc
neutral-lightest #efefef

The above color names can be used in SCSS like this:

@include cds-background-color(primary-intense);
@include cds-background-color(primary-intense, important);
To set color attribute in SCSS, use this mixin:
@include cds-color(primary-intense);
@include cds-color(primary-intense, important);
Also available as CSS utility classes:
The color code can be retrieved with SCSS function cds-brand-color($color_name):
color: cds-brand-color(primary-accent)
border-color: 2px solid cds-brand-color(primary-accent)
To get a high-contrast color for a text based on its background color use the cds-color-contrast() mixin.
.dangerous-button {
	@include cds-color-contrast(notice-danger);
	@include cds-background-color(notice-danger)
Internally, this mixin relies on cds-contrast() function to get text color based on background color, so the following code would give the same result:
.dangerous-button {
	@include cds-color(cds-contrast(notice-danger));
	@include cds-background-color(notice-danger);
NOTE: All the same logic applies to the colors from the Extended Palette displayed below.

Extended Palette
heading #000000
notice-info #1fbdd2
notice-success #018937
notice-warning #f9b428
notice-error #cb0000
notice-danger #cb0000
light-gray #666666
middle-gray #333333
dark-gray #000000
cta #f59233
cta-alt #6eb9c9
text-body #000000

NOTE: See the above section for code examples.


Example code:

<button class="cds-button--action">Action</button>

Small Buttons

Example code:

<button class="cds-button--action cds-button--sm">Small Action</button>

Large Buttons

Example code:

<button class="cds-button--action cds-button--lg">Large Action</button>

Outline Buttons

Example code:

<button class="cds-button--outline-action">Outline Action</button>

Text Colors

Primary Darkest

Primary Darker

Primary Dark

Primary Intense

Primary Light

Primary Lighter

Primary Lightest

Secondary Darkest

Secondary Darker

Secondary Dark

Secondary Intense

Secondary Light

Secondary Lighter

Secondary Lightest

Tertiary Darkest

Tertiary Darker

Tertiary Dark

Tertiary Intense

Tertiary Light

Tertiary Lighter

Tertiary Lightest

Action Darkest

Action Darker

Action Dark

Action Intense

Action Light

Action Lighter

Action Lightest

Accent Darkest

Accent Darker

Accent Dark

Accent Intense

Accent Light

Accent Lighter

Accent Lightest

Ground Darkest

Ground Darker

Ground Dark

Ground Intense

Ground Light

Ground Lighter

Ground Lightest

Neutral Darkest

Neutral Darker

Neutral Dark

Neutral Intense

Neutral Light

Neutral Lighter

Neutral Lightest

Example code:

@include cds-color(primary-intense);
@include cds-color(primary-intense, important);
The following works, but the cds-color() mixin is the preferred way to set color.
color: $cds-primary-intense-color;
color: cds-brand-color(primary-intense);
A set of corresponding CSS utility classes is available:
<p class="has-primary-accent-color">Primary Color</p>


Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Example code:

@include cds-font-family(heading);
@include cds-font-family(heading-bold);

@include cds-font-size(h3);  // Options: h1, h2, h3, h4, h5, h6

@include cds-line-height(h3) // Options: h1, h2, h3, h4, h5, h6

Text Sizes

Default Text Size

Small Text Size

Normal Text Size

Medium Text Size

Large Text Size

Huge Text Size

Default Text Size

Small Text Size

Normal Text Size

Medium Text Size

Large Text Size

Huge Text Size

The following mixins are available:

@include cds-font-family(text);
@include cds-font-family(text-bold);

@include cds-font-size(md);     // Options: xxs, xs, sm, md, lg, xl, xxl

@include cds-line-height(lg);   // Options: xxs, xs, sm, md, lg, xl, xxl

NOTE: It is not guaranteed that md (or normal, or medium) font size will be 16px. It can be anything really, therefore no such assumption should be made.

The following CSS utility classes are available:


Ordered List
  1. Item 1
    1. Subitem 1.1
      1. Subitem 1.1.1
      2. Subitem 1.1.2
      3. Subitem 1.1.3
    2. Subitem 1.2
    3. Subitem 1.3
  2. Item 2
  3. Item 3
Unordered List
  • Item 1
    • Subitem 1.1
      • Subitem 1.1.1
      • Subitem 1.1.2
      • Subitem 1.1.3
    • Subitem 1.2
    • Subitem 1.3
  • Item 2
  • Item 3
“In order to write about life first you must live it.”
Ernest Hemingway

Inspect the icons above to see how to add an icon via HTML markup. To output an icon in PHP code, simply call the_glyph():

To add an icon via SCSS, use one these mixins: cds-glyph(), cds-glyph-before(), cds-select-arrow().
.search-button {
	@include cds-glyph($cds-glyph-search);


The list of known breakpoints *:

$grid-breakpoints: (
	xs:                  0,
	phone-portrait:    360px,
	sm:                576px,
	phone-landscape:   640px,
	tablet-portrait:   768px,
	tablet-landscape: 1024px,
	md:               1024px,
	lg:               1200px,
	large-tablet:     1200px,
	desktop:          1400px,
	xl:               1400px,
	large-desktop:    1680px,
	xxl:              1680px

*Note, the pixel values might be slightly different for different subsidiaries.

The semantic names like phone-portrait are preferred for readability. The two-letter names are supported for compatibility and might be eliminated/renamed in the future.

The cds-screen mixin is the preferred way of declaring breakpoints:

@include cds-screen(phone-landscape) {
	/* CSS rules for this breakpoint */

Note, we follow mobile-first approach, so the above statement will create a block like this:

@media (screen and min-width: 640px) {
	/* CSS rules for this breakpoint */

Note, if you pass an arbitrary pixel value, it will be used as min-width attribute for the @media rule.

So this would output the same code as above:

@include cds-screen(640px) {
	/* CSS rules for this breakpoint */