Style Guide

This style guide page contains styles and components that are to be used throughout a website.

Typography

The different text sizes used throughout the site.

h1 - Title

This is a Header.

h2 - Heading (left aligned)

This is a Header.

h2 - heading (centered)

This is a Header.

Sub title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Large body text/paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

body text/Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Small body text/Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Quote

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

Name | Restaurant or Title Position
TEXT Link (lower caps)
Learn More
TEXT Link (ALL CAPS)
LEARN MORE

Colors

The different weights of greys and colours used throughout the website.

#f04649

#37a3b1

#fdc953

#95b43c

#575b7b

#ffe7e8

#f2fdff

#fff6e1

#f9ffe7

#f4f6ff

Buttons

Types of CTA buttons used throughout the website.

Primary

learn more

Secondary

Learn more

Grids

Different grid layouts to use across your site

4 Grid

3 Grid
2 Grid
2-1 Grid
1-2 Grid

Icons

Some icons used across the website. Contact Cal David for more icons.

restaurant point of sale icon
chat bubbles with a heart and a thumbs up
Mock up of online ordering page with pizza slice image, description text on the side and an order button
smart phone mock up showing a qr code
printer printing out an online pizza order reciept
mock up of google business listing
mock up of floppy disk showing save
green button with a black check mark over it
marketing funnel icon
yellow star icon appearing to be sparkling
yellow offer tag showing a percentage discount and a notification bubble with the number 1
House with hand holding a restaurant takeout bag
mock up of tablet with waitlist and a clock on the screen
Analog clock showing 3:00 o'clock
closed mail envelope showing one notification bubble
clipboard with notes on it, a microphone shape and a bubble with a fork and knife
tablet mock-up showing different 3rd party ordering channels in one screen
social media icons for facebook, instagram and twitter
Shopping cart with a green check mark inside of it
yellow coin shape with money sign at the center. Thumbs up shape on top left and upward trending arrow on the bottom right.
person on wheelchair shape
half of a wrench indicating technology branching out into three different customers

Forms

Our forms are used in third-party platforms like 'Typeform' and/or 'Marketo' and use HTML coding. Contact Erin Bauer for more info.

Tabs

Menu tabs inside a page. Would be cool to use if needed in a page. Check out Integration page for example!

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Section

This is an example of how to use sections (with a grid) within our landing pages.

Right: Title, Subtitle, CTA Button
Left: Graphic

Title here

Subtitle here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

CTA BUTTON
mock up of tablet, desktop computer and smart phone all showing a preview of a restaurant website