Color

Find our complete color theme below, with class slugs. All UI elements, whether reusable components or custom code, use these foundational colors.

Class names follow the same Tailwind utility class format, with the .hc- prefix by default. For instance, to add an Emerald 400 background color use .hc-bg-emerald-400, or to set the text to be Peacock 500 use .hc-text-peacock-500.

Neutral Colors

Neutral colors are the foundational color palette used as defaults for all components and for backgrounds, text, borders, and layout.

Please see our more detailed table below (@todo) on general guidelines for the color weights.

Notably, 50 and 100 should be used for page and component background colors when offsetting against white is necessary. Use 500 for borders and button backgrounds, 600 for hover states, and 900 for neutral section headers or title text.

Brand Colors

Brand colors are the product-specific color palettes for our design system, including a few overall base colors used in marketing materials. You can always pair White, Grays, Charcoal, and Black with any of the product colors.

Base colors

Connect

Connect has a green-based color palette. Use Emerald as the primary color, Forest as the dark accent, Pea as the regular accent, and Lime as the contrast accent.

Please use Lime in moderation! It looks great for smaller things like status indicators or a secondary color in two-toned icons.

Attend

Connect has a purple-based color palette. Use Indigo as the primary color, Aubergine as the dark accent, Lilac as the standard accent, and Lavendar as the contrast accent.

Lavender isn’t as wild as Lime so it can be used with a bit less consideration.

Boost

Boost has a blue-based color palette. Use Peacock as the primary color, Navy as the dark accent, Sky as the standard accent, and Cornflower as the contrast accent.

Text Colors

Font colors are crafted for readability and accessibility. Primary is the default body text color; use this for inline instructional text, values in tables, and other focused or important content. Use Secondary text for subtext, second lines of text with contextual information, table headers, or meta data.

Semantic Colors

Semantic colors communicate purpose and convey messages. For example, green has a positive connotation and red has a negative connotation. We often use green to convey success and confirmation, and we use red to convey errors and destructive actions.