Flavor Fusion Fest - Web Style Guide

Color Palette

Primary – Pure Red
#FF0000

Accessible Red
#EB0000

Secondary – Orangish White
#FCF3E3

Typography

Taste Begins with Ingredients

Heading 1 (Page Titles) | Font: Jost / Weight: 700 / Size: 56px/ Line Height: 1.2em / Color: #303133

Lorem Ipsum Dolor

Heading 2 | Font: Jost / Weight: 700 (Bold) / Size 36px / Line Height: 1.2em / Color: #303133

Lorem Ipsum Dolor

Heading 3 | Font: Jost / Weight: 600 (Medium) / Size: 24px / Line Height: 1.2em / Color: #303133

Lorem Ipsum Dolor

Heading 4 | Font: Jost / Weight: Bold (600) / Size: 18px / Line Height: 1.2em / Color: #303133
Lorem Ipsum Dolor
Heading 5 | Font: Jost / Weight: 500 (Book) / Size: 20px / Line Height: 1.2em / Color: #303133
Lorem Ipsum Dolor
Heading 6 | Font: Roboto / Weight: 600 (Bold) / Size: 16px / Line Height: 1.5em / Color: #303133
Lorem Ipsum Dolor
Title 1 | Font: Jost / Weight: 600 / Size: 56px / Line Height: 1.2em / Color: #303133
Lorem Ipsum Dolor
Title 2 | Font: Jost / Weight: 700 (Bold) / Size: 36px / Line Height: 1.2em / Color: #303133

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lead Paragraph | Font: Jost / Weight: Normal / Size: 24px / Line Height: 1.3em / Color: #303133

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Paragraph | Font: Roboto / Weight: Normal / Size: 16px / Line Height: 1.4em / Color: #303133

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Small Text | Font: Roboto / Weight: Normal / Size: 13px / Line Height: XXem / Color: #303133

Lorem ipsum dolor sit amet.

Accent Text | Font: Roboto / Weight: 500 / Size: 18px / Line Height: 1.5em / Color: #303133
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit.
  • Proin gravida dolor sit amet lacus accumsan
  • Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis.
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit.
  3. Proin gravida dolor sit amet lacus accumsan
  4. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis.
Lists | Font: Roboto / Weight: Normal / Size: 16px / Line Height: 1.4em / Color: #303133
[contact-form-7 404 "Not Found"]

Panel Examples

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Image Gallery