Colors

They make up a significant portion of the user’s experience. Use the wrong colours, and the user might think we’re completely unprofessional. (We’re hosting our website standards in a public GitHub repository. The point still stands.)

Use this as guidance, and feel free to change up the colours if necessary. Just make sure the colour contrast still stands.

Color Palette

Main Surfaces

Background	Contrast 1	Contrast 2	Border	Primary Text	Secondary Text	Surfaces
#161618	#3A3A3B	#636363	#3A3A3B	#FEFEFE	#EDEDED	#FEFBFF

Accents

Primary Accent	Accent Text	Secondary Accent	Secondary Accent Text	Primary Container	Primary Container Text	Secondary Container	Secondary Container Text
#A73355	#FFFFFF	#ffb95b	#3B3B3A	#A7335A	#FFD9DF	#643f00	#ffddb6

Note

There’s no previews of the colors - yet. You have two options.

• Visit the (somewhat outdated) Google Doc in our internal drive at General Team -> Website -> Website/Design Standards
• Copy and paste these hex codes into Google.

We’ll come up with a solution eventually

Usage

• Background is used primarily.
• Use Contrast 1 and Contrast 2 to help break up space.
• Borders are used around images and around boxes.
• Primary text is used for headings.
• Secondary text is used for body content - like words.

Surfaces vs. Containers

Surfaces are used for places where you need to put emphasis on stuff. They aren’t used for clickable items like buttons.

Containers are used for buttons.

• Use the primary container for most stuff.
• Use the secondary container for stuff that shouldn’t be highlighted.

Primary vs Secondary

Use the primary and secondary colors as highlights. Use the accent text with their corresponding accents.

Caution

Don’t use secondary accent and secondary accent text for small text. Use primary instead. This is due to low colour contrast, which makes legilibity difficult at smaller sizes.

Use primary and secondary containers for clickable objects like buttons. Use the corresponding container text for these clickable objects.

Sources

• Background, contrast, and text colors taken from previous standards.
• Accent, secondary, tertiary, and containers based on Google’s Material Design standards.
• Most colors comply with WCAG 2.1 section 1.4.3