Post on 20-Aug-2020
transcript
DESIGN SYSTEM
VERSION 2.2
Brand Style Guide
Preat Corporation
1.0 Introduction
Logo & Brand Identity GuidelinesPreat Corporation
The brand style guide communicates design standards to our group as a whole. Having this document to reference for expected standards will make the lives of designers, writers, and developers much easier and give them a solid framework to use as a starting point for their work.
Style guides support marketing initiatives by ensuring that all messaging is relevant and related to Preat Corporation’s goals. Referencing this guide ensures that content distinguishes us from competitors, and is cohesive. This cohesion is important because it helps establish a strong brand voice that resonates with the audience, which is essential for building brand awareness. Over time, that awareness and consistency build trust.
Purpose
2.0 Preat Logo
Logo & Brand Identity GuidelinesPreat Corporation
Logo Options
Di�erent versions of the logo have been created to suit various production processes.
Color PositiveThe preferred logo for reproduction is the standard positive color version. This version is to be used whenever possible.
Color NegativeWhen printing on dark backgrounds, and where the standard logo would not be clearly visible, the preferred single color logo is white.
Solid BlackThe solid black logo is designed speci�cally for applications where greyscale (black and white) printing/transmission is required (ie fax, memo, invoices, administration forms etc).
Trademark ™ shall not be removed from the Preat Logo.
Standard version (preferred)
Solid black (Greyscale)
Color negative version
3.0 File Formats
File Formats
There are several common types of interchangeable graphic �le formats. Typically, the average person will not be able to open �les with the extensions AI, EPS, or PSD. Each of these three �le types require a special software program used by designers, printers, and promotional product and signage manufacturers. Our preferred design tools are Adobe Photoshop for raster design work and Adobe Illustrator for vector design work.
Logo & Brand Identity GuidelinesPreat Corporation
RASTER VS. VECTOR IMAGES How to Choose the Correct Format
Raster Images• Pixel-based graphics• Resolution dependent• Photos + web graphics
Vector Images• Curve-based graphics• Resolution independent• Logos, icons + type
JPEG.jpg �le extension
Web + print photos and quick previews
PDF.pdf �le extension
Print �les and web based documents
EPS.eps �le extension
Individual vector design elements
AI.ai �le extension
Adobe Illustrator design �les
SVG.svg �le extension
Scalable vector graphic
GIF.gif �le extension
Animation + transparency in limited colors
PNG.png �le extension
Transparency with millions of colors
TIFF.ti� �le extension
High quality print graphics and scans
PSD.psd �le extension
Layered Adobe Photoshop design �les
3.1 File Formats
File Formats (continued)
Encapsulated Postscript (EPS)Encapsulated PostScript (EPS) language �le format can contain both vector and bitmap graphics (raster) and is supported by virtually all graphic, illustration, and page layout programs. The EPS format is used to transfer Postscript-language artwork between applications.
Logo & Brand Identity GuidelinesPreat Corporation
EPS.eps �le extension
Individual vector design elements
Continued
EPS �les are the preferred format for design professionals to transfer an image or artwork into another application.
If asked to share a logo �le, please forward the correct .eps version depending on the medium and logo use case.
preat-color.epsLogo �le naming structure example
4.0 Logo Size
Logo Size
The Preat logo reproduces well at almost any size. Going too small, however, can damage the logo’s integrity and e�ectiveness.
Minimum SizesNever reproduce the standard version smaller than 1” wide, measured from left edge to right edge of the complete logo.
Logo & Brand Identity GuidelinesPreat Corporation
Standard Version
1”
72px
5.0 Clear Space
Clear Space
Why clear space?The Preat logo must be surrounded by the correct clearance area. This ensures immediate recognition and maximizes the impact of the logo when displayed. No elements are allowed within the safety area. The Preat logo must not be ‘locked up’ with any other information or logo.
Spacing
• Gray striped area indicates the Safe Zone. Other graphical and visual elements can be safely positioned up to the adjoining blue area.
• Blue indicates Clear Space. The blue area is to be free of other graphic and visual elements.
• 1/4 inch (0.25”) clear space should be maintained around the logo.
• Never allow typography or other element to “invade” the logo.
• Never redraw or alter the logo, including the placement and size relationship of its letters.
• Never stretch, pinch, or modify the logo any way.
Logo & Brand Identity GuidelinesPreat Corporation
Standard Version
.25”
.25”
6.0 Color Story
Color Palette
These color speci�cations ensure that the distinctive Preat color palette is displayed correctly and consistently across the range of its applications.
PMS or PANTONEThese are the speci�cations for printing on both coated (C) and uncoated (U) paper stocks. This ensures visual consistency of the brand color across di�erent materials.
CMYK (4 color process printing)If four color process is available (e.g. magazine printing) then use the speci�ed CMYK breakdowns.
RGB / HEX (Digital or web use)When using the colors on screen use the speci�ed RGB or Hexadecimal values.
Logo & Brand Identity GuidelinesPreat Corporation
Preat Blue
Pantone
Color Comparison
Process C100 M73 Y3 K0Screen R0 G87 B163Web HTML #0057A3
PMS 2935C
ProcessCMYK
PantonePMS 2935C
7.0 Do’s + Dont’s
Usage Do’s + Dont’s
Use on backgroundsThe Preat logo can be placed on almost any background. Care needs to be taken whether the positive or reversed version of the logo should be used.If the background image has changing tones or colors, please ensure the logo is completely legible. These are examples of backgrounds that are appropriate for placing the logo on.
Please note:If you wish to place the Preat logo over an image in a MS O�ce application or website/work group please use the RGB .png format as this has a transparent background. The brightness of the background will determine whether to use the reversed or standard version.
Logo & Brand Identity GuidelinesPreat Corporation
No subject overlap. Provided container when placed over busy images.
Low contrast images
Low contrast textures Low contrast backgrounds
7.1 Do’s + Dont’s
Usage Do’s + Dont’s
Usage Dont’sThese are examples of backgrounds that are NOT appropriate for placing the Preat logo on and incorrect logo usage
Logo & Brand Identity GuidelinesPreat Corporation
Busy / noisy patternWrong logo version used & not enough safety area around logo
Inadequate logo separation from the background
Altered logo with icon and ™removed. Also wrong color.
Inadequate spacing / covering up part of logo
Logo cropped, rotated, or distorted in any way
8.0 Preat as Text
Logo & Brand Identity GuidelinesPreat Corporation
Text Standard
This standard pertains to presenting the company name, Preat, in writen text within the body of any written document, including Email communication.
While there is no typeface standard for Preat as it appears in body copy, the preferred font is basic, simple Helvetica, Arial, Verdana, or Times New Roman.
Fancy script or highly stylized fonts should be avoided.
The company name can appear as either of the following.
Preat
Preat Corporation
The ‘P’ in Preat shall be capitalized.
The ‘C’ in Corporation shall be capitalized.
Do not use ALL CAPS.
Do not use the ™
The following are examples of incorrect usage:
PREAT
PREAT CORPORATION
PREAT Corporation
Preat™
Preat™ Corporation
PREAT™
Preat
Preat
Madelyn Stringham | Marketing DirectorPreat Corporation 1-800-232-7732preat.com
9.0 Email Signature
Logo & Brand Identity GuidelinesPreat Corporation
Email Standard
Typeface: Helvetica, ArialSize: 12pt
Line #1: Name | TitleThe name and title are presented in Bold and are separated by two spaces, a pipe, and two spaces. Color is Preat Blue #0057A3
Line #2: Company NameThe company name is presented in Bold, color is black #000000
Line #3: PhoneDefault typeface.An additional Mobile or direct line can be added here as well.
Line #4: URLDefault typeface, auto link color and underline. Do not prepend with www.
Line #5: Preat Color LogoWidth: 180pxHeight: 28.905px
Madelyn Stringham | Marketing DirectorPreat Corporation 1-800-232-7732Mobile/Direct (559) 783-3147 preat.com
Option: Mobile/Direct Line
10.0 Business Card
Logo & Brand Identity GuidelinesPreat Corporation
Business card
Two versions of the Preat business card are available for employees.
Version #1: PortraitThe employee portrait is to be a professional quality photo. The subject shall be dressed in business attire, commensurate with their position. The portrait size is 60pt wide by 70pt tall.
Version #2: No PortraitA second version without photo is also available.
TypographyThe typeface used is Myriad Pro as follows:
Myriad Pro, Bold, 10pt
Myriad Pro, Italic, 10pt
Myriad Pro, Regular, 9pt
Myriad Pro, Bold, 9pt
Myriad Pro, Regular, 8pt
Chris BormesPresident
2625 Skyway Drive, Suite B Santa Maria, CA 93455
chris@preat.com1-800-232-7732M (805) 350-2652
preat.com
Chris BormesPresident
2625 Skyway Drive, Suite B Santa Maria, CA 93455
chris@preat.com1-800-232-7732M (805) 350-2652
preat.com
Chris BormesPresident
2625 Skyway Drive, Suite B Santa Maria, CA 93455
chris@preat.com1-800-232-7732M (805) 350-2652
preat.com
Note: Color muted to emphasize typeface example
11.0 Letterhead
Logo & Brand Identity GuidelinesPreat Corporation
LetterheadTemplate
Standard letterhead for 8 1/2” x 11” written documents.
2625 Skyway Drive, Suite B, Santa Maria, CA 934551-800-232-7732 | preat.com
12.0 Tech Talks Logo
Logo & Brand Identity GuidelinesPreat Corporation
Tech Talks by Preat
The complete Preat Tech Talks logo is presented in color on a white background (preferred).
Like the main Preat logo, there should be 1/4” (18pt) clear space around the complete Tech Talks logo.
Color story:
Process C75 M0 Y100 K0Screen R57 G181 B74Web HTML #39B54A