Style Guide

This is a set of guidelines and strategies to help build Calvary's website.

Typeface

These fonts complement each other and help to establish a professional and sophisticated aesthetic for the website.

Florensans

The primary font is Florensans. You can download the webfont in the link bellow.

Lufga

The secondary font is Lufga. You can download the webfont in the link bellow.

Heading Styles

Heading 1

Sample

H1

Heading 2

Sample

H2

Heading 3

Sample

H3

Heading 4

Sample

H4

Heading 5

Sample

H5

Heading 6

Sample

H6

Text Classes

Text Size xdisplay

Sample text helps you understand how real text may look.

Text Size display

Sample text helps you understand how real text may look.

Text Size xxhuge

Sample text helps you understand how real text may look.

Text Size xhuge

Sample text helps you understand how real text may look.

Text Size huge

Sample text helps you understand how real text may look.

Text Size xxlarge

Sample text helps you understand how real text may look.

Text Size xlarge

Sample text helps you understand how real text may look.

Text Size large

Sample text helps you understand how real text may look.

Text Size Medium

Sample text helps you understand how real text may look.

Text Size Regular

Sample text helps you understand how real text may look.

Text Size Small

Sample text helps you understand how real text may look.

Text Size tiny

Sample text helps you understand how real text may look.

Text Colors

Text color Cream

Sample text helps you understand how real text may look.

Text color Tan

Sample text helps you understand how real text may look.

Text color Caribbean

Sample text helps you understand how real text may look.

Text color Royal Blue

Sample text helps you understand how real text may look.

Text color Kelp

Sample text helps you understand how real text may look.

Text color Orange

Sample text helps you understand how real text may look.

Text color Cumin

Sample text helps you understand how real text may look.

Text color Garden

Sample text helps you understand how real text may look.

Text color Creamy Yellow

Sample text helps you understand how real text may look.

Text color Pink Orchid

Sample text helps you understand how real text may look.

Text Color Roman Red

Sample text helps you understand how real text may look.

Text Color Black

Sample text helps you understand how real text may look.

Text Color White

Sample text helps you understand how real text may look.

Text Color 800

Sample text helps you understand how real text may look.

Text Color 700

Sample text helps you understand how real text may look.

Text Weights

Text Weight Bold

Text Weights Bold

Text Weight Regular

Text Weights Regular

Text Weight Light

Text Weights Light

Text Weight extra light

Text Weights Light

Color Palette

Black

White

Cream

Tan

Caribbean

Royal Blue

Kelp

Orange

Cumin

Garden

Creamy Yellow

Pink Orchid

Roman Red

Color 800

Color 700

Do not touch*

Rich Text

Rich Text

H1 giant text.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Heading 2: big text example of h2.

Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
Lorem ipsum dolor sit amet, consectetur adi

Heading 3: big text example of h3.

Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
Lorem ipsum dolor sit amet, consectetur adi

Heading 4: Big text example of h4. Two lines of h4.

Heading 5: heading 5 big example of heading 5 and to see it on two lines of text.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Heading 6: heading 6 big example of heading 6 and to see it on two lines of text. heading 5 big example of heading 5 and to see it on two lines of text.heading 5 big example of heading 5 and to see it on two lines of text.heading 5 big example of heading 5 and to see it on two lines of text.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

‍

Project Image — Caption