Standardizing the HFLA Design System

### Dependency
- [ ] Post Homepage launch when we recruit a new design team.

### Overview
With the new design system coming up, we need a way to relay to the team on what the intentions are behind the new designs.

### Detail
While we sometimes have to decide things on an "as-needed" emergency basis, the entire team benefits when we have firmer guidelines on utilizing the new designs because it reduces the amount of back and forth between team members, speeding up production.

See also:
- #577,
- #1416,
- [Figma](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464%3A3)

### Action Items
- [x] Discuss the new design system more in-depth so that there is a group understanding
- [ ] Create an issue for one of the checkboxes in the Components section below
- [ ] Add the link to the issue you made into the Components section (so the issue does not get made twice).
- [ ] As part of the auditing/researching/recommendations issue, include the following as Action Items (you can add additional Action Items as you see fit):
````
- [ ] Search and find where each component is by looking at the pages that are live on the website and also in [Figma](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464%3A0) for not yet live pages.
- [ ] Questions to answer/consider when working on this issue:
- [ ] Where should the component live? In other words, which file should the CSS for the component be in? Does this file need to be created?
- [ ] What are the differences between the classes that are located on the specific pages? Document those differences
- [ ] If they don't appear the same, should we rationalize them and make them the same across the page they show up on?
- [ ] Should the class(es) be renamed to be clearer?
- [ ] If research is necessary, summarize your research
- [ ] Summarize your recommendations for how to standardize the component and its code
- [ ] Have a Merge Team member or a Technical Lead to review and sign off on your analysis and recommendations
- [ ] Have a Product Manager review and sign off on your recommendations
- [ ] (Optional) Write a new issue for a developer to implement your recommendations.
- [ ] Here is the [How to create issues](https://github.com/hackforla/website/wiki/How-to-create-issues) wiki page for how we write issues on the Hack for LA Website Team
- [ ] Ask a Merge Team member or Technical Lead if you need help with writing an issue.
- [ ] Include this in the Action items of your issue
```
- [ ] Come up with a standard way to implement the CSS side (and, if applicable, HTML) of each component
- [ ] Implement the CSS side (and, if applicable, HTML) of each component
- [ ] Create/update a wiki for the design system component
- [ ] Update the GitHub action that will emphasize the use of the system
```
````
#### Guidance on how to make the issues
- The auditing, researching, and recommendations for how to standardize the component can all be in one issue.
- The issue for auditing, researching, and recommendations can be either a small or medium issue depending on the number of instances of each component on the webpage. For example, since accordions only show up twice throughout the website, if I were to write an issue for auditing, researching, and recommendations for the accordions, I would label it as a small issue.
- Note: Some issues have already been written for this epic (they are linked in the Components section)

### Components
- [ ] Accordions standardized
- [x] Accordions standards discussed (#1407)
- [ ] Audit accordions on website and in codebase
- [ ] Accordions standardized css and html implemented
- [ ] In the wiki, add a `Components: Accordion` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [ ] Buttons standardized ([Button Project Board](https://github.com/hackforla/website/projects/7?card_filter_query=complete+refactor%2Fstandardization+of+all+button))
- [x] Button standards discussed (#1352)
- [x] Buttons audited (#1921)
- [x] Button html/CSS implemented
- #2104
- #2158
- #2159
- #2165
- #2187
- [ ] In the wiki, add a `Components: Buttons` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [ ] Cards css standardized
- [ ] Cards standards audited (#2061)
- [ ] Cards html implemented (#2226)
- [ ] In the wiki, add a `Components: Cards` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [x] Colors css standardized - [Color Standardization Project Board](https://github.com/hackforla/website/projects/7?card_filter_query=design+system+audit%3A+swap+colors)
- [ ] In the wiki, add a `Components: Colors` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [ ] Dropdowns css standardized
- [ ] Dropdowns standards discussed
- [ ] Audit dropdowns on the website and in the codebase
- [ ] Dropdowns html implemented
- [ ] In the wiki, add a `Components: Dropdowns` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [ ] Filter tags css standardized
- [ ] Filter tags standards discussed
- [ ] Audit filter tags on the website and in the codebase
- [ ] Filter tags html implemented
- [ ] In the wiki, add a `Components: Filters` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [x] Header container css standardized(#1898, )
- [x] Header container standards discussed (#1898, )
- [x] Header container html implemented (#1898, )
- [ ] In the wiki, add a `Components: Header Container` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [ ] Input fields css standardized
- [ ] Input fields standards discussed (#1398, )
- [ ] Audit input fields on the website and in the codebase
- [ ] Input fields html implemented
- [ ] In the wiki, add a `Components: Input Fields` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [ ] Modals css standardized
- [ ] Modals standards discussed
- [ ] Audit modals on the website and in the codebase
- [ ] Modals html implemented
- [ ] In the wiki, add a `Components: Modals` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [ ] Sticky side nav css standardized
- [ ] Sticky side nav standards audit (#2173)
- [ ] Sticky side nav html implemented (#2174)
- [ ] In the wiki, add a `Components: Sticky Side Nav` wiki page
- [ ] Audit design system classes/code in Figma to make sure they match the codebase
- [x] Typography css standardized (#1743, )
- [ ] Fixing all the typography on the website will become it's own epic for devs. A new dev issue will be written as each of the Design Team ["Design System Audit: Text Elements:" issues](https://github.com/hackforla/website/issues?q=is%3Aopen+is%3Aissue+label%3A%22role%3A+design%22+Design+System+Audit%3A+Text+Elements+-milestone%3A%22w.+Ongoing+%22+) are completed and added to the new epic in order to track them.

### Resources/Instructions
- #577
- #1416
- [Figma](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464%3A3)
- Standardized Components wiki page (explains how the standardized components should work in general): https://github.com/hackforla/website/wiki/Standardized-Components

#### Historical information
- [x] ~#1927~
- Note: We are no longer updating/maintaining the [Design System webpages](https://www.hackforla.org/design-system). Read the decision record on [Maintaining the Design System webpages](https://github.com/hackforla/website/wiki/DR:-Maintaining-the-Design-System-webpages) for more info.