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 #014841
primary-darker #01645b
primary-dark #028174
primary-intense #028f81
primary-light #1b9a8d
primary-lighter #67bcb3
primary-lightest #b3ddd9
secondary-darkest #012b48
secondary-darker #013c64
secondary-dark #024e81
secondary-intense #02568f
secondary-light #1b679a
secondary-lighter #679abc
secondary-lightest #b3ccdd
tertiary-darkest #014841
tertiary-darker #01645b
tertiary-dark #028174
tertiary-intense #028f81
tertiary-light #1b9a8d
tertiary-lighter #67bcb3
tertiary-lightest #b3ddd9
action-darkest #012b48
action-darker #013c64
action-dark #024e81
action-intense #02568f
action-light #1b679a
action-lighter #679abc
action-lightest #b3ccdd
accent-darkest #7a491a
accent-darker #ab6624
accent-dark #dc842e
accent-intense #f49233
accent-light #f59d47
accent-lighter #f8be85
accent-lightest #fcdec1
ground-darkest #292929
ground-darker #292929
ground-dark #4f4f4f
ground-intense #a2a2a2
ground-light #d4d4d4
ground-lighter #f5f5f5
ground-lightest #ffffff
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 #02568f
cta-alt #f49233
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 */
}