Have Site-Wide standards for Colors that developers can use

[entrotech]

Goal:

Make it easy for developers to use CSS styles/layouts confidently, and for designers to be able to easily update design standards.

This is probably figuring out the process for how do we best work together — perhaps CSS documents, working in Figma, etc. (perhaps working in Figma, Export the CSS from Figma, then that CSS becomes the new site-wide CSS??)

Overview

The application currently has not implemented agreed-upon standards for colors and typography. We should have documented standards that are implemented in the code base as re-usable styles. This will require coordination between UI/UX and developers.

Action Items

• Review and propose standards for colors and typography in the Design System Figma file
• Work with project team to get agreement on the above, and update the Figma file accordingly - clearly annotating the styles as approved by the project team.
• (dev) Implement the corresponding styles in the Material-UI theme style sheets
• (dev) Apply these styles to the existing React components.
• Review all versions of the logo and identify which ones are current.
• Create a Communications Guide using all of the design elements used for the website.

Resources/Instructions

Color settings
https://github.com/hackforla/food-oasis/blob/develop/client/src/theme/colors.js

[staceyrebekahscott]

Updated issue title and included current versions of the logo as part of the scope.

[staceyrebekahscott]

@JohnHaoHuang @sei1122 Moving this issue to the Prioritized Backlog. I'd like to encourage thinking about a redesign of the site, but I'd like to wait until Seiko is finished with her Heuristics issues. I like what is happening with the color scheme changes and perhaps we can use those elements in the new design plans.

Focus on making progress on your current issues, but this would be next in line to take on.

[staceyrebekahscott]

@sei1122 Assigning this to you. Given the work you have done recently, it is apparent that standards need to be created for all of the design elements for Food Oasis.

As part of the scope for this issue, I am including the development of a Communications Guide, Communications Guide for Code for America's Get Your Refund program. All projects should have this for creating slide decks and documents. This should match anything created for the website, which is why I am adding it to the scope of this issue.

[sei1122]

Here are things to consider and plans. Let me know if you have any suggestions @fancyham, @entrotech.

How do we want to maintain the design system as a team?

• How will you maintain this system?
• How will you promote and encourage usage?
• How will you communicate updates?

This is my suggestion for the design system file maintenance. It is similar to the dev environment

• Main file (published file, one source of truth, maintain and marge by one to two people)
• Working file (designers use this while updating the design system)
• Change log doc(Track change log)
  Example: Salesforce release note

Question to ask Dev team:

• Do they use Food Oasis Design System in Figma?
• Do they have a style guide code file?
• Do they have any difficulty with the design system?

MVP of this project

1. Standardize Typography, Color, and Logo
2. Update Figma file, Update Figma setting (Typography, color)
3. Update website style
   *We also need to review components but I'd like to do this after completing these and maybe create another issue.

[fancyham]

I'm more familiar with interaction design stuff, less so with the visual, style guides, and communicating standards but…

I'd love if we could include in the style guide lots of vision / exemplar / example / archetype screens.

Showing things like the landing screens and the logic for how our layouts respond to different display sizes.

Full-screen layouts would show how elements fit together, spacing, color etc.

I think that'd be good for the broader team, also, since then everyone could see what we're aiming for, even if they don't understand CSS or the tech side.

The CSS would be a subsequent step or artifact, I think?

Getting to those exemplar screens / layouts:

It would be nice to have a design process where we can create mockups, compare and contrast different styles/options where we can try out ideas and do several rounds of design refinement to get to the final 'vision' example screens? That could be a larger project where multiple designers contribute to it (visual designers in particular would be great), too, as that could be quite fun as well as bringing really different approaches into consideration.

[sei1122]

@fancyham, I will ask about more your vision at the meeting.
I'm wondering you are talking about the rebranding and create moodboard or design testing?
or expand the design system that include variety of things.

Do you have any example that I can look at?

[fancyham]

Thinking more of the rebranding / mood board direction / ideal layouts and vision mockups side of things. Something where we can share inspirations and ideas, but then to distill those ideas into our own designs with vision layouts.

I'll see if I can find something sharable — I'm thinking we could use one of the figma pages as a giant wall for design ideas and inspiration to start.

[sei1122]

I see I got it.
In that case, one Figma file should work fine :)

[fancyham]

There are some Figma tools that make export to CSS easier — might be useful to make designs, then to export CSS that the developers can use without additional modification, possibly making incremental site changes easier?

One example: Builder.io - Figma to HTML, React, and more (thanks, @nkiwan )

[fancyham]

Todays meeting, we talked about what the goal of this issue is, which is, we think, a way to make it easier for both developers and designers to refer to a single 'source of truth' for how buttons, fonts, and colors should look.

@sei1122 is going to talk to devs to ask how they use CSS and to talk about how we might be able to make this easier to maintain.

Bryan (me) mentioned that it's a lot of manual work to make small changes and keep track of those canges and asked if there's a way we can keep the Figma files and CSS in sync somehow. Either for Figma to export CSS, or perhaps to import CSS into Figma.

I also mentioned "exemplar' (example) pages / archetype pages / dummy layout mockups are really useful for everyone to get a sense of how all the pieces fit together on the page, so we all understand what the intended look and feel is.

And finally, we discussed a separate effort to do big-picture improvements to the site design — mood boards, competitive analysis, ideation and discussion, and creating vision mockups for how we'd like the site to look and feel so that we can see our target, even if it take a little while to get there.

[sei1122]

I'm going to attend Monday's dev meeting.

Questions to ask engineers.

• What is the current working process?
• Do you have a style sheet of font, colors, and components?
  • Material - UI theme style sheet (this is mentioned on the issue)
  • React components (this is mentioned on the issue)
  • If using these, how do you maintain them?
• What are the pain points of the current workflow/ system?
• Any suggestions for improvement?

[sei1122]

@staceyrebekahscott, @fancyham.
I think we should make milestones for the Design System Update. The project is pretty big and by breaking the issue, other designers can take the issue too.

Here are some breakdown idea

1. Color, Typography, and Logo (This issue)
2. Exemplar / Example / Archetype screens.
3. Moodboard / Vision / Branding
4. Component Review
5. Communications Guide

[staceyrebekahscott]

@sei1122 @fancyham I definitely like the idea of setting milestones for this. I'd like to wait until we complete our roadmapping sessions before adding these to Github. But all of these ideas will be considered during roadmapping so the work can be aligned with other project priorities. The breakdown above is a great starting point. Thanks Seiko!

[sei1122]

Meeting note: Sep 12
Seiko & John H had a meeting with the Engineer team

What is the current working process?

• Design -> start development by using the theme (style sheet file)
• Engineers don't so often change the theme file (there are 2 stylesheets for admin and food seeker interface) because that could affect all the pages.

Do you have a style sheet of fonts, colors, and components?

• Material - UI theme stylesheet (this is mentioned on the issue)
  adminTheme.js (admin dashboard side)
  clientTheme.js (food seeker interface)

Static page component

React components (this is mentioned on the issue)

If using these files, how do you maintain them?
Themes don’t update so much. Usually, change each file.

What are the pain points of the current workflow/system?

• Hanna said ideally in one file. John D said there are some benefits to having separate theme files like loading faster
• Design file shows one device but sometimes doesn’t show other screens so engineers don’t know what the other screen sizes' design look like
• It is hard to navigate the style because the style is in many places (theme file, CSS file, individual .js file)
  -There are 2 design system files on Figma. We don’t know which one we should use

Any suggestions for improvement?

• Updated Figma style sheet.
• Engineers can’t track what the designer changed
• Communication between designer and engineer
• Figma pixel inconsistent -> Find bug -> create issue -> fix
• If we use the same wording both on style sheets and Figma files, it may help to find the style quickly.

How long does it take to change the style?

• Font size changes probably take time for testing to make sure the layout is not breaking
• Dropping the shadow type of style shouldn’t take time

[sei1122]

I finish auditing the Food seeker and the admin site.
Some of the colors I couldn't find on the interface.
The next step will be to talk to engineers and ask if they are still using those colors.
If it is not used, we take them out from the Style sheets.

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=2943%3A7817

[sei1122]

I created the things we need to clarify.
The next step is to talk to @fancyham, and @entrotech and decide what to do in each section.

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=7578%3A11874

[sei1122]

I had a meeting with @entrotech and @fancyham today.
We reviewed the list of items that need to be clarified and discuss the solution.
I receive feedback so I will test some of the colors and finalize the list.

Next Step

1. Testing colors that we discussed today
2. Review with Design team and finalize the list
3. Discuss with John D with the list
4. Make the latest color list
5. Set a color naming convention that applies to both Figma and Code files.
6. Synch with the Dev team.

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=7578%3A11874

[entrotech]

Issue #1419 fixes background color on "Back to List" link on the Stakeholder Detail panel

[sei1122]

Meeting Note: Nov 29
Had a meeting with John D, Bryan, James, and Natalie.

We checked each item on this file.
https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=8461%3A16047&t=ic6KJVeAglEFSReI-4

Next step

• Hover link style. When hovering the link, what is the standard color and behavior -> This should be included next Design System project
• Currently, form table color is used #00000 with different opacities. Also, solid colors. Seiko will research more and send suggestions.
• Tested approved green color. Since we will change the warning red color, the green may be better with a muted tone.
• Test a few more visited colors. The Suggested visited link color looks a bit bright. Tested darker purple that matches with new blue link color.

[sei1122]

Created sample colors based on the last meeting feedback.

• Form Color
• Approved Green that match with new warning red color
• Visited link

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=8870%3A16102&t=klZ3Vx8pBfBWcU9X-4

Action Item:
Ask design team which color works the best and finalize the color

[sei1122]

Consolidated colors.

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-%231?node-id=9403%3A16102&t=qzwjKQFBknDyzaTP-4

Next step

1. Research other design systems - how they categorize colors.
   For example, Hack for LA design system guide recommended organizing colors Primary colors, Secondary colors, Extended colors, Neutral colors, and Functional Colors.
2. Categorize colors and review naming.
3. Finalize color files.

[sei1122]

@entrotech
This is suggested colors. Let me know if you have any suggestions.
After the dev update, I will check the update on the dev site, and we can make the final adjustment.

https://www.figma.com/file/D3oq9QOXl0rFkwr
EUJbABs/FOLA-Design-%231?node-id=9954%3A17472&t=w7UmZEz7mHmotyiB-4

[sei1122]

Narae used these colors for buttons and thinking to include the colors.

She used this to generate colors and naming
https://materialpalettes.com/

Things to consider

• How can we make a consistent naming convention when we create shade?
• When we make color tones for other colors, can this be applied systematic way?

[sei1122]

I met with @entrotech on May 16th to learn about our code's naming conventions for colors.

Material UI, the color setting is main, light shade, and dark shade settings.
Here is a code sample.



import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: {
light: '#757ce8',
main: '#3f50b5',
dark: '#002884',
contrastText: '#fff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
},
});


Reference
https://mui.com/material-ui/customization/color/
https://mui.com/material-ui/customization/palette/

After discussing color settings with John, I have decided to incorporate the semantic names into our color palette.



Here is the final design of the color palette



https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-%231?type=design&node-id=11004-18134&t=PudBcMURnFifKrLp-4