Colors

Background Colors

Color Background Navy %

C B Navy 100

C B Navy 90

C B Navy 80

C B Navy 70

C B Navy 60

C B Navy 50

C B Navy 40

C B Navy 30

C B Navy 20

C B Navy 10

Color Background Red %

C B Red 100

C B Red 90

C B Red 80

C B Red 70

C B Red 60

C B Red 50

C B Red 40

C B Red 30

C B Red 20

C B Red 10

Color Background Blue %

C B Blue 100

C B Blue 90

C B Blue 80

C B Blue 70

C B Blue 60

C B Blue 50

C B Blue 40

C B Blue 30

C B Blue 20

C B Blue 10

Color Background Purple %

C B Purple 100

C B Purple 90

C B Purple 80

C B Purple 70

C B Purple 60

C B Purple 50

C B Purple 40

C B Purple 30

C B Purple 20

C B Purple 10

Color Background Orange %

C B Orange 100

C B Orange 90

C B Orange 80

C B Orange 70

C B Orange 60

C B Orange 50

C B Orange 40

C B Orange 30

C B Orange 20

C B Orange 10

Neutral Background Colors

Color Background Neutral %

C B Black

C B Neutral 90

C B Neutral 80

C BNeutral 70

C B Neutral 60

C B Neutral 50

C B Neutral 40

C B Neutral 30

C B Neutral 20

C B Neutral 10

C B Neutral 5

C B White

Transparent Background Colors

Color Background Navy transparent %

C B Navy Tr 90

C B Navy Tr 80

C B Navy Tr 70

C B Navy Tr 60

C B Navy Tr 50

C B Navy Tr 40

C B Navy Tr 30

C B Navy Tr 20

C B Navy Tr 10

Color Background Red transparent %

C B Red 100

C B Red Tr 90

C B Red Tr 80

C B Red Tr 70

C B Red Tr 60

C B Red Tr 50

C B Red Tr 40

C B Red Tr 30

C B Red Tr 20

C B Red Tr 10

Color Background Blue transparent %

C B Blue 100

C B Blue Tr 90

C B Blue Tr 80

C B Blue Tr 70

C B Blue Tr 60

C B Blue Tr 50

C B Blue Tr 40

C B Blue Tr 30

C B Blue Tr 20

C B Blue Tr 10

Color Background Purple transparent %

C B Purple 100

C B Purple Tr 90

C B Purple Tr 80

C B Purple Tr 70

C B Purple Tr 60

C B Purple Tr 50

C B Purple Tr 40

C B Purple Tr 30

C B Purple Tr 20

C B Purple Tr 10

Color Background Orange transparent %

C B Orange 100

C B Orange Tr 90

C B Orange Tr 80

C B Orange Tr 70

C B Orange Tr 60

C B Orange Tr 50

C B Orange Tr 40

C B Orange Tr 30

C B Orange Tr 20

C B Orange Tr 10

Neutral Transparent Background Colors

Color Background Neutral transparent %

C B Neutral Tr 90

C B Neutral Tr 80

C BNeutral Tr 70

C B Neutral Tr 60

C B Neutral Tr 50

C B Neutral Tr 40

C B Neutral Tr 30

C B Neutral Tr 20

C B Neutral Tr 10

C B Neutral Tr 5

Text Colors

color text Navy

Class name

Color Text %

Sample

Heading 700

C T Navy 100

Heading

Heading 500

C T Navy 100

Heading

Paragraph

C T Navy 100

This is Large (L) parapraph text with color text Navy 100. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph

C T Navy 100

C T Navy 10

C T Navy 100
C T Navy 90
C T Navy 80
C T Navy 70
C T Navy 60
C T Navy 50
C T Navy 40
C T Navy 30
C TNavy 20
C T Navy 10

color text Red

Class name

Color Text %

Sample

Heading 700

C T Red 100

Heading

Heading 600

C T Red 100

Heading

Paragraph

C T Red 100

This is Medium (M) parapraph text with color text Red 100. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph

C T Red 100

C T Red 10

C T Red 100
C T Red 90
C T Red 80
C T Red 70
C T Red 60
C T Red 50
C T Red 40
C T Red 30
C T Red 20
C T Red 10

color text blue

Class name

Color Text %

Sample

Heading 700

C T Blue 100

Heading

Heading 600

C T Blue 100

Heading

Paragraph

C T Blue 100

This is Small (S) parapraph text with color text Blue 100. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph

C T Red 100

C T Red 10

C T Blue 100
C T Blue 90
C T Blue 80
C T Blue 70
C T Blue 60
C T Blue 50
C T Blue 40
C T Blue 30
C T Blue 20
C T Blue 10

color text Purple

Class name

Color Text %

Sample

Heading 700

C T Purple 100

Heading

Heading 600

C T Purple 100

Heading

Paragraph

C T Purple 100

This is Large (L) parapraph text with color text Purple 100. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph

C T Red 100

C T Red 10

C T Purple 100
C T Purple 90
C T Purple 80
C T Purple 70
C T Purple 60
C T Purple 50
C T Purple 40
C T Purple 30
C T Purple 20
C T Purple 10

color text Orange

Class name

Color Text %

Sample

Heading 700

C T Orange 100

Heading

Heading 600

C T Orange 100

Heading

Paragraph

C T Orange 100

This is Medium (M) parapraph text with color text Orange 100. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Paragraph

C T Orange 100

C T Orange 10

C T Orange 100
C T Orange 90
C T Orange 80
C T Orange 70
C T Orange 60
C T Orange 50
C T Orange 40
C T Orange 30
C T Orange 20
C T Orange 10

color text Black

Class name

Color Text %

Sample

Heading 700

C T Black 100

Heading

Heading 600

C T Black 100

Heading

Paragraph

C T Black 100

Paragraph

C T Black 100

C T Black
C T Neutral 90
C T Neutral 80
C T Neutral 70
C T Neutral 60
C T Neutral 50
C T Neutral 40
C T Neutral 30
C T Neutral 20
C T Neutral 10

color text white

Class name

Color Text %

Sample

Heading

C T White 100

C B Navy 100

Heading

Subheading

C T Navy 100

Subheading

Paragraph

C T Navy 100

C B Navy 60

This is Small (S) parapraph text with background color Navy 60 and color text White 100. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Emphasis text

To add the Emphasis Text class:

Select the text to Select the word, phrase, or sentence to be emphasized. This could be inside paragraphs, headings, subheadings, lists, or any other text area.
Use the brush icon or "Wrap with span" option to create a Text Span
With the Text Span selected, add the class "emphasis" or "emphasis bold" and the desired color.

color text white

Class name

Emphasis & Color

Sample

Heading 800

Emphasis

C T Red 100

Heading with emphasis text

Heading 700

Emphasis Bold

C T Red 100

Subheading with emphasis bold text

Heading 500

Emphasis

C T Red 100

Subheading with emphasis text

Square list

Paragraph

Emphasis Bold

+ color

This is a list item with emphasis text.
This is a list item with emphasis text.
This is a list item with emphasis text.

Paragraph

Emphasis Bold

This is a list item with emphasis text.
This is a list item with emphasis text.
This is a list item with emphasis text.

Paragraph

Emphasis Bold

C T Orange 100

This is Small (S) parapraph text with emphasis text and color text Orange 100. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Paragraph

Emphasis Bold

+ color

This is Small (S) parapraph text with emphasis text and color text Purple 100. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.