One page guide

Box border

Border size color

Class name

Sample

Border 1 Navy

highlight_alt

Border 1 Red

highlight_alt

Border 1 Blue

highlight_alt

Border 1 Purple

highlight_alt

Border 1 Orange

highlight_alt

Border 1 Black

highlight_alt

Border 1 Neutral 40

highlight_alt

Border 1 Neutral 20

highlight_alt

Border 1 White

highlight_alt

Class name

Sample

Border 2 Navy

highlight_alt

Border 2 Red

highlight_alt

Border 2 Blue

highlight_alt

Border 2 Purple

highlight_alt

Border 2 Orange

highlight_alt

Border 2 Black

highlight_alt

Border 2 Neutral 40

highlight_alt

Border 2 Neutral 20

highlight_alt

Border 2 White

highlight_alt

Class name

Sample

Border 4 Navy

highlight_alt

Border 4 Red

highlight_alt

Border 4 Blue

highlight_alt

Border 4 Purple

highlight_alt

Border 4 Orange

highlight_alt

Border 4 Black

highlight_alt

Border 4 Neutral 40

highlight_alt

Border 4 Neutral 20

highlight_alt

Border 4 White

highlight_alt

Top border

Quick grid stack

Class name

Sample

Border 1 T Navy

highlight_alt

Border 1 T Red

highlight_alt

Border 1 T Blue

highlight_alt

Border 1 T Purple

highlight_alt

Border 1 T Orange

highlight_alt

Border 1 T Black

highlight_alt

Border 1 T Neutral 40

highlight_alt

Border 1 T Neutral 20

highlight_alt

Button 1 T White

highlight_alt

Class name

Sample

Border 2 T Navy

highlight_alt

Border 2 T Red

highlight_alt

Border 2 T Blue

highlight_alt

Border 2 T Purple

highlight_alt

Border 2 T Orange

highlight_alt

Border 2 T Black

highlight_alt

Border 2 T Neutral 40

highlight_alt

Border 2 T Neutral 20

highlight_alt

Button 2 T White

highlight_alt

Class name

Sample

Border 4 T Navy

highlight_alt

Border 4 T Red

highlight_alt

Border 4 T Blue

highlight_alt

Border 4 T Purple

highlight_alt

Border 4 T Orange

highlight_alt

Border 4 T Black

highlight_alt

Border 4 T Neutral 40

highlight_alt

Border 4 T Neutral 20

highlight_alt

Button 4 T White

highlight_alt

Bottom border

Quick grid stack

Class name

Sample

Border 1 B Navy

highlight_alt

Border 1 B Red

highlight_alt

Border 1 B Blue

highlight_alt

Border 1 B Purple

highlight_alt

Border 1 B Orange

highlight_alt

Border 1 B Black

highlight_alt

Border 1 B Neutral 40

highlight_alt

Border 1 B Neutral 20

highlight_alt

Button 1 B White

highlight_alt

Class name

Sample

Border 2 B Navy

highlight_alt

Border 2 B Red

highlight_alt

Border 2 B Blue

highlight_alt

Border 2 B Purple

highlight_alt

Border 2 B Orange

highlight_alt

Border 2 B Black

highlight_alt

Border 2 B Neutral 40

highlight_alt

Border 2 B Neutral 20

highlight_alt

Button 2 B White

highlight_alt

Class name

Sample

Border 4 B Navy

highlight_alt

Border 4 B Red

highlight_alt

Border 4 B Blue

highlight_alt

Border 4 B Purple

highlight_alt

Border 4 B Orange

highlight_alt

Border 4 B Black

highlight_alt

Border 4 B Neutral 40

highlight_alt

Border 4 B Neutral 20

highlight_alt

Button 4 B White

highlight_alt

Left border

Quick grid stack

Class name

Sample

Border 1 L Navy

highlight_alt

Border 1 L Red

highlight_alt

Border 1 L Blue

highlight_alt

Border 1 L Purple

highlight_alt

Border 1 L Orange

highlight_alt

Border 1 L Black

highlight_alt

Border 1 L Neutral 40

highlight_alt

Border 1 L Neutral 20

highlight_alt

Button 1 L White

highlight_alt

Class name

Sample

Border 2 L Navy

highlight_alt

Border 2 L Red

highlight_alt

Border 2 L Blue

highlight_alt

Border 2 L Purple

highlight_alt

Border 2 L Orange

highlight_alt

Border 2 L Black

highlight_alt

Border 2 L Neutral 40

highlight_alt

Border 2 L Neutral 20

highlight_alt

Button 2 L White

highlight_alt

Class name

Sample

Border 4 L Navy

highlight_alt

Border 4 L Red

highlight_alt

Border 4 L Blue

highlight_alt

Border 4 L Purple

highlight_alt

Border 4 L Orange

highlight_alt

Border 4 L Black

highlight_alt

Border 4 L Neutral 40

highlight_alt

Border 4 L Neutral 20

highlight_alt

Button 4 L White

highlight_alt

Right border

Quick grid stack

Class name

Sample

Border 1 R Navy

highlight_alt

Border 1 R Red

highlight_alt

Border 1 R Blue

highlight_alt

Border 1 R Purple

highlight_alt

Border 1 R Orange

highlight_alt

Border 1 R Black

highlight_alt

Border 1 R Neutral 40

highlight_alt

Border 1 R Neutral 20

highlight_alt

Button 1 R White

highlight_alt

Class name

Sample

Border 2 R Navy

highlight_alt

Border 2 R Red

highlight_alt

Border 2 R Blue

highlight_alt

Border 2 R Purple

highlight_alt

Border 2 R Orange

highlight_alt

Border 2 R Black

highlight_alt

Border 2 R Neutral 40

highlight_alt

Border 2 R Neutral 20

highlight_alt

Button 2 R White

highlight_alt

Class name

Sample

Border 4 R Navy

highlight_alt

Border 4 R Red

highlight_alt

Border 4 R Blue

highlight_alt

Border 4 R Purple

highlight_alt

Border 4 R Orange

highlight_alt

Border 4 R Black

highlight_alt

Border 4 R Neutral 40

highlight_alt

Border 4 R Neutral 20

highlight_alt

Button 4 R White

highlight_alt

Buttons

Button color

Class name

Sample

Button Navy

Button Red

Button Blue

Button Purple

Button Orange

Button White

+ Over background  

Button Border color

Class name

Sample

Button B White

Button B Red

Button B Blue

Button B Purple

Button B Orange

Button B White

+ Over background  

Radius

Button color Radius border size

Class name

Sample

Button Navy

Button Navy

Radius 4

Button Navy

Radius 8

Button Navy

Radius 12

Button Navy

Radius 16

Button Navy

Radius 24

Size

Button size button color

Class name

Sample

Button T S

Button Orange

Button T M

Button Orange

Button T L

Button Orange

Button color Radius border size

Class name

Sample

B T S

Button B Red

B T M

Button B Red

B T L

Button B Red

Icon Buttons

copy/paste file_copy

These buttons use Link Block and Text Link to combine two different fonts and CSS styles.

Paragraph Size

+ Link Block:  

Button Wrapper Color

Inside:  

+Text Link:  

Button

Color

Icon Left

Button Wrapper Navy

Button Wrapper Red

Button Wrapper Blue

Button Wrapper Purple

Button Wrapper Orange

Button Wrapper White

Icon & Text Buttonsy

copy/paste file_copy

These buttons use Link Block and Text Link to combine two different fonts and CSS styles.

Paragraph Size

+ Link Block:  

Button Icon Wrapper

Style:  

C B Red 100

C T White

Inside:  

+Text Link:  

Button Icon Text

+Text Link for Icon:  

Button Icon Right/Left

Color

Icon Left

Icon Right

Button Wrapper Navy

Button Wrapper Red

Button Wrapper Blue

Button Wrapper Purple

Button Wrapper Orange

Button Wrapper White

Paragraph Size

+ Link Block:  

Button Icon Wrapper

Inside:  

+Text Link:  

Button Icon Text

+Text Link for Icon:  

Button Icon Right/Left

Color

Icon Left

Icon Right

Button Wrapper B Navy

Button Wrapper B Red

Button Wrapper B Blue

Button Wrapper Purple

Button Wrapper Orange

Button Wrapper White

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

XL

C T Navy 100

Heading

Heading 500

M

C T Navy 100

Heading

Paragraph

L

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

M

C T Navy 100

to

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

XL

C T Red 100

Heading

Heading 600

M

C T Red 100

Heading

Paragraph

M

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

M

C T Red 100

to

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

XL

C T Blue 100

Heading

Heading 600

M

C T Blue 100

Heading

Paragraph

S

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

M

C T Red 100

to

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

XL

C T Purple 100

Heading

Heading 600

M

C T Purple 100

Heading

Paragraph

L

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

M

C T Red 100

to

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

XL

C T Orange 100

Heading

Heading 600

M

C T Orange 100

Heading

Paragraph

M

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

M

C T Orange 100

to

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

XL

C T Black 100

Heading

Heading 600

M

C T Black 100

Heading

Paragraph

M

C T Black 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

M

C T Black 100

to

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

XL

C T White 100

C B Navy 100

Heading

Subheading

M

C T Navy 100

Subheading

Paragraph

S

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

XL

Emphasis

C T Red 100

Heading with emphasis text

Heading 700

L

Emphasis Bold

C T Red 100

Subheading with emphasis bold text

Heading 500

M

Emphasis

C T Red 100

Subheading with emphasis text

Square list

Paragraph

M

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

S

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

S

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

S

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.

Introduction

This design system uses Material Design's open_in_new icon font from Google. There is no need to upload SVGs into your assets panel.

Material Icons Fonts

In the Site Settings section of your Workspace you have to install these fonts:
  • Material Icons Outlined
  • Material Icons Filled
  • Material Icons Rounded

Icon font name and style

Font name

Class Name

Sample Copy Text

Sample

Material Icon Filled

Material Icon Filled

home
home

Material Icon Outlined

Material Icon Outlined

home
home

Material Icon Rounded

Material Icon Rounded

assignment
home

Sizes

font Class style name Size color

Class name

Size and Color

Sample Copy Text

Sample

Icon Filled

Icon XXXL

follow_the_signs
follow_the_signs

Icon Filled

Icon XXL

follow_the_signs
follow_the_signs

Icon Filled

Icon XL

follow_the_signs
follow_the_signs

Icon Filled

Icon L

follow_the_signs
follow_the_signs

Icon Filled

Icon M

follow_the_signs
follow_the_signs

Icon Filled

Icon S

follow_the_signs
follow_the_signs

Icon Filled

Icon XS

follow_the_signs
follow_the_signs

Icon Filled

Icon XXS

follow_the_signs
follow_the_signs

Colors

font Class style name Size color

Class name

Size and Color

Sample Copy Text

Sample

Material Icon Rounded

Icon XXXL

C T Navy 100

rocket_launch
rocket_launch

Material Icon Filled

Icon XXL

C T Red 100

https
https

Material Icon Rounded

Icon XL

C T Blue 100

perm_media
perm_media

Material Icon Outlined

Icon L

C T Purple 100

face_3
face_3

Material Icon Outlined

Icon M

C T Orange 100

star_rate
star_rate

Material Icon Filled

Icon S

C T Navy 60

print
print

Material Icon Rounded

Icon XS

C T Neutral 100

shopping_cart
shopping_cart

Material Icon Filled

Icon XXS

C T Red 100

play_circle
play_circle

Links

Paragraph Size

Class name

Sample

Sample

Simple text link - General

Link

Text link

Simple text link - Navy

Link Orange

Text link

Simple text link - Red

Link Red

Text link

Simple text link - Purple

Link Purple

Text link

Simple text link - Orange

Link Orange

Text link

Simple text link - White

Link White

Text link

Icon Links

copy/paste file_copy

These buttons use Link Block and Text Link to combine two different fonts and CSS styles.

Link structure>

+ Link Block:  

Link Wrapper Color

Inside:  

Link Icon

Inside:  

+Icon:  

Material Icon Rounded

+Text:  

Text Link

Color

Icon Left

Icon Right

Link Wrapper Navy

event
Link text
Link text
event

Link Wrapper Red

event
Link text
Link text
event

Link Wrapper Blue

event
Link text
Link text
event

Link Wrapper Purple

event
Link text
Link text
event

Link Wrapper Orange

event
Link text
Link text
event

Link Wrapper White

event
Link text
Link text
event

Spacing Scale

Component and typographic spacing is done in 4 pixel increments. A typical baseline grid is not used in typography. Instead, line heights are specified in 4 px increments, and spacing is measured from the text box's edges.

For components or sections, use the spacing scale. It creates acceptable spatial relationships for detail-level designs by using small increments. This scale is used and applied across all components and sections. By adding the following spacing classes to your components and sections, you can apply spacing to them.
‍
The system has the following accessible space:
  • 0px
  • 2px
  • 4px
  • 8px
  • 12px
  • 16px
  • 24px
  • 32px
  • 48px
  • 64px
  • 128px

Spacing Padding Classes

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. Nunc ut sem vitae risus tristique posuere.

Spacing Padding All

Space Padding size px

Class Name

Text Sample

Icon Sample

S P 0

space

open_with

S P 2

space

open_with

S P 4

space

open_with

S P 8

space

open_with

S P 12

space

open_with

S P 16

space

open_with

S P 24

space

open_with

S P 32

space

open_with

S P 48

space

open_with

S P 64

space

open_with

S P 128

space

open_with

Space Padding Top and Bottom

Space Padding Top size px

Class Name

Text Sample

Icon Sample

S P T 2

space
stop

S P T 4

space
stop

S P T 8

space
stop

S P T 12

space
stop

S P T 16

space
stop

S P T 24

space
stop

S P T 32

space
stop

S P T 48

space
stop

S P T 64

space
stop

S P T 128

space
stop

Space Padding bottom size px

Class Name

Text Sample

Icon Sample

S P B 2

space
stop

S P B 4

space
stop

S P B 8

space
stop

S P B 12

space
stop

S P B 16

space
stop

S P B 24

space
stop

S P B 32

space
stop

S P B 48

space
stop

S P B 64

space
stop

S P B 128

space
stop

Space Padding Left and Right

Space Padding Top size px

Class Name

Text Sample

S P L 2

space
stop

S P L 4

space
stop

S P L 8

space
stop

S P L 12

space
stop

S P L 16

space
stop

S P L 24

space
stop

S P L 32

space
stop

S P L 48

space
stop

S P L 64

space
stop

S P L 128

space
stop

Space Padding bottom size px

Class Name

Text & Icon Sample

S P R 2

space
stop

S P R 4

space
stop

S P R 8

space
stop

S P R 12

space
stop

S P R 16

space
stop

S P R 24

space
stop

S P R 32

space
stop

S P R 48

space
stop

S P R 64

space
stop

S P R 128

space
stop

Spacing Margin Classes

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. Nunc ut sem vitae risus tristique posuere.

Space Margin All

Space Padding size px

Class Name

Text Sample

Icon Sample

S M 0

space

open_with

S M 2

space

open_with

S M 4

space

open_with

S M 8

space

open_with

S M 12

space

open_with

S M 16

space

open_with

S M 24

space

open_with

S P 32

space

open_with

S M 48

space

open_with

S M 64

space

open_with

S M 128

space

open_with

Space Margin Top and Bottom

Space Padding Top size px

Class Name

Text Sample

Icon Sample

S M T 2

space

stop

S M T 4

space

stop

S M T 8

space

stop

S M T 12

space

stop

S M T 16

space

stop

S M T 24

space

stop

S M T 32

space
stop

S M T 48

space
stop

S M T 64

space
stop

S M T 128

space
stop

Space Padding bottom size px

Class Name

Text Sample

Icon Sample

S M B 2

space
stop

S M B 4

space

stop

S M B 8

space
stop

S M B 12

space
stop

S M B 16

space
stop

S M B 24

space
stop

S M B 32

space
stop

S M B 48

space
stop

S M B 64

space
stop

S M B 128

space
stop

Space Margin Left and Right

Space Padding Top size px

Class Name

Text Sample

S M L 2

space
stop

S M L 4

space
stop

S M L 8

space
stop

S M L 12

space
stop

S M L 16

space
stop

S M L 24

space
stop

S M L 32

space
stop

S M L 48

space
stop

S M L 64

space
stop

S M L 128

space
stop

Space Padding bottom size px

Class Name

Text & Icon Sample

S M R 2

space
stop

S M R 4

space
stop

S M R 8

space
stop

S M R 12

space
stop

S M R 16

space
stop

S M R 24

space
stop

S M R 32

space
stop

S M R 48

space
stop

S M R 64

space
stop

S M R 128

space
stop

Hierarchy

Use the typographic hierarchy system to establish a visual order of importance. Poppins and Bitter are available and accessible to download through Google Fonts. For alternative options available through Microsoft, please refer to the Typeface Fallback Option section. All typefaces are also available in italics.

Font Weight

Poppins Bold is used for headlines.

Heading size

Class name

Font Weight

Sample

Heading 800

800
Extra Bold

This is Extra Bold Heading

Heading 700

700
Bold

This is Bold Heading

Heading 600

600
Semi Bold

This is Semi Bold Heading

Heading 500

500
Medium

This is Medium Heading

Heading 400

400
Normal

This is Normal Heading

Heading 300

300
Light

This is Light Heading

Heading 200

300
Light

This is Light Heading

Font Size

Use the Font Weight with the Font Size to create different heading styles. Here are some examples.

Heading size

Class name

Font Weight

Sample

Heading 800

XXXL

800
Extra Bold

This is Extra Bold Heading

Heading 300

XXL

700
Bold

This is Bold Heading

Heading 600

XL

600
Semi Bold

This is Semi Bold Heading

Heading 500

L

500
Medium

This is Medium Heading

Heading 400

M

400
Normal

This is Normal Heading

Heading 300

S

300
Light

This is Light Heading

Heading 200

300
Light

This is Light Heading

Body text

Paragraph Size

Class name

Font

Sample

Paragraph

Bitter 400

This is Large (L) parapraph text. 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 500

Bitter 500

This is Large (L) parapraph text. 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 600

Bitter 600

This is the Default or Medium (M) parapraph text. 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 700

Bitter 700

This is Small (S) parapraph text. This is the Default or Medium (M) parapraph text. 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.

Size Body text

Paragraph Size

Class name

Font Size

Sample

Paragraph

L

1.125 rem
(18px)

This is Large (L) parapraph text. 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.

Default Paragraph
or

Paragraph

or

Paragraph

M

1 rem
(16 px)

This is the Default or Medium (M) parapraph text. 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

S

0.875 rem
(14 px)

This is Small (S) parapraph text. This is the Default or Medium (M) parapraph text. 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.

Lists

style List

Class name

Sample

Size & Color

Sample

Circle List

  • This is a list item
  • This is a list item
  • This is a list item

Circle List

Paragraph

L

C T Navy 100

  • This is a list item
  • This is a list item
  • This is a list item

Square List

  • This is a list item
  • This is a list item
  • This is a list item

Square List

Paragraph

M

C T Red 100

  • This is a list item
  • This is a list item
  • This is a list item

Number List

  • This is a list item
  • This is a list item
  • This is a list item

Number List

Paragraph

S

C T Blue 100

Emphasis

  • This is a list item
  • This is a list item
  • This is a list item

Letter List

  • This is a list item
  • This is a list item
  • This is a list item

Letter List

Paragraph

L

C T Orange 100

  • This is a list item
  • This is a list item
  • This is a list item

Roman Number List

  • This is a list item
  • This is a list item
  • This is a list item

Roman Number List

Paragraph

M

C T Purple 100

  • This is a list item
  • This is a list item
  • This is a list item

No Bullet List

  • This is a list item
  • This is a list item
  • This is a list item

Roman Number List

Paragraph

M

C T Navy 100

Emphasis Bols

  • This is a list item
  • This is a list item
  • This is a list item

horizontal list

Class name

Sample text inside of a div block

Circle List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Square List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Number List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Letter List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Roman Number List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

No Bullet List

List Horizontal

  • This is a list item
  • This is a list item
  • This is a list item

Lists with an icon

List with icon

Class name

Sample text inside of a div block

Icon List

  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • close
    This is a list item with an icon

T A R

  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • close
    This is a list item with an icon

Alignment

text aligned

Class name

Sample text inside of a div block

T A L

Text aligned  left.

T A C

Text aligned center.

T A R

Text aligned right.

Table

To create tables, use the Quick Stack. These are the best options for displaying flexible information on mobile, tablet, and desktop.

Quick stack

Quick Stack:  

Table Border

Header:  

Table header

Row:  

Table cell

Table header

Table header

Table header

Table header

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Quick stack

Quick Stack:  

Table Border

Header:  

Table header

C B Blue 20

Row none:  

Table cell

Row even:  

Table header

Table header

Table header

Table header

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Quick stack

Table header

Table header

Table header

Table header

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Quick stack

Table header

Table header

Table header

Table header

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell