WGU | STYLE GUIDEIllustration

WG U ST Y L E G U I D E 2

WGU ILLUSTRATIONSIllustration is one of our most important forms of communication. It has the power to capture and convey both abstract and complicated ideas quickly, then etch those ideas into the mind of the viewer. Illustrations not only decorate, they inform and inspire. WGU’s illustrative style combines strong organic shapes, flat fields of color, and subtle linear elements to create a progressive, contemporary look.

ILLUSTRATION STYLECOLORS

WGU PALETTE

COLOR PALETTE

The WGU brand uses a bold, fluid color palette designed for flexibility across a broad array of communication mediums. Our illustrations use the same color palette to maintain brand consistency while allowing the illustrator a wide range of creative expression.

WGU Blue (Pantone 540) is the primary color for all WGU communications and should remain the primary color in layouts that use WGU illustrations. Our Secondary Blue (Pantone 2209), grays, and whites also play an important role in the WGU palette. Colors used in our illustrations should never overpower those predominant colors. WGU’s color palette also includes accent colors chosen to complement those blues and grays. These accent colors and their tints offer strong support to our primary blues in WGU illustrations.

PRIMARY COLORS

WGU Blue is the core of our brand identity and should always be the primary color in any university communication. WGU Blue is used in our brand logo-and-tagline lockup. In illustrations, it is the suggested color for linear elements and often becomes our background color. 10

0, 5

7, 1

2, 6

6CM

YK

540

PAN

TON

E

0, 48, 87HEX: 003057

RGB

WGU Blue (Primary Blue)

WEB

PR

INT

WGU Light Blue is complementary to our primary color, WGU Blue, and is designated for the state name in our state logo-and-tagline lockups and department logos. It is also used in the background elements of WGU’s illustrations.

WGU Light Blue (Secondary Blue)

79, 2

3, 2

3, 1

9CM

YK

2209

PAN

TON

E

73, 134, 160HEX: 4986AD

RGB

WEB

PR

INT

WG U ST Y L E G U I D E 3

SECONDARY COLORS

NEUTRAL COLORS

The accent palette consists of five bold colors chosen to attract attention and add visual energy to our communications. Accent colors and their tints often play a primary role in WGU illustrations.

ACCENT COLORS78

, 0, 1

00, 2

CMYK

362

PAN

TON

E

80, 158, 47HEX: 509E2F

RGB

WEB

PR

INT

0, 2

9, 1

00, 0

CMYK

7408

PAN

TON

E

246, 190, 0 HEX: F6BE00

RGB

WEB

PR

INT

0, 5

4, 8

7, 0

CMYK

715

PAN

TON

E246, 141, 46

HEX: F68D2E

RGB

WEB

PR

INT

9, 1

00, 6

4, 4

8CM

YK

202

PAN

TON

E

134, 38, 51HEX: 862633

RGB

WEB

PR

INT

53, 9

9, 0

, 0CM

YK

513

PAN

TON

E

147, 50, 142HEX: 93326E

RGB

WEB

PR

INT

The neutral colors in our illustration palette provide three recommended shades of gray that can serve as the primary color of an illustration’s linear elements, or as the color in the illustration’s background elements.

40,

30,

20,

66

CMYK

10COO

L G

RAY

99, 102, 106HEX: 63666A

RGB

WEB

PR

INT

20, 1

4, 1

2, 4

0CM

YK

7COO

L G

RAY

151, 153, 155HEX: 97999B

RGB

WEB

PR

INT

4, 2

, 4, 8

CMYK

1COO

L G

RAY

217, 217, 214HEX: D9D9D6

RGB

WEB

PR

INT

ILLUSTRATION TINTS

The colors in WGU’s palette are used in illustrations at either full-strength or as a 50% tint of the full-strength color. (See “Using the Illustrious” for more details.)Only the color tints represented below should be used in WGU illustrations. WGU’s Primary Blue PMS-540 should never be used at less than full-strength.

78, 0

, 100

, 2 5

0%CM

YK

362

50%

PAN

TON

E

167, 206, 151HEX: A7CE97

RGB

WEB

PR

INT

0, 5

4, 8

7, 0

50%

CMYK

715

50%

PAN

TON

E

250, 198, 150HEX: FAC696

RGB

WEB

PR

INT

9, 1

00, 6

4, 4

8 5

0%CM

YK

202

50%

PAN

TON

E

194, 146, 153HEX: C29299

RGB

WEB

PR

INT

53, 9

9, 0

, 0 5

0%CM

YK

513

50%

PAN

TON

E

201, 152, 198HEX: C998C6

RGB

WEB

PR

INT

79, 2

3, 2

3, 1

9 5

0%CM

YK

2209

50%

PAN

TON

E

164, 194, 207HEX: A4C2CF

RGB

WEB

PR

INT

20, 1

4, 1

2, 4

0 5

0%CM

YK

7 5

0%CO

OL

GRA

Y

217, 217, 214HEX: D9D9D6

RGB

WEB

PR

INT

WG U ST Y L E G U I D E 4

TRANSPARENCY, GRADIENTS, AND TEXTURES

ORGANIC SHAPES & OFF-CENTER DESIGN ELEMENTS

Transparencies, gradients, and textures are not used in WGU illustrations; they utilize only flat fields of color.

The WGU illustration style incorporates organic shapes and graphic elements that give the final product an unpredictable energy. That energy is further enhanced through the asymmetrical alignment of many of its background elements.

ORGANIC SHAPES

TEXTURES AND LINEAR ELEMENTS

Organic shapes

OFF-CENTER DESIGN ELEMENTS

Off-center design elements

WG U ST Y L E G U I D E 5

We default to a 1pt stroke for WGU illustrations.

The stroke in linear elements in WGU illustrations uses the round cap and round join settings.

Linear elements used in WGU illustrations should always be in either WGU Blue (Pantone 540), Black, Cool Gray 10, or White.

STROKE COLOR

STROKE WEIGHT

STROKE CAPS AND CORNERS

WGU BluePantone 540

Black Cool Gray 10 White

LINEAR ELEMENTSAll WGU illustrations make use of some linear element in the main focal area of the illustration. That linear element can be straight or it can have a flowing organic quality, but it should always retain an uncomplicated simplicity.

Organic elements Straight elements

WG U ST Y L E G U I D E 6

When illustrations appear on a light background, the stroke of the illustration will default to Primary Blue, Black, or Cool Gray 10. Fill colors for background elements will default to the colors shown on our Illustration Tints (See “Illustration Tints” section). No full-color versions of our colors should be used.

LIGHT BACKGROUNDS

USING THE ILLUSTRATIONS

Putting all of these elements together for use in a practical setting is best achieved by following simple guidelines that vary based on the color of the background the illustration appears on.

When illustrations appear on a dark background the stroke of the illustration will default to white. Fill colors for background elements will default to the full-color versions of any of the colors from our Accent Color pallet (See “Accent Colors” section). No color tints should be used.

Special Note: Hero Illustrations (see “Hero Illustrations” below) that appear on a dark background should include a white box that contains and organizes any background elements.

DARK BACKGROUNDS

PUTTING IT ALL TOGETHER

Tinted fill-colors (See “Illustration Tints” section)

Light backgroundWGU Primary Blue, Black, or Cool Gray 10 stroke color

Full-color fills

Dark backgroundWhite stroke color

WG U ST Y L E G U I D E 7

Hero Illustrations are used to tell complex stories. They typically feature one large central element, often a person, surrounded by illustrative elements that continue the visual narrative.

HERO ILLUSTRATION

TWO KINDS OF ILLUSTRATION

These rules apply to illustrations that fall into one of two categories: Hero or Spot Illustration. These two approaches to illustration fill distinct needs.

HERO AND SPOT ILLUSTRATION

Elements that appear in the background of a Hero Illustration convey the illustration’s secondary information and should not overpower the primary information conveyed by the foreground information. For this reason background elements in a Hero Illustration use the less prominent colors from our Illustration Tints palette (See “Illustration Tints” section).

The elements that appear in the foreground of Hero Illustrations carry the primary part of the visual messaging of the Illustration. They should stand out. For this reason, the foreground elements of a Hero Illustration will utilize full-color versions of the colors from our Accent Color pallet (See “Accent Colors” section).

The visual information that is represented in Hero Illustrations is more complex then that used in Spot Illustration. For this reason we approach the foreground and background of Hero Illustrations in different ways.

BACKGROUNDS ELEMENTS

FOREGROUND ELEMENTS

HERO ILLUSTRATIONS: BACKGROUND & FOREGROUND

Background elements

Foreground elements

WG U ST Y L E G U I D E 8

Spot Illustrations are simple visualizations of ideas that will be used as stand-alone pieces. While they are often simple distillations of a single idea, they can also be dynamic narratives of larger concepts.

SPOT ILLUSTRATION

Special Note: Hero Illustrations that appear on a dark background should include a white box that contains and organizes any background elements. With this exception, Hero Illustrations that appear on a dark background follow the same rules as Hero Illustrations that appear on a light background.

Dark Background

Containing box