Interactive Style Guide

introduction

Welcome to the Saval Foodservice style guide! Here you will find web 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. (Will link when it's done)

If you have any questions about this style guide or your website in general, please contact Person Person at example@domain.com.

Add form here to contact Marketing Department?

colors
primarY
Gold
copied!
#ecd400
secondary
Floral
White
#f2f1eb
Maroon
#7a0219
Dark
Olive
Green
#477345
Midnight
Blue
#1d3140
Light
Blue
#a0bfc9
Dark
Grey
#acaeb0
typography

H1 – Meno Display

size:42, height:50, font-weight:900 (black), letter-spacing:0.75px

H2 – aktiv grotesk ex

size:28, height:34, font-weight:300 (light), letter-spacing:6px

H3 – Aktiv Grotesk

size:28, height:30, font-weight:800 (extra bold), letter-spacing:0.25px

H4 – URW Din Condensed

size:25, height:25, font-weight:700 (bold), letter-spacing:1px
H5 – aktiv grotesk ex
size:18, height:26, font-weight:300 (light), letter-spacing:3px
h6 – urw din condensed
size:16, height:16, font-weight:400 (normal), letter-spacing:0.75px

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.

font:proxima nova, size:16, height:26, font-weight:400 (normal)
Block Quote
font:proxima nova, size:16, height:26, font-weight:300 (light), style:italic, border-left:gold 5px
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.

bold
italic
smallMargin: reduces bottom margin to 5px
noMargin: removes bottom margin
center: changes paragraph alignment to center
right: changes paragraph alignment to right
all caps
lowercase
red
maroon
dark olive green
midnight blue
light blue
dark grey
white
floral white
gold
onDark: use for text links on dark backgrounds
brand assets

Write up an overview of the logos. Want to include examples of use, especially for the full color primary. What other assets could/should go in this section?

Slogan:

local foodservice is better foodservice

Primary Full Color Logo:

Saval Foodservice Full Color Logo

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 OR if it is situated on the side or corner of a page/document.

Horizontal Black Logo:

Saval Foodservice Black Logo

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 OR if it is situated on the side or corner of a page/document.

Horizontal White Logo:

Saval Foodservice White Logo

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 OR if it is situated on the side or corner of a page/document.

buttons & ctas
Button Text
font:urw din condensed, size:20, height:20, font-weight:700 (bold), color:red
class/selector: Button01
Button Text
font:urw din condensed, size:20, height:20, font-weight:700 (bold), color:floral white
class/selector: Button02
Text Link
font:proxima nova, size:16, height:26, font-weight:400 (normal), color:red
Text Link
font:proxima nova, size:16, height:26, font-weight:400 (normal), color:gold
class/selector: onDark
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.

spaced-vert: adds top and bottom margin of 10px
spaced-horiz: adds left and right margin of 25px
rich text block
no class/selector needed

What’s a Rich Text element?

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.

Static and dynamic content editing

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!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

rich text block for cms items
class/selector: rich-text-block, blog-text

What’s a Rich Text element?

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.

Static and dynamic content editing

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!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.