Styleguide

Colors

The color scheme aims to be simple without too many variations.

ColorHexName
 #3E3E3EHeading Gray
 #717171Paragraph Gray
 #8cc63fPrimary
 #29abe2Accent
 #FFFFFFWhite

Typography

We use “Roboto Condense” as a primary typeface. Listed below are all default styles for headings (Breakpoint / font-size / line-height / letter-spacing).

Heading 1
Heading 1

(Desktop 60px/1.3/0px) (Mobile 60px/1.3/0px)

Heading 2
Heading 2

(Desktop 39px/1.3/0px) (Mobile 39px/1.3/0px)

Heading 3
Heading 3

(Desktop 32px/1.3/0px) (Mobile 32px/1.3/0px)

Heading 4
Heading 4

(Desktop 30px/1.3/0px) (Mobile 23px/1.3/0px)

Heading 5
Heading 5

(Desktop 24px/1.3/0px) (Mobile 20px/1.3/0px)

Heading 6
Heading 6

(Desktop 20px/1.3/0px) (Mobile 17px/1.3/0px)


Paragraph

(Desktop 16px/1.65/0px) (Mobile 16px/1.65/0px)

(Desktop Block Quote 17.5px/1.65/0px) (Mobile Block Quote 17.5px/1.65/0px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

“Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


Lists

Ordered List

  1. List item one.
  2. List item two.
  3. List item three.
  4. List item four.
  5. List item five.
  6. List item six.

Unordered List

  • List item one.
  • List item two.
  • List item three.
  • List item four.
  • List item five.
  • List item six.

Text Links

Default Text Link


Buttons

(Desktop 15px/1.425/0px) (Mobile 15px/1.425/0px)

(Desktop CTA 18px/1.425/0px) (Mobile CTA 18px/1.425/0px)