Styleguide

This style guide page contains styles and components used through the website.
You can change any style from this page and it will be updated throughout the site.

I. Typefaces & Color Palette

A. Typefaces

The font used in this template are Capitana, Wayfinder, and Metalista, all available on Adobe Fonts.

B. Color Palette

Porcelain

#E9E1DE

Dusk

#CBB5AD

Eternity

#2C2E29

Ca Phe

#64381C

Sanguine

#9F2F2B

Cinnabar

#DD4F42

California

#E89745

Honey

#E4B545

Navy

#213460

Immortal

#3B68A4

II. Text elements

A. Headings

Heading 1

Properties : 15.625EM - 80%

Heading 2

Properties : 5.3EM - 80%

Heading 3

Properties : 4.375 - 120%

Heading 4

Properties : 3.3EM - 120%

Heading 5

Properties : 2.65EM - 120%

Heading 6

Properties : 2EM - 120%

B. Rich Text Element

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil.

Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit ea laudantium autem et molestiae voluptatibus. In natus eveniet qui reiciendis sequi a dolorem accusantium!

Nam quaerat cumque

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil.

Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit ea laudantium autem et molestiae voluptatibus. In natus eveniet qui reiciendis sequi a dolorem accusantium!

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil.

Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit ea laudantium autem et molestiae voluptatibus. In natus eveniet qui reiciendis sequi a dolorem accusantium!

Lorem ipsum sim dolor amet nec consegir

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

C. Useful Text Classes

This is a text element with a large size

Default paragraph looks like this

This is a text element with a small size

This is a text element with a very small size

This a text align on the left

This a text align on the center

This a text align on the right

III. Buttons

Button Default

Button default

Button Yellow Background

Button Oval

scroll
scroll