Welcome to Participate's

Visual Style Guide

Get to know a little about our visual personality and what makes us who we are.
Visual Style Guide_Intro

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
Visual Style Guide_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

Given space restrictions, you may use either of these layouts. The logo icon may stand alone; however, please use the version with the 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 6

Do not change the Participate primary blue color unless the logo is on a dark background. Then, you may change the logo to white.
Visual Style Guide_Logo 7

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

Please do not use the brand name separate from the logo icon.

Our Brand Colors
Visual Style Guide_Brand Colors

HEX #111358

RGB (17, 19, 88)

CMYK (81, 78, 0, 65)

HEX #FAAF08

RGB (250, 175, 8)

CMYK (0, 30, 97, 2)

Accent Colors
#FDA49F

HEX #FDA49F

RGB (253, 164, 159)

CMYK (0, 35, 37, 1)
#1E2F8E

HEX #1E2F8E

RGB (30, 47, 142)

CMYK (79, 67, 0, 44)
#02A0A0

HEX #02A0A0

RGB (2, 160, 160)

CMYK (99, 0, 0, 37)
#00804F

HEX #00804F

RGB (0, 128, 79)

CMYK (100, 0, 38, 50)
#EB6A75

HEX #EB6A75

RGB (235, 106, 117)

CMYK (0, 55, 50, 8)
#0E6FE6

HEX #0E6FE6

RGB (14, 111, 230)

CMYK (85, 47, 0, 10)
#E9DCCF

HEX #E9DCCF

RGB (233, 220, 207)

CMYK (0, 6, 11, 9)

Functional Colors
#221916

HEX #221916

RGB (34, 25, 22)

CMYK (0, 26, 35, 87)
#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

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.
Visual Style Guide_Illustration

Our classic shapes
Visual Style Guide_Illustration Shapes-1

Iconography
users-branded
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

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 2.1
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