01 Typography

Fonts

For Heading

Barlow Semi Condensed

For Base

Barlow Semi Condensed

Typeface

H1 - Heading Title - 40px

H2 - Heading Title - 30px

H3 - Heading Title - 22px

H4 - Heading Title - 18px

H5 - Heading Title - 16px
H6 - Heading Title - 14px

Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu lacus imperdiet, cursus erat vitae, dictum onsectetur adipiscing elit. Fusce eu lacus impsus erat vitae, dictum nusmod sed nunc. Proin vel rhoncus maurisuisque mattism ipsum dolor sit rdiet, cursd nunc.

Lead

Consectetur adipiscing elit. Fusce eu lacus imperdiet, cursus erat vitae, dictum is et euismod sedroin vel rhoncus muisque mattis dictum etiarem ipsum dolor sit amet nuncroin vel rhoncus maurisuisque mattism.

Dropcap

Dropcap adipiscing elit. Fusce eu lacus imperdiet, cursus erat vitae, dictum is et euismod sedroin servel rhoncus muisque mattis dictum etiarem ipsum dolor sit amet nuncroin vel rhoncus muisque mattis dictum esque matum etiarem ipsum dolamet. Vonsectetur adipiscing elit. Fusce eu lacus imperdiet, cursus erat vitae, dictum is et euismod one sedroin vel rhoncurhoncus muisque mattis dictum etiarem muisque mattis dictum etiarem.Consectetur adipiscing elit. Fusce eu lacus imperdiet, cursus erat vitae, dictum is et euismod sedroin vel rhoncus muisque mattis dictum etiarem ipsum dolor sit amet nuncroin vel rhoncus maurisuisque mattism.

List

Bootsrap Unordered

  • Dolor pulvinar etiamseron desons erons.
  • Sagittis lorem eleifend eronser serons.
  • Felis feugiat dolore viverra beones derns.
  • Dolor pulvinar etiam meons itsone.

Bootstrap list Ordered

  1. Dolor pulvinar etiamseron desons erons.
  2. Sagittis lorem eleifend eronser serons.
  3. Felis feugiat dolore viverra beones derns.
  4. Dolor pulvinar etiam meons itsone.

Bootsrap list Styled

  • Dolor pulvinar etiamseron desons erons.
  • Sagittis lorem eleifend eronser serons.
  • Felis feugiat dolore viverra beones derns.
  • Dolor pulvinar etiam meons itsone.

Bootsrap list Styled

  • Dolor pulvinar etiamseron desons erons.
  • Sagittis lorem eleifend eronser serons.
  • Felis feugiat dolore viverra beones derns.
  • Dolor pulvinar etiam meons itsone.

Blockquote

“Tristique non neque id act horinc conditum laoreeted orci turpis eleifenddonec tortor sed porta ultrices risus a nunc consectetur.”
“Suspendisse vitae diam em pulvinar egetdolno teaecenas ultrices ipsum notor molestie blanditnulla venenatis elementum lacus ut sollicitudin. Duis tristique dapibus odio.”
“Donec luctus elit nec libero egestas, ut mollis eros sagitrbi ac lacus at tuo sit amet euismod vel nisi nec vivertiam interdum consequat diam pharetra rutrum.”

- Unknown Person

02 Color Palette

Default

#ce0058

Hex Color:
#7f0035

Hex Color:
#a30045

Hex Color:
#db2c76

Hex Color:
#e1538f

Primary

#06131a

Hex Color:
#000304

Hex Color:
#01090e

Hex Color:
#0e1f29

Hex Color:
#1b2f39

Secondary

#03cad6

Hex Color:
#007b81

Hex Color:
#01b0b8

Hex Color:
#2dd2da

Hex Color:
#58dae0

Heading

#06131a

Hex Color:
#000304

Hex Color:
#01090e

Hex Color:
#0e1f29

Hex Color:
#1b2f39

Base

#50595e

Hex Color:
#1c2529

Hex Color:
#374044

Hex Color:
#6a7277

Hex Color:
#8b9194


04 Form Elements

             
             

04 Tables

Default Table

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Rows

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

05 Social Media