BRAND TOOLKIT
This Brand Toolkit is a the definitive use guide for all visual and verbal brand elements used to communicate with our stakeholders. This guide summarizes some of the basic guidelines and proper application to ensure the correct and consistent use of the brand identity system. In addition to the logo, typography, color palette and other visual elements, specific directions are included to help strategically manage the visual communication materials. By effectively and consistently implementing the brand identity system, we protect the equity of Littler and support its positioning.
Last Modified: August 2023
LOGOS
WEB
Applied Animation: Fade In - Center 0.4 second delay 0.8 second duration
PRINT
PROXIMITY ZONE
The Littler logo can be used in any of the established formats below, depending on the best version for the layout. Do not reconfigure the approved logos. Different formats are provided, however use the following information to determine file type. All versions can be created from the origin AI or EPS files by using an “export as,” “save as,” or “save copy as” function.
Acceptable Formats
JPG, PNG or SVG RGB Color Space
PDF, EPS, TIFF CMYK or PMS Color Space
MINIMUM SIZES
1/2"
The logo must have a clear zone maintained around it at all times. Type, images and other graphics must be placed away from the logo at a distance greater than or equal to (x). See below for reference. x = the height of the e in the logo
LOGOS DO'S AND DON'TS
RESIZING
Always scale the logo proportionately. Never stretch the logo.
Download Littler Logos
Colors
Primary Palette
Innovation Navy
White
PMS: 539 RGB: 0 38 58 CMYK: 98 76 51 57 HEX: #00263A
Ingenuity Orange
Confidence Blue
Littler Green
Secondary Palette
Accent Colors
RGB:255 255 255 CMYK: 0 0 0 0 HEX: #FFFFFF
Global Blue
The Littler color palette is used for all corporate communications materials including digital, print and signage. The color palette has three groups of colors as outlined below. When using color of any kind be cognizant of white space as a design element and build color around it.
Littler Green, Confidence Blue, Global Blue and Foundation Grey are secondary colors. They are used as accent colors and in smaller areas of design executions.
PMS: 360 RGB: 106 191 75 CMYK: 61 0 96 0 HEX: #6ABF4B
PMS: 298 RGB: 60 180 229 CMYK: 65 10 1 0 HEX: #3CB4E5
PMS: 7687 RGB: 26 66 138 CMYK: 100 86 15 3 HEX: #1A428A
PMS: 427 RGB: 207 210 211 CMYK: 18 12 13 0 HEX: #CFD2D3
Ingenuity Orange is used the least and primarily as an accent color. It can be used in corporate communications sparingly and is most often used internally.
PMS: 2024 RGB: 252 124 85 CMYK: 0 65 69 0 HEX: #FC7C55
Foundation Gray
Littler best practices: when designing for mobile/tablet experiences (800px width), we recommend at least 22pt sizing for body copy. We also strongly suggest testing all experiences on intended devices for usability and sizing.
Typefaces & Animations
Aa
Proxima Nova Semibold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Proxima Nova Semibold is used for headlines. Left-aligned
Merriweather Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Merriweather Regular is used for body copy.
Typesetting
Typeface: Proxima Nova Semibold Case: Title Color: Innovation Navy or White Leading: 110% Tracking: 25
H1 Heading - Page Titles
Typeface: Proxima Nova Semibold Case: Sentence, no punctuation Color: Navy or otherwise Tracking: 25
H2 Subhead - All Caps
Typeface: Proxima Nova Bold Case: All Caps Color: Confidence Blue or White Tracking: 80
Body copy Body copy
Typography
Brochure/Report Title
Proxima Nova Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Proxima Nova Bold is also used for headlines. Left-aligned
Size: Variable (unless noted) Kerning: Optical Leading: Auto (unless noted)
H2 Subhead - Sentence case
Typeface: Proxima Nova Semibold Case: Sentence Color: Variable Tracking: 25
Intro Copy
Typeface: Proxima Nova Bold Case: Sentence Color: 100% Black, variable Leading: 140% Tracking: 80
Typeface: Merriweather Regular Color: 80% Black Size: 9 Leading: 13 Tracking: 10 Paragraph Spacing After: 0.125"
Body Copy - Ceros
Typeface: Montserrat - Medium Color: 80% Black Letter: 10
Calibri ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Calibri is used for Microsoft applications; Word, PowerPoint, Excel, etc.
Photography is a mix of posed and editorial images with a mix of professional, informal and location. Imagery is meant to convey the innovation, knowledge and authority of Littler employees as well as the global reach of the firm. Photos with circular content (see examples below) can also be sourced or set and used intermittently. Cropping should be applied to best focus the viewer's attention on the subject. Putting the subject in the center of the frame is not always the best method to create the most pleasing images. Leaving unoccupied space on one side or the other can sometimes be more visually compelling. Photos will also have an overall blue tone or tint, either natural or applied. If photography needs color adjustments, this can be done using Photoshop color balance settings. Depending on the coloring and lighting effects of the source image, different levels will need to be adjusted to achieve the desired color tone. Alternately, a Photoshop action script can be purchased to apply blue settings, but will need to be experimented with by turning on and off different adjustment layers to create the desired outcome (depending on the color tone of the original source imagery).
Photography
Photography can also be masked out of the circular shape to convey the brand look + feel.
When cropping a circle into a square shape, the arc should be centered within the crop.
Graphic Expressions
This library is intended to add interest to communications materials. They can be recolored with the Littler color palette and can also be layered on top or below additional brand elements.
Download Graphic Expressions
Grid Systems
Use the rule of thirds in graphic compositions. Divide each layout equally into a 3x3 grid of nine sections to maintain balance and proportion.
Sample Applications
Ad Examples
Image Carousel
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
Learn More
CTA Buttons
45px
Video Buttons
Article Title Goes Here
90px
Main Header
ARTICLE TILES
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
UI Elements
These CTA buttons already have a hotspot that activates the hover states. To customize the click out link, just add an additional click interaction to the hotspot.
Base: #17D0EB
Hover: #00C3E0
Base Animation: Fade In - Center 0.4 second delay 0.8 second duration
Hover Animation: Fade In - Center 0.2 second delay 0.2 second duration
Base: #283030
Hover: #000000
Carousel Animation: Fade In - Center 0.4 second delay 0.8 second duration
Tab System
Seattle
Eastside
Northside
Kent Valley
Pierce County
Ultricies Euismod Dolor
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
Open Animation: Fade In - Center 0.0 second delay 0.8 second duration
