introduction
Welcome to the Saval Foodservice Interactive Style Guide! Here you will find brand assets, marketing materials, and brand guidelines. Please note, if any changes are made, they will be applied across the whole website.
A downloadable style guide can be found here.
If you have any questions about our style guide, please contact the Marketing Team.
colors
primarY
These are the colors featured in the Saval Foodservice primary logo.
secondary
These are the secondary colors we use for marketing materials, brand assets, and our website.
brand assets
Please see our Style Guide for directions on logo use and placement, brand application, photography style, and other branding guidelines.
Tagline:
local foodservice is better foodservice
Primary Full Color Logo (JPG):
This is the primary version of the Saval Foodservice logo, but there are a few guidelines for use. This logo should only be used on a black background preferably anchored to the top, sides, or bottom of the asset. This JPG includes the black background necessary for use.
Horizontal Black Logo (PNG):
This is an alternate version of the Saval Foodservice logo. This logo should only be used in cases where the full primary logo does not work (example: in black and white designs or cases where the logo cannot have a background color).
Horizontal White Logo (PNG):
This is an alternate version of the Saval Foodservice logo. This logo should only be used in cases where the full primary logo does not work (example: in black and white designs or cases where the logo cannot have a background color).
POS Examples:
These are some examples of marketing materials we give our Sales Team to distribute to customers when we are promoting products. Download our blank POS template here for your next promotion with Saval Foodservice.
typography
H1 – Meno Display
H2 – aktiv grotesk ex
H3 – Aktiv Grotesk
H4 – URW Din Condensed
H5 – aktiv grotesk ex
h6 – urw din condensed
Paragraph Text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Block Quote
changing styles
For the typography on the website, we use classes to change styles so that things can be unique without changing styles site wide. For example, if you place a heading into a layout, it will default to the color black. If you wanted to change that color to red, you would simply add a class/selector to that heading element named red and then change the color (if it does not change already – it SHOULD automatically change if its a common class). Same goes with bolding or italicizing text elements.
You can also highlight text within a text block and wrap it in a span to give a word or phrase unique styling within that text block, leaving the other characters unchanged. (Colors, bold, italics, etc.)
Below is a list of common classes you can use on all typographic elements.
buttons & ctas
changing styles
Buttons are styled by giving them a class. Button01 should be the default button, but we have created Button02 for instances where the background is dark.
In some instances, buttons need to be spaced differently than the default. Below you will find a list of common classes used to style buttons and what they do.
rich text block typography
H1 – Aktiv Grotesk Extrabold
H2 – urw din cond bold
H3 – Proxima Nova Regular
H4 – urw din cond bold
H5 – aktiv grotesk ex light
H6 – urw din cond light
Body Text: The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. Links look like this.
Block Quote: A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
blog typography
H1 – Aktiv Grotesk Extrabold
H2 – urw din cond bold
H3 – Proxima Nova Regular
H4 – urw din cond bold
H5 – aktiv grotesk ex light
H6 – urw din cond light
Body Text: The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. Links look like this.
Block Quote: A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!