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 #455003
primary-darker #617005
primary-dark #7c9006
primary-intense #8aa007
primary-light #96a920
primary-lighter #b9c66a
primary-lightest #dce2b5
secondary-darkest #7a491a
secondary-darker #ac6624
secondary-dark #dc832e
secondary-intense #f59233
secondary-light #f69d47
secondary-lighter #f9be85
secondary-lightest #fcdec2
tertiary-darkest #6b6f10
tertiary-darker #979b17
tertiary-dark #c1c81e
tertiary-intense #d7de21
tertiary-light #dbe137
tertiary-lighter #e7eb7a
tertiary-lightest #f3f5bc
action-darkest #7a491a
action-darker #ac6624
action-dark #dc832e
action-intense #f59233
action-light #f69d47
action-lighter #f9be85
action-lightest #fcdec2
accent-darkest #7d620f
accent-darker #af8915
accent-dark #e1b01b
accent-intense #fac41e
accent-light #fbca34
accent-lighter #fcdc78
accent-lightest #feedbb
ground-darkest #7d6648
ground-darker #7d6648
ground-dark #7d6648
ground-intense #9d815a
ground-light #baa78b
ground-lighter #ebe6de
ground-lightest #f5f2ee
neutral-darkest #292929
neutral-darker #292929
neutral-dark #4f4f4f
neutral-intense #a2a2a2
neutral-light #d4d4d4
neutral-lighter #f5f5f5
neutral-lightest #ffffff

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:
.has-primary-accent-background-color
.has-primary-accent-color
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 #292929
notice-info #1fbdd2
notice-success #018937
notice-warning #f9b428
notice-error #cb0000
notice-danger #cb0000
light-gray #d4d4d4
middle-gray #4f4f4f
dark-gray #292929
cta #f59233
cta-alt #d7de21
upsell #a24796
text-body #292929

NOTE: See the above section for code examples.

Buttons

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>

Headings

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

The following CSS utility classes are available:

.has-heading-1-font-size
.has-heading-2-font-size
.has-heading-3-font-size
.has-heading-4-font-size
.has-heading-5-font-size
.has-heading-6-font-size

The following CSS variables are available:

var(--wp--preset--font-size--heading-1)
var(--wp--preset--font-size--heading-2)
var(--wp--preset--font-size--heading-3)
var(--wp--preset--font-size--heading-4)
var(--wp--preset--font-size--heading-5)
var(--wp--preset--font-size--heading-6)

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:

.has-small-font-size
.has-normal-font-size
.has-medium-font-size
.has-large-font-size
.has-huge-font-size

New Text Sizes

Smallest Text Size

Smaller Text Size

Small Text Size

Medium Text Size

Large Text Size

Larger Text Size

Largest Text Size

Smallest Bold Size

Smaller Bold Size

Small Bold Size

Medium Bold Size

Large Bold Size

Larger Bold Size

Largest Bold Size

The following CSS utility classes are available:

.has-xxs-font-size
.has-xs-font-size
.has-sm-font-size
.has-md-font-size
.has-lg-font-size
.has-xl-font-size
.has-xxl-font-size

The following CSS variables are available:

var(--wp--preset--font-size--xxs, 10px)
var(--wp--preset--font-size--xxs, 12px)
var(--wp--preset--font-size--xxs, 14px)
var(--wp--preset--font-size--md, 16px)
var(--wp--preset--font-size--lg, 18px)
var(--wp--preset--font-size--xl, 20px)
var(--wp--preset--font-size--xxl, 24px)

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
Blockquote
“In order to write about life first you must live it.”
Ernest Hemingway
Glyphs
cart
cart-plus
check
chevron-dove
chevron-down
clock
double-chevron
event
passport
plus
product-book
product-classroom
product-correspondence
product-download
product-livestream
product-online
product-webinar
pharma
search
slash
star
spinner
open-eye
bars
check-thin
close
key
user
login
facebook
instagram
linkedin
twitter
youtube
badge-check
certificate
cart-outline
slider-arrow-left
slider-arrow-right
check-solid
minus
magnifying-glass-minus
filter
left-angle
right-angle

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():

the_glyph('search');
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);
}

Breakpoints

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 */
}