Colors

The core color palette used across the Civic Tech DC website.

Our color palette relies on the USWDS color system, customized with our brand colors. These tokens are defined in sass/theme/_uswds-theme.scss.

Primary Colors

The primary colors define the overall look and feel of the site, used for navigation, primary buttons, and prominent headings.

Accent Colors

Accent colors are used to draw attention to specific elements, such as active states, badges, or card borders.

Usage in SCSS

You can use these colors in custom SCSS using USWDS color functions:

// Background color
.my-custom-element {
  background-color: color("primary");
}

// Text color
.my-custom-text {
  color: color("accent-warm");
}

Utility Classes

Alternatively, use USWDS utility classes directly in your HTML:

<div class="bg-primary text-white padding-2">Primary Background</div>

<div class="text-primary text-bold">Primary Text</div>