Get Started With Trebas

Color Palette

Primary
#88CCCC

Yellow
#F6A40B

Orange
#EC6B21

Purple
#785289

Purple Dark
#564366

Blue
#007AAE

Blue Dark
#114C81

Grey 50
#EBEBEB

Grey 100
#C2C2C2

Grey 200
#A4A5A4

Grey 300
#7B7C7A

Grey 400
#616261

Grey 500
#3A3B39

Black
#181918

White
#FFFFFF

Display

Display Bold

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Regular Body Font Variations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna sapien, sodales eget urna vel, tempor maximus tortor. Vestibulum dignissimullamcorper hyperlink example libero ac tristique. Suspendisse id cursus sapien, sit amet porta leo. Sed id nunc massa.

Curabitur iaculis, dui in volutpat sollicitudin, ante justo porta massa, sed gravida lacus nunc non arcu. Etiam sed libero mauris. Aliquam non pulvinar felis. Aliquam magna dui, posuere pulvinar nulla eleifend, eleifend blandit metus.

Pellentesque tincidunt maximus pretium. Mauris vehicula, orci sit amet pharetra scelerisque, libero arcu suscipit lacus, sit amet rhoncus magna leo eget purus. Nunc consequat augue sit amet commodo faucibus. Sed vel neque sit amet ex pharetra sollicitudin ac in est.

Large Body Font Variations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna sapien, sodales eget urna vel, tempor maximus tortor. Vestibulum dignissim ullamcorper hyperlink example libero ac tristique. Suspendisse id cursus sapien, sit amet porta leo. Sed id nunc massa.

Curabitur iaculis, dui in volutpat sollicitudin, ante justo porta massa, sed gravida lacus nunc non arcu. Etiam sed libero mauris. Aliquam non pulvinar felis. Aliquam magna dui, posuere pulvinar nulla eleifend, eleifend blandit metus.

Pellentesque tincidunt maximus pretium. Mauris vehicula, orci sit amet pharetra scelerisque, libero arcu suscipit lacus, sit amet rhoncus magna leo eget purus. Nunc consequat augue sit amet commodo faucibus. Sed vel neque sit amet ex pharetra sollicitudin ac in est.

Small Body Font Variations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna sapien, sodales eget urna vel, tempor maximus tortor. Vestibulum dignissim ullamcorper hyperlink example libero ac tristique. Suspendisse id cursus sapien, sit amet porta leo. Sed id nunc massa.

Curabitur iaculis, dui in volutpat sollicitudin, ante justo porta massa, sed gravida lacus nunc non arcu. Etiam sed libero mauris. Aliquam non pulvinar felis. Aliquam magna dui, posuere pulvinar nulla eleifend, eleifend blandit metus.

Pellentesque tincidunt maximus pretium. Mauris vehicula, orci sit amet pharetra scelerisque, libero arcu suscipit lacus, sit amet rhoncus magna leo eget purus. Nunc consequat augue sit amet commodo faucibus. Sed vel neque sit amet ex pharetra sollicitudin ac in est.

Caption Text

Caption/Citation/Byline/Category

Blockquote

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna sapien, sodales eget urna vel, tempor maximus tortor. Vestibulum dignissim ullamcorper libero ac tristique."

Firstname Lastname

Lists

Unordered List

  • List Item One
  • List Item Two
  • List Item Three
  • List Item Four

Ordered List

  1. List Item One
  2. List Item Two
  3. List Item Three
  4. List Item Four

Buttons

Primary

Secondary

Secondary Light

Ghost

Ghost Light

Column Layout