Style Guide

Color Palette

Black

#000000

Pantone CG11

#43464B

Pantone CG7

#97999B

Light Gray

#DDDDDD

Pantone 395

#ECE81A

White

#FFFFFF

Pantone 1505

#FFA500

1505 @ 25%

#FFA500
rgba(255,165,0,0.15)

Pantone 7469

#005F86

Pantone 326

#00B2A9

326 @ 25%

#00B2A9

3105 @ 15%

#68D2DF
rgba(104,210,223,0.15)

Typography

Aa

IBM Plex Serif Semibold (600) for headlines H1 & H2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec mattis, pulvinar dapibus leo. Ut elit tellus, luctus nec mattis, pulvinar dapibus leo.

AaIBM Plex Sans Regular (400) main body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec mattis, pulvinar dapibus leo.

AaIBM Plex Sans Condensed Regular (400) subheads and narrow body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec mattis, pulvinar dapibus leo.

H1 Heading: IBM Plex Serif Semibold (600)

large screen 2.4em; medium 2.2em; small 2.0em

H2 Heading: IBM Plex Serif Semibold (600)

large screen 2.0em; medium 1.8em; small 1.6em

H3 Heading: IBM Plex Sans Condensed Semibold (600)

large screen 1.5em; medium 1.4em; small 1.3em

H4 Heading: IBM Plex Sans Condensed Semibold (600)

large screen 1.3em; medium 1.2em; small 1.1em

Paragraph: IBM Plex Sans Regular (400). All screens 1.6em.

Paragraph Condensed: IBM Plex Sans Condensed Regular (400)
1.6em. <p span class=”condensed”> Lorem ipsum dolor sit amet.
Also “condensed” set as a custom class

IBM+Plex+Sans+Condensed
400 – Regular
400i – Regular Italic
600 – Semibold
~~700 – Bold~~

IBM+Plex+Sans
400 – Regular
400i – Regular Italic
600 – Semibold
~~700 – Bold~~

IBM Plex Serif
600 – Semibold