Color
Color is a crucial factor in highlighting our brand and brings a consistency across our products.
Primary color palette
These colors represent the base of our color system.
Pink 700
#DF285B
Blue 700
#180A5C
Purple 700
#59146C
White
#ffffff
Full range of color
The following color range is used to provide additional depth to the Pavilion brand. Some tints are simply meant to provide flexibility for elements like illustration, hover states, etc. while others play more critical roles as background swaths, header colors, etc.
Brand pink
100 | #FEF9F9
200 | #FFEDF2
300 | #FFD0DD
400 | #FEB1BF
500 | #FF768F
600 | #F14972
700 | #DF285B
800 | #BB1C48
900 | #920E32
Brand blue
100 | #EDEAFF
200 | #CEC6F4
300 | #998BDF
400 | #6D59CF
500 | #432CAE
600 | #2B1887
700 | #180A5C
800 | #0D0339
900 | #080122
Brand purple
100 | #FDF5FF
200 | #F4E0FA
300 | #DEB0EB
400 | #C57FD9
500 | #A34CBB
600 | #7F2A97
700 | #59146C
800 | #3E044F
900 | #250030
Gray scale
100 | #f5f5f5
200 | #EFEFEF
300 | #CCCCCC
400 | #a3a3a3
500 | #717171
600 | #525252
700 | #404040
800 | #262626
900 | #1A1A25
Background colors
While we have an extensive color palette, not all are suitable for background colors. Please use the following guide to ensure brand consistency.
Note: White is our primary background color and should be used to drive our clean brand aesthetic when possible.
Pink
Our primary brand color, pink, is the main color used for backgrounds through out the site. Specifically, the Pink 100 & 200 as they provide sufficient color contrast with a significant number of darker brand colors.
100 | #FEF9F9
200 | #FFEDF2
700 | #DF285B
Blue
Blue 600 & 700 are primary background colors throughout the Pavilion brand. These two colors have a high degree of contrast and can be used in a multitude of ways.
600 | #2B1887
700 | #180A5C
Purple
Used in very select areas and not a main brand background color. For example, our Community page uses purple as a hero background color to help distinguish it from our other main nav items. However, purple is not the color of community.
600 | #7F2A97
700 | #59146C
Typographic colors
Similar to background colors, we do not use our full color palette when highlighting typography. This ensures accessibility standards are met while maintaining brand consistency. If you have any questions, please reach out to the creative team.
Text on a specific background colors.
Not all colors are suitable for certain background types. Use this guide as a rule of thumb when creating designs that requires specific background colors.
Pink 100
Headline text: Blue 600
Paragraph text: Gray 700
Pink 200
Headline text: Blue 600
Paragraph text: Gray 700
Pink 700
Headline text: White
Paragraph text: White
Blue 600
Headline text: White | Pink 400 (secondary)
Paragraph text: White
Blue 700
Headline text: White | Pink 400 (secondary)
Paragraph text: White
Purple 600
Headline text: White | Pink 400 (secondary)
Paragraph text: White
Purple 700
Headline text: White | Pink 400 (secondary)
Paragraph text: White
Iconography on a specific background colors.
Similar to text colors, we want to achieve a specific brand aesthetic when using iconography across our brand. Below is a representation of iconography on various background colors.
Icons used on a light background: White, Pink 100, and Pink 200
For icons on a "light background" like White, Pink 100, and Pink 200, use the Pink and Blue versions of our icons as seen below.
For icons on a "dark background" like Pink 700, Blue 600, Blue 700, Purple 600 and Purple 700, use the Light Pink version of our icons as seen below.
Accessibility in color
We comply with WCAG AA standard contrast ratios:
-
Must pass 3:1 contrast: Any UI essential to understanding the experience and text 24px or larger (WCAG 1.4.11)
-
Must pass 4.5:1: Text smaller than 24px (WCAG 1.4.3)
See our color accessibility guidance for more information on specific usage guidelines.