Skip to content

Add Bootstrap color variables to Figma

We are still working on the final color system in #66. However the New websites file on Figma also lacks defined color roles in the form of color tokens or variables. We should add these, based on whatever color tokens Bootstrap uses in Bootstrap 5.3. We should make sure to include variables for interaction states too.

Docs: https://getbootstrap.com/docs/5.3/utilities/colors/

Todos

  • Use Bootstrap's Sass variables as a basis for color variables in Figma, and create new variables as required (but ideally sparingly). In some cases, it may be easier to inspect-element on common Bootstrap components to see what color variables Bootstrap is using.
  • Link these variables to our foundational color palette to stay in sync with future updates
  • Update the designs for Donate-dot.
  • Update the designs for Download-dot.
  • Update the designs for Support-dot.
  • Update common components.
  • Update custom components.