Toledo Headquarters

200 N. St. Clair Street
Suite 100
Toledo, OH 43604

Columbus Office

We’re moving! New location coming soon.

Colors

Brand Primary
#7B42F8
Twilight
#37147C
Dawn
#EC4267
Daylight
#00EAEA
Charcoal
#374250
Midnight
#1C252C

Dark Gray
#878E96
Gray
#B5B8BC
Light Gray
#DFE3E5
Lighter Gray
#ECEEEF
Lightest Gray
#F7F7F9

Typography

The quick brown fox jumps over the lazy dog

H1

font-size: 94px;

line-height: 1em;

The quick brown fox jumps over the lazy dog

H2

font-size: 72px;

line-height: 1em;

The quick brown fox jumps over the lazy dog

H3

font-size: 56px;

line-height: 1em;

The quick brown fox jumps over the lazy dog

H4

font-size: 36px;

line-height: 1.22em;

The quick brown fox jumps over the lazy dog

H5

font-size: 24px;

line-height: 1.33em;

The quick brown fox jumps over the lazy dog

H6

font-size: 18px;

line-height: 1.55em;

Pork belly alcatra bresaola boudin meatball short loin leberkas shoulder filet mignon brisket chuck turkey shank hamburger. Doner beef short ribs, spare ribs brisket leberkas ground round porchetta pancetta. Leberkas ribeye picanha turducken sirloin porchetta shoulder turkey. Filet mignon turkey tongue, sirloin tri-tip jerky ham chicken fatback. Pork loin alcatra flank, shoulder biltong beef tongue short loin filet mignon kielbasa andouille pig ham doner. Drumstick sausage hamburger shankle, bacon pork frankfurter turkey ham venison beef ribs.

Paragraph

font-size: 18px;

line-height: 1.5em;

Fonts

The quick brown fox jumps over the lazy dog

Circular Std Black

The quick brown fox jumps over the lazy dog

Circular Std Black Italic

The quick brown fox jumps over the lazy dog

Circular Std Bold

The quick brown fox jumps over the lazy dog

Circular Std Bold

The quick brown fox jumps over the lazy dog

Circular Std Medium

The quick brown fox jumps over the lazy dog

Circular Std Medium Italic

The quick brown fox jumps over the lazy dog

Circular Std Book

The quick brown fox jumps over the lazy dog

Circular Std Book Italic

The quick brown fox jumps over the lazy dog

Noe Text Bold

The quick brown fox jumps over the lazy dog

Noe Text Book

Spacing

Between Modules: 120px margin
Bottom of Page: 240px margin
Between Image Grid Items: 30px margin
Colored Bar / Quote: 180px padding & -75px margin

Modules

Intro

Logo: Company logo at least 175px wide
Content: A paragraph of intro copy
CTA: Check to have a CTA added to the intro
CTA Text: Text that will appear on the CTA button
CTA Url: Url of where you want the CTA button to link to, should be a dynamic link of destination is internal
Open in new tab: Check if destination is an external page or if you want the page it open in a new browser tab

Vimeo Video

Video Url: Url of video coppied out of Vimeo (Example: https://player.vimeo.com/video/317488785?api=1)
Cover Photo: Photo you want displayed when the video is not playing (1920 x 1080 pixels)
Title: Title of the video

Stats

Headline: Headline of module
No Stats: Check if you want just the headline and decription with line in between to display
Stats: Each row is another stat (min 2 / max 4)

Number: Stat number
Label: Stat label

Paragraph: Paragraph of copy that appears under that stats

Parallax Image

Image: Image that you want to parallax

Quote

Quote: Each row is another quote in the same section (min 1 / no max)

Quote Text: Quote copy
Author: Author of quote and title

Quote Color: Quote font color
Author Color: Author font color
Border Color: Color of border lines around quote
Background Color: Color of quote background
Negative Margins: Check in you want sections above and below to be pulled up or down to overlap onto quote background color

Image Grid

Row Items: Determines if row is a full width image or two images side-by-side

Image: Desired image
Caption: Image caption if you'd like one to appear when the image is hovered

Top Margin: If set to hidden it removes the default 30px margin on the top
Bottom Margin: If set to hidden it removes the default 30px margin on the bottom

Normally all bottom margins are set to hidden and all but the first grid item have the top margin set to visible. This sets the standard 30px margin between each grid row but doesn't add any extra spacing above or below the grid as a whole.

Gifs can be added in place of images to have animations in the grid

Inline Video

Video: Video file
Mobile Video: Video file for mobile if differnt then desktop
Video ID: Unique ID for video (used for backend logic)
Pre-load Video: If checked encourages browers to pre-load video before playback, useful if video is hidden and needs played/displayed on some interaction
Fullscreenable: If checked allows video to be viewed in fullscreen

Indented Content

Indented Content: Any headers or paragaphs that you want indented to line up with the copy in the hero

Responsive Spacer

Size: Select a predetermind spacer size or custom
Extra Large: If custom is selected, height of spacer in pixels on extra-large screen sizes
Large: If custom is selected, height of spacer in pixels on large screen sizes
Medium: If custom is selected, height of spacer in pixels on medium screen sizes
Small: If custom is selected, height of spacer in pixels on small screen sizes
Extra Small: If custom is selected, height of spacer in pixels on extra-small screen sizes

CTA

Indented Content: Paragraph of copy above button
Button Text: Text that will be in the button
Link: Url of page the button is linking to, should be dynamic if destination is on Hanson site
External Link: Check if link destination is another site besides the Hanson site, link will open in a new tab

Work Columns

Grid Items: Determines how many columns there will be based on the number of rows filled out

Text Position: Where the Work title should display overtop of the image (min 1 / max 3)
Text Color: The font-color of the Work title
Work: The work piece that you want to show up and link to

Column Layout If row has two columns, choose which side is larger

Blog Articles

Articles: Each row is a seperate article (min: 3 / max: 3)
- Image: Blog article thumbnail (860 x 430 pixels)
- Category: Blog article category
- Article Title: Blog article title
- Link: Url to blog article

Only set up to display three articles at a time. No more, no less.

Horizontal Rule

Size: Select the width of the rule from full-width, large, medium, and small

Ticker Carousel

Headline: Copy of the headline that will appear above the ticker
Logos: Each row is a seperate logo in the carousel

Image: Logo you want displayed (at least 210px wide)

This module was created for displaying client logos. A minimum of around 5-6 logos is recommended so that duplicates do not appear on the screen at the same time.

Colored Bar Image

Background Color: Color of the background behind the images
Images: Each row is a seperate image (min 1 / max 2)

Image: Image you want displayed
Caption: Caption underneath image

Negative Top Margin: If checked it adds a -75px top margin to pull the content above down to overlap
Negative Bottom Margin: If checked it adds a -75px bottom margin to pull the content below up to overlap

Device Video

Videos: Each row is a seperate device video (min: 1 / max: 2)

Mask Image: Image with black background and white device cutout
Video: Video file the same size as the mask image
Preload: If checked encourages browers to pre-load video before playback, useful if video is hidden and needs played/displayed on some interaction
Video ID: Unique ID for video
Size: Size of device
Horizontal Movement: Moves the video left or right
Vertical Movement: moves the video up or down
Parallax Speed: Negative numbers move down, positive numbers move up, and the further the image the faster the speed
Disable Scroll Watch: If checked scroll watch will be turned off and video will play all the time (not recomended for these type of videos)
CTA Text: Text of CTA that scrolls next to video
CTA Url: Url of page you want the CTA to link to
CTA Target: Should be set to "same tab" if page is on the Hanson site, "new tab" if the page is on another site
Top Device: Which device should be on top when/if they overlap

The device videos only calculate how wide they should be on page load. Meaning that if you resize the browser window after the page has loaded the device will either overflow the page or be way too small. Just refresh the page to recalculate the width.

Copy and Image Split

Content: Copy that you want on one side
Image: Image that you want on one side
Top border: Check if you want a top border
Layout: Select what you want on either side
Center Copy: Check if you want the copy to be centered vertically

Colored Section

Content

Title: Headline above the content
Title Tag: What HTML tag wraps the title
Title Animation: Enables animation on the title when it comes into view
Sub-Title: Smaller text below the title
WYSIWYG Content: Editable Content area
Position: The horizontal alignment of the headlines and content within the section

Style

Text Color: Sets a default text color on the section
Background Type: Selects which type of background to be used
Section Background Image: Image to be used as a background, will cover the entire section
Section Mobile Background Image: See above, but allows for different aspect ratio to accomodate the change in device size
Video Background: Video file to be used as a background, will cover the entire section and autoplay when it comes into view
Mobile Video Background: See above, but allows for different aspect ratio to accomodate the change in device size
Preloaded Video: If checked, encourages browers to pre-load video before playback, useful if video is hidden and needs played/displayed on some interaction
ID: A unique identifier to be set for the section and required if preloading
Background Color: The color to fill the background of the section
Background Overlay: Applies a dark blue faded gradient over the background (useful for video backgrounds or images that may contrast poorly with white text)

Spacing

Shrink Width: This will set the max-width of the inner column to 66% of the full container
Negative Margins: If checked, will allow the selection of negative margins for top and bottom (the next two options)
Negative Top: If checked, applies a -225px margin to the top of the section (-30px on smaller devices) if the section is full screen mode, or a -75px margin to the top of the section if it is not full screen mode
Negatibe Bottom: If checked, applies a -225px margin to the bottom of the section (-30px on smaller devices) if the section is full screen mode, or a -75px margin to the bottom of the section if it is not full screen mode
Full Screen: Stretches the section to fill the current device viewport width and height
Vertical Padding: Applies top and bottom padding to the section using bootstrap 'PY-' utility classes

Lottie

Animation ID: A unique identifier applied to the div that Lottie will target to inject the animation
Full Screen: Stretches the section to fill the current device viewport width and height
Full Width: Stretches the section to fill the current device viewport width
Absolute Position: Will apply absolute position and z-index to the section to allow it to overlay another div (useful when stacking full screen sections)

Featured Link

Links: Each row is a new link block

Desktop Image: Image that will appear when on desktop (1790 x 826 pixels)
Mobile Image: Image that will appear when on mobile (Just set the same as desktop if a different mobile image is not needed)
Client: Name of client case study you are trying to link to
Title: Title of featured link
Description: Description of featured link
Link: Link Url destination

Logo Row

Intro Copy: Intro copy for section
Logos: Each row is a new image (min: 1 / max: 5)

Image: Png of logo (size will vary depending on dimensions of logo)
Company Name: Name of the company who's logo you are adding

Form Shortcode

Intro Copy: Intro copy for section
Background Color: Choose whether the background of the form will be light or dark
Shortcode: The shortcode of the form that you are adding from the Contact Form 7 plugin
Vertical Padding: Allows you to remove the default section padding if desired

Templates / Post Types

Work (post type)

Work Detail Page

Nav Color: Switches the color of the Hanson logo in the top left and the font color of the title
Title: Title you want to appear in the hero
Sub-Title: Sub-title you want to appear in the hero
Hero Background Type: Select if you want the hero background to be a solid color or an image
Hero Background Color: The background color of the hero
Hero Image: The background image of the hero on desktop
Mobile Image: The background image of the hero on mobile

Work Landing Page

Company: Client of this case study
Thumbnail Title: Title to appear overtop of thumbnail on the work page
3 Column Image (full-width): Image to appear if row is a full-width case study
2 Column Image (medium): Larger Image to appear if row has two columns
1 Column Image (small): Smaller image to appear if row has two columns

News (post type)

Layout: Select if you want to add one image or multiple
Single Image: Image you want displayed if you only want one displayed
Image: One of the images you want dusplayed if you want multiple, create new rows to add more images
Caption: Caption of the image(s)

Create the new post
Name the post the date that the image was originally posted on Instagram (Example: January 1, 2019)
Fill out the fields
Publish the post
Click "Edit" next to "Published on:" in the "Publish" box in the top right
Change the date to the date that the image was originally posted
Click "OK"

People (post type)

First Name: First name of person in photo
Last Name: Last name of person in photo
Quip: Quip about person in photo
Title: Title of person in photo
Traditional Photo: Traditional pose that is visible by default (880 x 1064 pixels)
Fun Photo: Fun pose that is revealed when hovering the traditional photo (880 x 1064 pixels)
Culture Photo: Photo that will appear on the Culture page when randomly selected (560 x 374 pixels)

The traditional photo and the fun photo should be lined up so that the subject is not jumping to a new location when hovered.

Careers (post type)

Title: Official job title of posting
Contact Email: Where the email should be sent if someone wants to apply
Type: Job type (Example: "full-time", "part-time", "contractor", etc.)
Job Info: OWYSIWYG editor where all inforation about job can be posted, use a previous job posting as an example if needed (HTML recomended)
Disclaimer: Disclaimer about posting, already set by default

It is best if each job posting is formatted similarly. Reference a previous job post to see how it has been done.

Dogs (post type)

Image: Photo of dog (1152 x 1440 pixels)

Landing Page (template)

Nav Color: Switches the color of the Hanson logo in the top left and the font color of the title
Title: Title you want to appear in the hero
Sub-Title: Sub-title you want to appear in the hero
Hero Background Type: Select if you want the hero background to be a solid color or an image
Hero Background Color: The background color of the hero
Hero Image: The background image of the hero on desktop
Mobile Image: The background image of the hero on mobile
Spacing Bottom: The option to remove the default page bottom spacing to allow the content to bump up against the footer

Guides

Replacing the Homepage Animation

The homepage animation is created using an Adobe After Effects plugin developed by AirBnb called Lottie.
Past animations are stored in /assets/js/modules/animation-achive.

Export the animation from Adobe After Effects. If the version you Lottie you are using is newer you may need to adjust the settings to export the animation with the legacy JSON file.
Copy the code from the data.json file in the exported folder and past it on line 5 of assets/js/modules/homepage-animation-data.js after the variable declaration.
You may need to replace static links if the animation uses images. The image can just be uploaded to the WordPress Media Center and the path can be added to the code copied out of the data.json file.