Visual Style Guide

Get to know a little about our visual personality and what makes us who we are.
13
puzzle header

Thoughtful, well-crafted simplicity

Our visual brand is the expression of our character come to life. At Participate's core, we are knowledge creators dedicated to being the place where the world learns, together. Our approach is centered in building community, and we value being a place where inclusion, delight and daring to be bold are at the forefront of everything we do.

Our Logo

Participate is at the heart of where connection and knowledge creation unify. Our logo mark instills the importance of our inner-outer loop model of merging knowledge building with practice and community.
Visual Style Guide_Logo 1

This is our logo mark. It is preferred that you use our logo in this layout.
Visual Style Guide_Logo 2

Use the version with company name when possible. 
Visual Style Guide_Logo 3
Visual Style Guide_Logo 4
Visual Style Guide_Logo 5

You may change the yellow in the standard logo to one of the accent colors in the case that it matches better with the color scheme in your design.
Visual Style Guide_Logo 7

Please do not try to stretch or alter the logo in any way.
Visual Style Guide_Logo 8

Please do not use the brand name apart from the logo icon.
Visual Style Guide_Logo 6

Please do not use colors except primary blue and white.

Our Brand Colors

Visual Style Guide_Brand Colors

Accent Colors
Home Page_#EB6A75

HEX #EB6A75

RGB (235, 106, 117)

CMYK (0, 55, 50, 8)

Home Page_#1E2F8E

HEX #1E2F8E

RGB (30, 47, 142)

CMYK (79, 67, 0, 44)

Home Page_#02A0A0

HEX #02A0A0

RGB (2, 160, 160)

CMYK (99, 0, 0, 37)

Home Page_#00804F

HEX #00804F

RGB (0, 128, 79)

CMYK (100, 0, 38, 50)

Home Page_#FDA49F

HEX #FDA49F

RGB (253, 164, 159)

CMYK (0, 35, 37, 1)

Home Page_#217DED

HEX #0E6FE6

RGB (14, 111, 230)

CMYK (85, 47, 0, 10)

Home Page_#E9DCCF

HEX #E9DCCF

RGB (233, 220, 207)

CMYK (0, 6, 11, 9)

Functional Colors
Home Page_#221916

HEX #221916

RGB (34, 25, 22)

CMYK (0, 26, 35, 87)

Home Page_#B8BCBF

HEX #B8BCBF

RGB (184, 188, 191)

CMYK (4, 2, 0, 25)

Color contrast and accessibility →

In order to align with accessibility standards, combinations of our brand colors have been tested with an ADA compliance contrast ratio checker to determine which colors have the best outcome for easy readability. These combinations are primarily recommended for text readability at all sizes, and will be adhered to across all content creation. With graphics and illustrations, the color combinations are more flexible; however, we recommended that you check color contrast ratios for colors as you design.

The colors combinations below are compliant with accessibility standards. For example, when using a yellow background and deciding on a text color, you may pair it with our navy, blue or black. 

Visual Style Guide_NavyVisual Style Guide_Yellow

Visual Style Guide_Blush Visual Style Guide_BlueVisual Style Guide_TealVisual Style Guide_GreenVisual Style Guide_PinkVisual Style Guide_OG BlueVisual Style Guide_TanVisual Style Guide_White

 

Our Brand Typeface

Visual Style Guide_Metropolis
Visual Style Guide_Illustration

Illustration

To reflect the diversity of ways in which we learn, connect and grow, a staple of our illustration style is the layering of our classic shapes and weaving flowing lines throughout to demonstrate connection and the ebb and flow of learning. Shapes are universally understood, dynamic and accessible. Our illustrations maintain rounded corners for a more welcoming feel. Any transparency is set to 40% opacity. information in one line.

Our classic shapes
Visual Style Guide_Illustration Shapes

Iconography
users-branded-01
ballot-check-branded
chart-line-branded
cogs-branded

Bold Flair

A glow effect can be added to designs to add intensity. This effect is used sparingly and in one of two scenarios: (1) to emphasize a certain element in the design and (2) as a background element.
Visual Style Guide_Illustration 3
Visual Style Guide_Illustration 2.1

Crafted with Intent

When crafting illustrations, we use positive and negative space to convey a message. Transparency, overlap and color choice are all essential components in communicating messages in our visual style. 
Visual Style Guide_Illustration Full

Photography

We use inclusive, bright photography as a way to celebrate the diverse human identities represented in our user base. Feeling like you can see yourself in our ecosystem is of utmost importance to us. 

Photos may also be masked with one of our signature illustration shapes to maintain consistency throughout visual language.
Visual Style Guide_Photography