Standardize color system and Usage

[anitadesigns]

Dependency

• [x] #1227

Overview

UXR conducted background research on color theory and typography to support our work in standardizing our color system and improving our design system.

Considering the background research done, the design team now needs to establish our color system. This not only includes our branding colors but also establishing naming conventions, dark mode colors, variants, accessibility, and usage. Material Design has some great tools for us to use to finalize our color system and implement it in our design system.

Consider the Voice and Tone when establishing branding/primary colors

When establishing EA's color system, follow these principles from Material Design:

Action Items

• [x] Review UXR background research on color theory
• [x] Explore having monotone color scheme vs complimentary
• [ ] Establishing colors
  • [ ] Primary/branding color
  • [ ] Secondary/Accent color
  • [ ] Semantic color (for warnings and alerts)
  • [ ] Neutral colors (background/written text)
• [ ] Ensure there is contrast and accessibility
  • [ ] Contrast checker
  • [ ] w3 guidelines
• [ ] Implement color usage in design system
• [ ] Remove dependency label from #1341

Resources

• A Guide to Colors in a Design System
• Material Theme Builder
• Color generator
• The Science of Color and Design
• UXR summary of findings on color and typography
• UXR slide deck on research findings
• Main: #1226

[github-actions[bot]]

Hey @jyehllow! Thanks for taking this issue.

To help keep everyone in the loop, please comment your Estimated Time to Completion (ETC) below!

Thanks again!

[github-actions[bot]]

Hey @jyehllow! Thanks for taking this issue.

To help keep everyone in the loop, please comment your Estimated Time to Completion (ETC) below!

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[jyehllow]

Progress: explored color combinations, have a few palettes to work with Estimated Time to Completion (ETC): 2-3 weeks? Blockers: None at the moment

[sylvia-nam]

Added dependency following PM-Leads meeting discussion on 5/13

[anitadesigns]

Hi @sylvia-nam ! I may have misunderstood your question but this current issue had a dependency on #1227 so I added "Dependency" section to the top of the issue and listed #1227 underneath. Since #1227 is complete, the design team can work on this issue. #1341 ; however, is dependent on this issue to finish before the colors can be tested on so I am listing this issue to #1341

Also removing the dependency label to this issue since the #1227 , the issue this one was dependent on , was closed

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[anitadesigns]

Progress: The Design team presented three color palettes to the team two weeks ago during out All Teams meeting. As a UXD team, we reviewed the feedback and decided to conduct a competitive analysis on the hue and saturations that civic tech organizations use to help us find our new brand color. Estimated Time to Completion (ETC): We should be able to complete the competitive analysis in two weeks. Next we would explore blues and then put together our finalized color palette which would undergo testing. Blockers: The Design team is working on this during each of our meetings and are focusing on finishing #1050

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[vanessaavviles]

Please provide update:

Progress: Blockers: Availability: ETA:

[github-actions[bot]]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!