Style Guides

#1a2b45

Light

Lighter

#eb978a

Light

Lighter

#f6e4d6

Light

Lighter


Hero

Headline used in a hero section, it is an h1 with a class of "mega-title" and it is 44px

This is a paragraph that is used under the hero section, it is a p with a class of "hero" 16px

Headline: 44px, class="mega-title"
Paragraph: 16px

Headline 1

Nullam nostrud proin. Accumsan optio dapibus repudiandae proin feugiat mus.

Posuere eum quis modi, nullam fringilla? Earum egestas unde molestiae aliqua vel excepturi eum feugiat habitant excepteur recusandae. Quisquam odio? Vivamus consectetuer. Consequat tempor. Hymenaeos eligendi maxime quibusdam lorem sed.

Headline: 34px, class="h1 text--primary"
Paragraph: 16px, class="h1 text--primary"

Headline 2

Nullam nostrud proin. Accumsan optio dapibus repudiandae proin feugiat mus.

Posuere eum quis modi, nullam fringilla? Earum egestas unde molestiae aliqua vel excepturi eum feugiat habitant excepteur recusandae. Quisquam odio? Vivamus consectetuer. Consequat tempor. Hymenaeos eligendi maxime quibusdam lorem sed.

Headline: 30px, class="h2 text--primary"
Paragraph: 16px, class="h2 text--primary"

Headline 3

Occaecat class eos! Nemo sapien urna, reprehenderit, mauris, porta laboris.

Posuere eum quis modi, nullam fringilla? Earum egestas unde molestiae aliqua vel excepturi eum feugiat habitant excepteur recusandae. Quisquam odio? Vivamus consectetuer. Consequat tempor. Hymenaeos eligendi maxime quibusdam lorem sed.

Headline: 24px, class="h3 text--primary"
Paragraph: 16px, class="h3 text--primary"

Headline 4

Per. Ullamcorper netus, mattis, lacus ante accusamus ac! Senectus mollitia.

Posuere eum quis modi, nullam fringilla? Earum egestas unde molestiae aliqua vel excepturi eum feugiat habitant excepteur recusandae. Quisquam odio? Vivamus consectetuer. Consequat tempor. Hymenaeos eligendi maxime quibusdam lorem sed.

Headline: 20px, class="h4 text--primary"
Paragraph: 16px, class="h4 text--primary"

Headline 5
This is the headline used in a hero section, it is an h1 with a class of "hero" and it is 16px

Posuere eum quis modi, nullam fringilla? Earum egestas unde molestiae aliqua vel excepturi eum feugiat habitant excepteur recusandae. Quisquam odio? Vivamus consectetuer. Consequat tempor. Hymenaeos eligendi maxime quibusdam lorem sed.

Headline: 16px, class="h5 text--primary-light"
Paragraph: 16px, class="h5 text--primary"

Headline 6
This is the headline used in a hero section, it is an h1 with a class of "hero" and it is 14px

Posuere eum quis modi, nullam fringilla? Earum egestas unde molestiae aliqua vel excepturi eum feugiat habitant excepteur recusandae. Quisquam odio? Vivamus consectetuer. Consequat tempor. Hymenaeos eligendi maxime quibusdam lorem sed.

Headline: 14px, class="h6 text--primary-lighter"
Paragraph: 16px, class="h6 text--primary"