Chapel Grilleri Web Style Guide

Color Palette

Primary
#434244

Secondary
#917C4E

Accent
#B69C62

Background 1
#F7F7F6

Background 2
#EFEEEB

Background 3
#5B717D

Light Overlay
#FFFFFFBD

Dark Overlay 1
#00000080

Dark Overlay 2
#000000BD

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

Text
#5c5c5c

Typography

Lorem Ipsum Dolor

Heading 1 (Page Titles) | Font: Calibri / Weight: 700 / Size: 32px / Line Height: 1.2em / Color: #000000

Lorem Ipsum Dolor

Heading 2 | Font: Calibri / Weight: 600 / Size: 22px / Line Height: 1.2em / Color: #000000

Lorem Ipsum Dolor

Heading 3 | Font: Calibri / Weight: Default / Size: 19px / Line Height: 1.2em / Color: #000000

Lorem Ipsum Dolor

Heading 4 | Font: Calibri / Weight: 600 / Size: 18px / Line Height: 1.2em / Color: #000000
Lorem Ipsum Dolor
Heading 5 | Font: Calibri / Weight: Default / Size: 16px / Line Height: 1em / Color: #000000
Lorem Ipsum Dolor
Heading 6 | Font: Calibri / Weight: Bold / Size: 15px / Line Height: 1em / Color: #000000
Lorem Ipsum Dolor
Title 1 | Font: ITC Fenice Pro / Weight: Default / Size: 32px / Line Height: 2.2em / Color: #5c5c5c
Lorem Ipsum Dolor
Title 2 | Font: Calibri / Weight: Default/ Size: 32px / Line Height: 2em / Color: #5c5c5c

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: Calibri / Weight: 400 / Size: 18px / Line Height: 1.5em / Color: #5c5c5c

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: Calibri / Weight: Default / Size: 16px / Line Height: 1.5em / Color: #5c5c5c

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: Calibri / Weight: Default / Size: 13px / Line Height: 1.3em / Color: #5c5c5c

Lorem ipsum dolor sit amet.

Accent Text | Font: Calibri / Weight: 500 / Size: 16px / Line Height: 1.5em / Color: #5c5c5c
  • 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: Calibri / Weight: Default / Size: 16px / Line Height: 1.5em / Color: #5c5c5c

Accessible Buttons

There needs to be a visible change on hover & focus. Color change is not sufficient. Pick one variation from the options below for each client.

Forms

Inquire Now

Required fields are denoted with an asterisk (*).

Panel Examples

Lorem Ipsum Dolor

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.

Lorem Ipsum Dolor

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

Image Gallery