Typography

Aa

Body (All Pages)

Montserrat

Aa

All Headings

Clesmont

Headings

Element

All H1 Headings

5.5rem

6rem

Element

All H2 Headings

4rem

4.5rem

Element

All H3 Headings

3rem

3.5rem

Element

All H4 Headings

2.4rem

2.8rem

Element

All H5 Headings

1.6rem

2rem

Element

All H6 Headings

1.2rem

1.5rem

Headings

Class

heading-1

5.5rem

6rem

Class

heading-2

4rem

4.5rem

Class

heading-3

3rem

3.5rem

Class

heading-4

2.4rem

2.8rem

Class

heading-5

1.6rem

2rem

Class

heading-6

1.2rem

1.5rem

Body

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.

All Paragraphs

1rem

1.4rem

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.

paragraph

1rem

1.4rem

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. 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.

paragraph-0.9

0.9rem

1.3rem

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. 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.

paragraph-1.25

1.25rem

1.8rem

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. 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.

paragraph-1.5

1.5rem

2rem

Unordered List Lorem Ipsum
Unordered List Lorem Ipsum
Unordered List Lorem Ipsum

All Unordered Lists

1rem

1.4rem

Unordered List Lorem Ipsum
Unordered List Lorem Ipsum
Unordered List Lorem Ipsum

list-unordered

list-item

1rem

1.4rem

Unordered List Lorem Ipsum
Unordered List Lorem Ipsum
Unordered List Lorem Ipsum

All Ordered Lists

1rem

1.4rem

Unordered List Lorem Ipsum
Unordered List Lorem Ipsum
Unordered List Lorem Ipsum

list-ordered

list-item

1rem

1.4rem

Text Block Lorem Ipsum

Body (All PAges)

1rem

1.4rem

Text Block Lorem Ipsum

text

1rem

1.4rem

Text Link Lorem Ipsum

All Links

1rem

1.4rem

link

1rem

1.4rem

Block Quote Lorem Ipsum

All Block Quotes

1.4rem

2rem

Block Quote Lorem Ipsum

block-quote

1.4rem

2rem

Text Block Lorem Ipsum

text-0.9

0.9rem

1.3rem

Text Block Lorem Ipsum

text-1.25

1.25rem

1.8rem

Text Block Lorem Ipsum

text-1.5

1.5rem

2rem

Text Block Lorem Ipsum

eyebrow

0.9rem

1.3rem

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

rich-text

Background Color

Primary

#0D86FF

bg-color-primary

Black

#222222

bg-color-black

Grey

#858585

bg-color-grey

Mid Grey

#F0F0F0

bg-color-midgrey

Light Grey

#F8F8F8

bg-color-lightgrey

White

#FFFFFF

bg-color-white

Text Color

Lorem Ipsum

Primary

#0D86FF

text-color-primary

Lorem Ipsum

Black

#222222

text-color-black

Lorem Ipsum

Grey

#858585

text-color-grey

Lorem Ipsum

Mid Grey

#F0F0F0

text-color-midgrey

Lorem Ipsum

Light Grey

#F8F8F8

text-color-lightgrey

Lorem Ipsum

White

#FFFFFF

text-color-white

Text Weights

Lorem Ipsum

Extrabold

text-weight-extrabold

Lorem Ipsum

Bold

text-weight-bold

Lorem Ipsum

Medium

text-weight-medium

Lorem Ipsum

Normal

text-weight-normal

Lorem Ipsum

Light

text-weight-light

Lorem Ipsum

Thin

text-weight-thin

Text Alignments

Lorem Ipsum

left

text-align-left

Lorem Ipsum

Middle

text-align-middle

Lorem Ipsum

Right

text-align-right

Buttons

Button

Button Version 1

button

Button

Button Version 2

button

version-2

Button

Button Version 3

button

version-3

Button

Button Version 4

button

version-4

Button

Button Version 5

button

version-5

Button

Button Version 6

button

version-6

Layout

container

container-large

container-medium

max-width-large

max-width-medium

max-width-small

Rows

row-0

row-1

row-2

row-3

row-4

row-5

Rows Flex

row-0-flex

row-1-flex

row-2-flex

row-3-flex

row-4-flex

row-5-flex

Columns

col-0

col-1

col-2

col-3

col-4

col-5

Columns Flex

col-0-flex

col-1-flex

col-2-flex

col-3-flex

col-4-flex

col-5-flex

Margin

margin-1-top

margin-2-top

margin-3-top

margin-1-bottom

margin-2-bottom

margin-3-bottom

margin-1-left

margin-2-left

margin-3-left

margin-1-right

margin-2-right

margin-3-right

margin-1-all

margin-2-all

margin-3-all

Padding

padding-1-top

padding-2-top

padding-3-top

padding-1-bottom

padding-2-bottom

padding-3-bottom

padding-1-left

padding-2-left

padding-3-left

padding-1-right

padding-2-right

padding-3-right

padding-1-all

padding-2-all

padding-3-all

Typography

Headings

Element

Element

Element

Element

Element

Element

Headings

Class

Class

Class

Class

Class

Class

Body

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Background Color

Primary

Black

Grey

Mid Grey

Light Grey

White

Text Color

Primary

Black

Grey

Mid Grey

Light Grey

White

Text Weights

Extrabold

Bold

Medium

Normal

Light

Thin

Text Alignments

left

Middle

Right

Buttons

Button Version 1

Button Version 2

Button Version 3

Button Version 4

Button Version 5

Button Version 6

Layout

Rows

Rows Flex

Columns

Columns Flex

Margin

Padding

Fostering a Future where Artificial Intelligence and Ethics Coexist Harmoniously

Contact

Follow us

Adress