Theme Styles

Consortix Style Guide

Colors

Secondary Colors

Secondary 1
#00416b
Secondary 2
#4c2f92
Secondary 3
#00aef0
Secondary 4
#1b4797
Secondary 5
#262167
Secondary 5
#10304f
Secondary 5
#ff398c
Secondary 5
#f1dc28
Secondary 5
#f15823

Neutral Colors

Neutral 800
#13111A
Neutral 700
#302C3F
Neutral 600
#5E5B71
Neutral 500
#88849C
Neutral 400
#B7B4C7
Neutral 300
#D9D7E6
Neutral 200
#F5F4FA

Typography

Special Text

Display 1 Text

Display 2 Text

Display 3 Text

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading H2 - Aa Bb Cc Dd

Heading 2 - 2.rem/1.182em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 1.5rem/1.500em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 1.2rem/1.273em
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/1.333em
Heading H6 - Aa Bb Cc Dd
Heading 6 - 14px/1.375em

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.

Paragraph Small - 15px/1.600em

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 Default - 16px/1.667em

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 Large - 20px/1.583em
Link - Lorem ipsum dolor sit amet
Links

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing.
Bullet List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing.
Numbered List

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large