Learn more about the Commerce brand below.

Colors

Marketing and Brand Colors

These colors are used only in marketing designs, and should not be used for any functional text or designs. They can be used for splash pages, ads, picture heavy sections, etc. Tints and shades of the colors are not allowed, but changing the opacity/transparency is acceptable.

Primary Colors:

Secondary Color:

Alert Color:

Functional Brand Colors

These colors provide stronger contrast for readability. They should be used for any links, buttons, or any other digital section where the user will have to read and interact with. Tints and shades of the colors are not allowed, but changing the opacity/transparency is acceptable.

Primary Colors:

Secondary Color:

Alert Color:

Passing WCAG Text Compliance

Large text must pass 3:1 color:text ratios to pass WCAG compliance, at the very least. These color ratios provide greater depth as the bare minimum for specific colors. Small text must pass 4.5:1 color:text ratios to pass WCAG compliance. Small text over colors should still use these ratios for best use for all customers.

Primary Colors:

Secondary Color:

Alert Color:

Typography

There are two options for typographical hierarchy. In the first, Cera Pro Bold is used for headlines; sub-headlines and body copy should use Cera Pro Regular. If Cera Pro is not available for use then Google Poppins, Arial or Sans-Serif can be used. The size of the body and paragraph copy should be set at 18 pixels. All text aligned to the left. For numbers, use the default old-style numerals in all instances except data-heavy pieces like spreadsheets or forms entry.

H1 Headline

H2 Headline

H3 Headline

H4 Headline

H5 Headline

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut efficitur dui. Text links look like this. Quisque congue ante ac risus luctus, nec efficitur libero convallis. Maecenas at ipsum aliquet, fringilla purus at, consectetur nunc. Duis commodo ligula sed finibus semper. Morbi tincidunt nibh et felis pulvinar, ut scelerisque purus tristique. Donec tincidunt dui eu leo ullamcorper, eget rutrum turpis semper. Aliquam in efficitur quam.

Horizontal Rule

Buttons and CTAs

Disclosures

Legal and disclosure copy should be set at 15 pixels for legibility.