Website 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.
Headings
h1 - XxLarge
Size - 60px/70px
class name (headline-xxlarge)
Big boi headline.
h2 - XLarge
Size - 50px/60px
class name (headline-xlarge)
Little boi headline.
h3 - Large
Size - 40px/50px
class name (headline-large)
Show mangled quartz flip vibe exactly.
h4 - Standard
Size - 32px/40px
class name (headline-standard)
The five boxing wizards jump quickly.
h5 - SMALL
Size - 24px/30px
class name (headline-small)
The wizard quickly jinxed the gnomes before they vaporized.
h6 - xsmall
Size - 16px/20px
class name (headline-xsmall)
The quick brown fox jumps over the lazy dog.
Subheadings
Subhead 1 - xxxlarge
Size - 32px/38px
class name (subhead-xxxlarge)
Pack my red box with five dozen quality jugs.
Subhead 2 - xxlarge
Size - 24px/30px
class name (subhead-xxlarge)
The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs.
Subhead 3 - xlarge
Size - 20px/26px
class name (subhead-xlarge)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog.
Subhead 4 - large
Size - 16px/20px
class name (subhead-large)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog. The wizard quickly jinxed the gnomes before they vaporized.
Subhead 5 - Medium
Size - 1.1 rem/1.2 -
class name (subhead-medium)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog. The wizard quickly jinxed the gnomes before they vaporized.
Subhead 6 - standard
Size - 1 rem/1.5 -
class name (subhead-standard)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog. The wizard quickly jinxed the gnomes before they vaporized.
Subhead 7 - small
Size - 0.9 rem/1.5 -
class name (subhead-medium)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog. The wizard quickly jinxed the gnomes before they vaporized.
Body
Body 1 - xlarge
Size - 20px/30px
class name (paragraph-xlarge)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog. The wizard quickly jinxed the gnomes before they vaporized.
Body 2 - large
Size - 18px/28px
class name (paragraph-large)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog. The wizard quickly jinxed the gnomes before they vaporized.
Body 3 - medium
Size - 16px/25px
class name (paragraph-medium)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog. The wizard quickly jinxed the gnomes before they vaporized.
Quote
Quote - xxlarge
Size - 24px/30px
class name (quote-paragraph-xxlarge)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog. The wizard quickly jinxed the gnomes before they vaporized.
Quote - xlarge
Size - 20px/25px
class name (quote-paragraph-xlarge)
Show mangled quartz flip vibe exactly. The five boxing wizards jump quickly. Pack my red box with five dozen quality jugs. The quick brown fox jumps over the lazy dog. The wizard quickly jinxed the gnomes before they vaporized.
Colors
The different weights of brand colors and grays used throughout the website.
Core colors
Raspberry
#9e1c42
Dark Raspberry
#cf6a5f
Ocean
#2d798f
Dark Ocean
#cf6a5f
Navy
#0a202f
True neutrals
Ghost white
#f9f9f9
Graphite
#1E1919
Base colors
Seafom
#dfeaea
Light seafoam
#F7FDFD
Mushroom
#decfcd
Light mushroom
#efefef
Accent colors
Brighter Aqua
#51e2ef
Berry
#e24745
Gradients
Raspberry & Dark Raspberry
#9e1c42
#420618
Ocean & Navy
#2d798f
#21393e
Blank & Seafoam
#dfeaea
Blank & Mushroom
#decfcd
Gray scale
100
#F5F5F5
200
#EEE
300
#E0E0E0
400
#CCC
500
#9E9E9E
700
#616161
Buttons
Types of CTA buttons used throughout the website.
Testimonials
Layout for client testimonials.
"Looking back on how we do business and how we are doing it now, I almost feel like if you don't have technology like Popmenu you're going to be left behind."
Stats
Layouts for client testimonials.
Max’s Restaurant
We have worked together for many years. Their customer service is second to none, and consistently outstanding, exceeding my expectations every time."
Grids
Different grid layouts to use across your site
4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
Icons
Line art icons that represents our company’s capabilities. Icons are used when a product illustration might not be appropriate. Contact Cal David for more icons.
Mockups
Only used our custom designed generic devices mockups when showcasing/implementing a website/product sample into a device mockup(s).
Forms
Our forms are used in third-party platforms like 'Typeform' and/or 'Marketo' and use HTML coding. Contact Erin Bauer for more info.
You don't have to grow it alone. Get a free demo today!
20-minute demo, no pressure!
Tabs
Menu tabs inside a page. Would be cool to use if needed in a page.
Section
This is an example of how to use sections (with a grid) within our landing pages.
Right: Title, Subtitle, CTA Button
Left: Graphic
Maximum growth for restaurants.
Minimum effort.
Our tech makes it easy to grow your business...so you can focus on great hospitality.
Schedule a demo20 minutes, no pressure!