Design System - Style Guide: Color Palette

[lrchang2]

Overview

As part of the Branding Guide, we need to choose a color palette for Access the Data to reflect our brand's personality in all products/resources created.

Additional Information

Brand Personality: Simple, Trustworthy, Empowering, and Friendly

Action Items

Color palette is required to have a certain level of color contrast to be ADA compliant #26. Use color contrast checker to ensure that.

• Industry research from Comparative Analysis of Websites (different from data sources) and MVP Feature Prioritization  #8 and evaluate competitor colors
  • Consider how to differentiate Access the Data from its "competitors"
• Identify target market and message to target market found in User Personas for Website #27 and User Stories for Website #45 and how color can convey it
• Determine use cases for colors
  • Design System - Brand: Redesign Access the Data Logo  #52
  • Templates
    • Design System - Template: Presentation slides for the workshops #56
• Draft up color schemes
• Check if contrast levels are high enough to be ADA compliant with color contrast checker
• Get feedback from team and refine color schemes with feedback
• Finalize color scheme

Color System

• do any audit for colors used on the mobile and desktop high-fi wireframes
• collect all colors and HEX codes and compare it to current color system and determine if there are any colors used missing in the color system
• Color System includes
  • Primary Colors that represent the brand identity
  • Secondary Colors that highlight, compliment and/or contrast the primary colors
  • Extended Colors are lighter and darker shades of the main primary and secondary colors
  • Neutral Colors that are used for background and borders
  • Semantic/Functional Colors that communicate purpose (i.e. state; red=error, green=success or usage; background color, text color, label color etc)
• check contrast and accessibility of color pairings in wireframes (use able plugin in Figma)
• makes sure all design system colors are in the Figma Styles

Resources/Instructions

Web Content Accessibility Guidelines
color contrast checker

All work for branding guide is condensed in the current draft of guide. Guide also contains Content Template Guide #22 and Front-End Style Guide #40

figma file with color palette
figma styles in design systems

[lrchang2]

@henrywang7 Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.

[henrywang7]

Progress: Made 4 first drafts of possible color schemes
Blockers: Would like to look at any wireframes/layouts if any have been made so far so I can get an idea of how the UI looks, and so I can better show how colors will be used
Availability: ~5 hours
ETA: Early next week
Pictures:

[abryant35]

Please add update using this template (even if you have a pull request)

@PazauMoua Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #access-the-data channel.

Thank you! :)

[PazauMoua]

Progress: Still working on it - Looking at Henry's colors
Blockers: None at the moment
Availability: Will have update with accessibility and color palette posted by Monday 10/04 9pm
ETA: Monday 10/04 9pm
Pictures:

[PazauMoua]

Progress: Need to vote at meeting on options
Blockers:
Availability:
ETA:
Pictures:

[melissamurphy]

@abryant35 Suggest having this issue follow Storyboarding in the meeting. Storyboards will be presented today and will serve to 'Identify target market and message to target market' [mentioned as a step in this issue] if discussed directly before the Color Palette review.

[PazauMoua]

Progress: working on finalizing colors/making sure colors are accessible
Blockers: NA
Availability: Working on this today through weekend
ETA: Tuesday 10/19 9pm
Pictures:

[PazauMoua]

Here are more color choices. I will create mood boards so you guys can see the possibilities for the colors.

Blue - Trustworthy
Yellow - Friendly/Fun, Happiness
Muted colors in the secondary colors - Simple
Coral - empower

Purple - Creativity, Peace, Independence, Wisdom
Turquoise - Protection, Hope
Orange - Enthusiasm, Happiness, Determination
Yellow - Friendly/fun, Happiness

Blue - Trustworthy
Lime Green - Confidence, High energy
Light Blues - Calming
Pinks - Kindness

[lrchang2]

[ExperimentsInHonesty]

@PazauMoua Above is the pallet and the font selected for the project. Please indicate this in figma by moving all the non selected to another page called Branding and Logo - Archived 2021-11-03, and move it to the Archived section at the bottom of the list of figma pages. Then you can close this issue.

[lrchang2]

closing issue, color palette confirmed and in design system figma

[lrchang2]

reopening to update design system