Visual identity

Our identity helps communicate our vision for today into tomorrow – one that’s bold and unique in our approach as well as the challenges we solve. By emphasizing moments in time, our visual system conveys how we’re always moving forward while highlighting what we do to get there.

It’s important to show up consistently to build brand recognition. This section will help guide you to ensure we do just that.

Logo

The Jacobs logo is the most prominent representation of our company, our people and our brand. We believe in the power of simplicity, so it only shows up in black and white.

Usage

The logo alone as well as locked up to our tagline should be used as the primary expressions of our brand. Consistency and clarity are always the priority because they represent how we show up for our people, our clients, our communities and our shareholders.

Jacobs Logo

Logo Lockup

Logo Only

J-Mark

Our mark is the J in our logo. The two pieces embody the two parts of our tagline: Challenging today. Reinventing tomorrow.

The black version reproduces best with embossing, debossing, varnish and other premium printing techniques.

Usage

We reserve our J-mark for select occasions, usually when space is limited.

Examples include:

J-Mark Meaning

Usage Example

Logo Clear Space

Allowing our logo and mark to breathe is an important consideration, so we’ve created recommendations for clear space.
We define clear space as an area free of type, graphics and other elements that can create a cluttered feel.
These are the minimum clear space requirements. Use more whenever possible.

Logo Clear Space

J-Mark Clear Space

Logo-and-tagline lockup

Our logo and tagline together make up our logo-and-tagline lockup. Always use the official art files for consistency and emphasis.

Primary lockup

Secondary lockup

Special Cases

PRIMARY LOCKUP: HORIZONTAL

SECONDARY LOCKUP: LEFT STACKED

SPECIAL CASES ONLY: CENTER STACKED

Mark-and-tagline lockup

Our mark and tagline together make up our mark-and-tagline lockup. Always use the official art files for consistency and emphasis. In the primary lockup, we use the top part of the mark as an inflection point to represent our unique approach to everything we do and the resulting outcomes.

Primary lockup

Secondary lockup

Special Cases

PRIMARY LOCKUP: INFLECTION POINT

SECONDARY LOCKUP: LEFT STACKED

SPECIAL CASES ONLY: CENTER STACKED

Mark-and-tagline clear space

When using the mark-and-tagline lockup, use the height of the tagline to determine clear space around the lockup

PRIMARY LOCKUP: INFLECTION POINT

SECONDARY LOCKUP: LEFT STACKED

SPECIAL CASES ONLY: CENTER STACKED

Minimum size

For legibility, always keep the logo, the lockup and the J-mark at or larger than the minimum sizes.

Tip

Need the logo smaller than the minimum size? Use the wordmark instead by simply typing “Jacobs.”

SHOWN AT ACTUAL MINIMUM SIZE

Legal marks

Wordmark

“Jacobs” spelled out in plain text is our wordmark. We’ve registered it as a trademark so there are some ways we work to protect it.

Legal Name

The legal name is the name of the entity as established by the legal documents creating the entity.

“Jacobs Engineering Group Inc.” is the primary legal name for the company.

Jacobs logo

J-Mark

Placement

Our logo placement options create flexibility in layouts

The placement of our logo-and-tagline lockup should also be thoughtful for clarity and legibility

Primary lockup (horizontal)

The primary lockup can be placed in all four corners and in the center at the top or bottom of the layout.

Secondary lockup (left stacked)

The left-stacked lockup can be placed in the upper left corner or lower left corner

Special cases (center stacked)

Place the center-stacked lockup in the center at the top or bottom of the layout

logo placement examples

Co-branding

As we collaborate and work with partners, we may need to use our logo alongside theirs

Examples

Do nots

Always use official art files for our logo, J-mark and lockups, and never modify or manipulate them in any way. When you size the logo, do so proportionately. Here are examples of what not to do.

Do Not Examples

File-naming structure

Visit the Logo Library as your single source for all official files.

We’ve adopted a standard way to name files so we can easily identify the content.

Find these files at JacobsConnect > Company > Brand

File Naming Structure

Logo Library

Here is our collection of logo art files ready to use for your convenience. You can find the design files on Brand Central.

ALL DOWNLOADABLE LOGOS HERE

Color overview

We’ve chosen black and white to ground our palette in simplicity. We complement them with neutral shades and bright, bold colors to express the brave and optimistic parts of our personality.
These colors are an important part of our brand expression. Using them consistently is important for recognition and credibility. The following guidance helps you apply them in our style.
We’ve divided our palette into four groups — core, neutral, primary and extended. Each one serves a specific purpose within our visual system.

Core

Black and white, our beacons of simplicity, are the foundation of our color selection.

Neutral

Our neutral colors provide balance to our palette.

Primary

Our primary colors are divided into five families: blue, purple, red, yellow and green.

Extended

Our extended colors are reserved for information graphics and data visualization.

Core

Neutral

\

Primary

Core

Black and white are our foundational colors. We use them to ground our robust palette with thoughtful use of negative space.

Our logo and mark are always displayed in our core colors.

Tips

Core

Primary

Our primary palette has five focal colors with a spectrum of four supplementary values.

The Primary 1 (P1) colors are the purest expressions. P2 and P3 are brighter and lighter, bringing freshness and vibrancy to our visual identity. P4 serves as grounding elements.

Primary Colors

Accessibility

Accessibility is important to us, so we’ve pressure tested our color palette against the Americans with Disabilities Act (ADA) Standards for Accessible Design. This chart is a guide to color combinations that have enough contrast to meet those requirements.

AA compliance applies to type larger than 18pt.

AAA compliance applies to type smaller than 18pt.

Compliance

Data graphics

Out extended palette comes to life in data visualization and infographics.

For charts with three or fewer graphic elements, start with one monochromatic scheme from one color. Apply P1, P2 and P3 colors to each element going from largest to smallest.

For charts with four to six graphic elements, start with a monochromatic scheme from two colors. Apply one color family at a time, such as three blues followed by three purples.

If the data contains categories, try to assign one color family per category.

Example

Donut Chart Examples

Gradients

Gradients are a useful way to signal a shift or change. We’ve used the Freeform Gradient tool in Adobe Illustrator to develop a specific formula. Use our primary colors when applying gradients.

For a monochrome gradient, we put P1 and P3 colors at opposite corners and blend them with our P2.

To reinforce our optimism for a brighter future, we put lighter colors in the top right corner and leave out darker P4 colors from our gradients.

Hero Gradient 1 - Mono Chrome Blue

Hero Gradient 2 - Duptone blue-gree

Hero Gradient 3 - Duotone blue-purple

Gradient library

For easy application, we have a set of ready-made gradients to use within layouts.

Hero Gradients

additional gradients

Color theory

If you’re a designer or power user with access to Adobe Illustrator, we’ve put together a quick formula for you to use when creating new color gradients.

Start with up to three analogous primary colors using the Jacobs color wheel.

Jacobs Color Wheel

Analogous Combination Examples

When using green and blue, the third color should either be yellow or purple, which are analogous to green and blue respectively.

When using red and yellow, the third color should either be purple or green, which are analogous to red and yellow respectively.

When using blue and purple, the third color should either be green or red, which are analogous to blue and purple respectively.

Creating new gradients

Once you’ve chosen your palette, pick P values for each color.

As an example, we’ve started with purple, red and yellow.

Two of the four corners should share a color family. In this example, you can see purple in the top and bottom left corners.

To ensure dynamic range, place P1 and P3 colors in opposite corners.

THREE-COLOR GRADIENT: P1 + P2 + P3

THREE-COLOR GRADIENT: P2 + P2 + P3

Creating new gradients pt. 2

THREE-COLOR GRADIENT: P3 ONLY

THREE-COLOR GRADIENT: P3 ONLY – WITH COPY

As long as the colors are analogous, a gradient can contain P3 colors exclusively.

In our first example, we use purple, red and yellow.

In our second example, we used yellow, green and blue.

When using only P3 colors, be sure to use black copy to ensure ADA compliance

Special gradient mesh treatment

We have a more complex gradient that can be used in special approved cases such as the annual report.

This gradient feels light and airy, and pushes the boundaries of creativity by fading through opacity and blending into the imagery. It follows the same rules of color by using analogous colors such as yellow and green and blue.

Example

Creating a special mesh gradient

1. Start by selecting your color theme. In this case, we’re using red, purple and yellow.

2. Use the brighter and lighter P2 and P3 colors for their freshness and vibrancy. Here, we’re using the P2 red, P3 purple and P3 yellow.

3. Draw a rectangle similar in dimension to the image it will overlay and fill it with one of the P3 values. Here, we’re using the P3 yellow.

4. Create a mesh grid with the Mesh Tool in Adobe Illustrator and add at least three (3) but no more than five (5) anchor points along the edges, gradually spacing them further and further apart.

5. Using the Direct Select tool, choose a corner to anchor the heaviest color. Apply a P2 color here if you’re using one. In this example, we’re using red.

6. Apply the same color on several adjacent anchor points.

7. Apply a second color to the next ring of anchor points, working outward.

8. Fade the mesh by starting at the opposite corner from where the gradient begins. Set the transparency to 0%.

9. Select anchor points adjacent to that opposite corner and set the transparency to 0% there as well. Work your way back to the original anchor, increasing the transparency to 60%. Always leave the transparency of the original anchor at 100%.

10. Experiment and have fun. Adjust the anchor points until you have a dynamic color landscape.

11. Overlay the gradient onto the image. Rotate and stretch the gradient so it feels complementary. Offset the gradient and image at a 45-degree angle.

12. If you’re using an inflection point, be sure to add it to the corner with the richest color. In this case, it’s the lower left corner.

Sequence frames

We use sequence frames as an important graphic device. This device is inspired by our collaborative and process-oriented approach to solving challenges.

Sequence frames expand and contract to create a sense of momentum and progress, while the contents of the frames tell a story that supports a message. Here’s how to create one:



In a layout, frames can run either vertically or horizontally. Use one direction per layout.

Examples

Creating a sequence

Sequence frames can help you engage an audience by integrating a series of moments to tell a story. They can create a sense of movement by linking those moments in time.

To build a sequence, combine frames by changing their heights in a vertical sequence or widths in a horizontal sequence.

A good rule of thumb is to scale the frames at 0.5x increments to create consistency while varying the sizes. Evenly sized frames can make the layout feel static, which doesn’t accurately represent who we are or what we do.

Sizing the frames using halves

SIZING THE FRAMES FREE FORM

Primary color in a sequence

To keep communications clean and cohesive, use one primary color family per layout.

Select a color family that complements photography and messaging.

Colored frame sequence

Gradients in a sequence

Gradients can be used in a sequence by applying primary colors from the same family. Here’s how:



The resulting blurred edge between frames helps link them together, such as in the examples to the right.

Add up to two solid color frames from P1 or P4 on either side of the gradient.

Examples

DISCONNECTED GRADIENT SEQUENCE EXAMPLES

Negative space in a sequence

Negative space can create a pause between frames. We use it thoughtfully to emphasize a message.

Negative space can be black or white, or a corresponding primary color. Be sure to use sufficient contrast for legibility.

Use no more than one negative space per layout.

Type in Negative space

Type on color

Type on a gradient frame

Contrast is important for legibility. If you’re using a gradient frame with a headline, place copy over the part with the highest contrast.

ADA COMPLIANT TYPE

NOT ADA COMPLIANT TYPE

Photography

We have a range of photographic styles to help tell visual stories through vignettes and moments in time.

Challenging & reinventing

These photos showcase our people in an authentic and honest way.

Today & tomorrow

These are a combination of macro and micro photography to portray the work we do and the impact it creates.

Moments of change

These snippets of time highlight moments of transformation.

Storytelling

These photos tell a continuous story or demonstrate our processes.

By combining our photographic styles, we can tell comprehensive stories through imagery.

Tips:

Examples

Challenging & reinventing

These photos highlight our people. Consider interesting crops and angles to capture individuals in action.

Tips:

Examples

Today & tomorrow

These photos portray the work we do as well as the local and global impact we deliver. To tell this story, we use artful macro and micro shots whenever possible.

Tips:

Examples

Moments of change

These photos represent moments of time that catalyze transformation.

Tips

Examples

Storytelling

These photos tell a continuous story about our impact or demonstrate our processes through a series of images created with a combination of our photography styles.

It’s important to start with a clear narrative in mind. Experiment with images that portray our bigger impact alongside individuals who are creating that change.

The combiniation of color, gradients, photography and messaging work together to create a dynamic form of communication.

Here are a few examples of story lines:

Aiding hurricane relief efforts (5 images)

TEAMS ON EARTH COMMUNICATING WITH INDIVIDUALS IN SPACE (3 IMAGES)

Highlighting process and people

We highlight our people and our process through photographic vignettes that focus on individual details.

Using close up shots of people absorbed in their work or collaborating with each other offers a glimpse into the inner workings at Jacobs. These moments in time should feel sincere and authentic.

When combining photography with the graphic motif, be sure to choose a color family that complements the photography that is being shown.

Examples

Coroporate portraiture

Our universal corporate portraiture style is simple and straightforward to maximize consistency across our company.

They should feel friendly, engaging and professional. Our universal portraiture style is defined by: A light, neutral background. Natural, warm facial expressions. Eye contact with the camera. Dynamic lighting to add depth.

To achieve our universal portraiture style, follow this set up:

1. Set up a white backdrop or find a smooth, empty white wall

2. Set up 3 lights: *The first light should be on backdrop at ¼ power. *The second and third lights should be on the subject at ¼ and ½ power respectively.

3. The subject should be seated on a chair or stool about 10 feet away form the camera to ensure same placement between subjects

4. Shooting the shot:

Examples

Illustration

We have two illustration styles that complement our visual design system. They can be contained within our sequence frames or overlap atop several frames.

Sketches

Hand-drawn forms help infuse the personal touch we bring to every project.

Structural

Our 3D renderings of the letters in our name speak to the precision we bring to every project.

Examples

Sketches

We use hand-drawn sketches to highlight the people and personal touch behind every project. These sketches are expressive, yet elegant, and can be found in a library we’ve curated for you.

To create new sketches, here are a few tips:

Sketch Style Guidance

Structures

We use 3D renderings of the letters in our name as a way to demonstrate our precision. They can add a highly technical feel to a layout.

Artwork can be found at JacobsConnect > Company > Brand.

Structural sketch library

Inflection point

The top of the J in our logo or J-mark is an arrow that portrays the catalyst for change we create. This is our inflection point.

It’s a visual symbol we can use within layouts to illustrate the potential we make possible and the impact we create.

Inflection point examples

Inflection point components

Two separate shapes make up our inflection point: the origin shape and the catalyst shape.

The origin shape is always black, in our core color, to communicate that we’re a source of change.

The origin shape should always be at least ___. The catalyst shape should be at least 250% larger than the origin shape to communicate the great impact we deliver.

Inflection point breakdown

Standard graphics

The origin shape can be our J-mark arrow or a square. It should be black against a white background.

The catalyst shape can be one of four geometric forms:

origin shape 1: arrow

origin shape 2: square

catalyst shapes

Standard library

For ease and convenience, we have a library of inflection points that can be used in layouts.

origin shapes: arrow/square

Standard catalyst content

The catalyst shape communicates the great impact we deliver – so it should never be left empty. We offer shape guidance based on the content.

standard catalyst fill

Standard point in a layout

The point of origin, either an arrow or square, should be placed in the corner of a layout and point inwards. It must bleed off at least two edges of the layout.

The catalyst shape can be cropped to create dramatic compositions but at least one edge should be vertical or horizontal. This grounds the layout and helps us align other elements on the page.

Origin shape placement

catalyst shape compositions

Breakout graphics

For high-impact pieces, use a breakout expression of the inflection point.

The origin shape is a white arrow or square. It should be placed on our darkest neutral (N1) to create a strong and elegant contrast.

This is paired with a bright geometric catalyst shape for even more contrast.

breakout graphic arrangement

Breakout library

The catalyst shapes for the breakout expression are six purely geometric forms: a square, a quarter-round, a pentagon, a hexagon, and a circle and a semicircle.

Breakout catalyst content

Our catalyst shape, which communicates the great impact we deliver, should never be left empty. The only visual element we don’t use in a catalyst shape is photography.

breakout catalyst fill

Breakout point in a layout

The breakout point of origin is presented as the opaque-to-transparent square. It can be placed in any corner of a layout, always pointing inwards. It must bleed off at least two edges of the layout.

The catalyst shape can be cropped to create dramatic and abstract compositions. To give grounded structure and alignment to a layout, the catalyst shape should always be arranged so at least one edge is perfectly vertical or horizontal. This is always the case except when the catalyst shape is a circle.

If the catalyst shape is a circle, the centers of the origin square and the circle must be at a 45-degree angle to each other

Origin shape placement

Catalust shape composition

Typography Jacobs Chronos

The name of our typeface comes from the Greek word for “time,” a nod to how our brand encapsulates the power of present and future coming together. This proprietary typeface grounds our messages in the belief that the choices we make today inform the way we stay ahead tomorrow.

Styles

The Jacobs Chronos typeface comes in different weights and styles. These are tools that can help create hierarchy in messaging. We have: light, regular, italic and bold.

Additional weights and styles will be released in the coming months. There may be instances when Jacobs Chronos can’t be use. In those cases, our system fonts are Arial and Arial bold.

fonts

Hierarchy

Establish typographical hierarchy by using different weights and sizes between headlines, subheads, body and agate.

Headlines are always set in Jacobs Chronos Bold. Subheads and body copy should be set in Jacobs Chronos Light.

Type should always be left aligned.

Sample structure

Iconography

Our icons feature a simple yet bold linear style. With its continuous lines and rounded shapes, this icon style complements our brand’s confident and optimistic character. In contrast to the rounded shapes, note that the lines end in sharp corners.

To ensure clarity at small sizes, do not make the icons smaller than 18px tall.

Employee networks

Focus Areas

Mission/Values

How to create new icons

To create new icons in our existing style, follow the established grid, line weight and stylistic characteristics.

We keep our icons as simple as possible, with just enough detail to highlight their function and character

DO NOT EXAMPLES

Putting it all together

All of these elements come together to visually represent the Jacobs brand. Combine elements from our toolkit thoughtfully to craft impactful communications.

Graphic Toolkit overview

Laying it out

We use grids to organize and add visual structure to our communications. By aligning elements to each other thoughtfully, we are able to highlight key messages and direct the audience without being overwhelming.

To ensure maximum flexibility, we employ 12-column layouts. This allows it to be easily partitioned into two, three, four, or even six sections. For smaller layouts, we use 6-column layouts.

The math is kept consistent with our typography standards, which also use point and leading sizes that are multiples of three.

Grids

Divide the page

Determine the type of communication you’re creating and then divide the layout as needed.

In this example, we are creating a [??]

1. Set up margins to create your design area. All of the important elements such as the logo and messaging should be placed within this design area.

2. Set the type by aligning the text box to the grid. Follow the standard type sizes to create hierarchy.

3. If you’re using photography, place it along the grid. If possible, align it with the type that’s been set.

4. Add sequence frames if you’re using them.

5. If an inflection point is being used, place it in one of the four corners so that it aligns with photography and/or sequence graphics.

6. Using your photography or messaging as inspiration, select a color scheme for the layout and apply it to the sequence frames using our color and gradient guidance.

7. Place the logo using the grid and other elements to determine the best placement.

Layout

Motion principles

Our motion principles amplify the Jacobs brand expression into motion; strengthening awareness, deepening engagement, enriching storytelling and enhancing the brand experience.

Our momentum is an expression of our passion. Every move has a purpose, every action has a reaction. We are agile and we move with purpose and ease.

Clean and clear

Everything we do has purpose. We should ensure our every move we make is thoughtful and purposeful.

Connected

We’re at our best when we’re working together. We signify this by demonstrating the effect of every move, the action and the reaction.

Directional

To show our progress, we unify the movement of our components to be horizontal, vertical and diagonal. This motion grid communicates the progress we make.

Momentum

Logo & tagline

We’ve built an animation for our logo to demonstrate our passion and drive. As the most-prominent element of our visual identity system, this animation should be consistent. Be sure to include breathing room when using it to open or close a presentation or video. This ensures the impact it deserves.

Our motion artwork is a tool for you to use as is – there’s no need to alter it in any way.

Logo + Tagline

logo

J Mark

Our J-mark is prominent feature of our visual identity. Our animation for it reflect our passion and drive. It should always be used consistently with breathing room when opening or closing a presentation or video. This ensure the impact it deserves.

Our motion artwork is a tool for you to use as is – there’s no need to alter it in any way.

J Mark

Sequence Cards

We use our sequence framing as a tool in motion graphics to integrate a series of moments to tell a story. It creates a sense of moment by linking moments in time through sequence cards.

For ease of use, we’ve created set variables to ensure consistency.

Sequence Cards are always opaque

They are never set as transparent blocks

Sequence Cards

The edge-to-edge and overlap setting of cards can help create an expansive and layered tone.

Sequence cards are always overlapped and usually extend past the boundaries of the layout

They are never set with an unconsidered gap.

Sequence Cards

The sequence cards move in three directions – horizontally, vertically and diagonally. This produces a dynamic feel as well as reflects how we do everything with purpose and intention.

Sequence cards shift horizontally, vertically and diagonally.

They never shift or stack randomly.

Sequence Cards

We never treat our sequence cards as a static group. Each should reflect movement through kinetic physics.

Sequence cards are always staggered createing momentum & pace. Connected by a kind of kinetic physics.

They are never evenly spaced or treated as a static group.

Sequence Cards

In select moments, the sequence cards may convey an added sense of dynamism. By adding air between the cards, in a 3D space, cards are able to convey a clearer sense of their autonomy.

In special use moments, drop shadows add dimension.

Shadows are never to be set too heavy or bleed outside the footprint of the cards

spatial physics

We can apply 3D space to typography to add dimension and depth.

Depth can be used as a dimension

easing

We use easing to drive the motion of our motion graphics. It gives each element a sense of spatial awareness in the environment as well as in relation to the other components. It can also add finesse to our motion elements.

Easing should highlight a spatial awareness and a finesse

Easing should not be too playful.

UI

A person’s experience with our brand reflects how we deliver. Use thoughtful motion graphics that never take away from users’ ability to achieve what they want to do. Avoid adding unnecessary steps or time-consuming accents that detract from simple and straightforward interactions with us.

Horizontal card behavior mirrored in button tap/click.

Directional motion grid and sequence card relationship brought to life in swipe action

UI

When creating touch or responsive interactions, always be clear and straightforward.

Sucessful gesture interaction

Automatic return on failed interaction attempt.

Typography

When typographic treatment is subtle and isolated, it can take on some simple motion qualities. Never overcomplicate motion. Always think clear and straightforward.

The lower third of a screen is a place for educational information. It should support the communication and not detract from it.

Directional motion grid applied to headline reveal/hide.

Relationship highlighted in tagline call/response.

Lower third reveal and retract

INFLECTION POINT / ORIGIN AND CATALYST shapes

We use our inflection point to show what we do and the resulting impact. The origin shape is the source of action while the catalyst is the outcome.

Origin shape utilizing layout space with directional pivot. May only pivot to/from one position.

Catalyst shape morph.

INFLECTION POINT

Where the origin and catalyst meet is the inflection point. Explore space and scale, as well as timing to convey the impact of what we do and how we deliver.

Inflection point - push/pull.

Inflection point - relay

INFLECTION POINT

The inflection point may take on a subtle presence. This example highlightes the connection between our day and night modes.

Origin shape highlights the use of gradient reveals in both day...

...and night settings.

Illustration

Illustration is an element of our visual system that helps convey the creativity in our work. They often speak for themselves so there’s no need to over complicate or over detail the treatments of them.

Parallax scroll gives a sense of 3D space

Gradients

We can apply motion to our gradients. They should always be self-contained and not spill over into other elements. Use the guidance in the gradient section to understand how they’re used.

Gradient can push through space...

...or rotate through analogous colors in position.