[ Audit Colors] in Landing page

[anitadesigns]

Overview

Extension of #823 . Audit mobile and desktop wireframes under "Design System Audit" on Figma. This issue is split into two parts: Auditing Mobile/Desktop wireframes and Auditing screenshot of page on expungeassist.org

Action Items

Auditing Mobile/Desktop wireframes

• Select each individual "atom" on a wireframe
• Assess what Hex code and color style is being used
• Add metadata (color swap, location, style being used, Hex code, opacity )
  Example:
  
• Use AutoFlow plugin to draw an arrow to each "atom" and element's color metadata
  • If "atom" is not using a color style, use the Orange (color style saved in Figma library) arrow and note the HEX code being used
  • If an old color style is being used, change the text sharing location and color style to red (use color style saved in Figma library)
• Note any inconsistencies to share with the team

Auditing screenshot of page on expungeassist.org

• Use Google Chrome's "inspect" tool to view website's code
• Assess what Hex code and .jss component is being used
• Add metadata on screenshot in Figma (color swap, location, hex code, .jss rule)
• Draw an arrow from element to metadata on Figma

Next steps

• Comment in this issue "Completed. Ready for Review" and tag "@anitadesigns". Add any other information that is important to share in the comments
• Unassign yourself and assign "@anitadesigns " to issue
• Move issue from "In Progress" to "Ready for Review" on the project board

Resources/Instructions

Reach out to @anitadesigns if you have any questions.

[anitadesigns]

Hexcodes were pulled, but missing the rest of the metadata. Need to re-do to keep a consistent format

[mbui31]

@anitadesigns I commented in the Figma file that the live website couldn't be audited because it's not the version with components + vectors, but it's an image of the website. If there's a version with the design assets, lmk and I can continue with auditing. Otherwise, the mobile and desktop wireframes are done being audited. Handing them back to you for review!

[mbui31]

@anitadesigns Also, I pulled up the EA's Landing page website and it is not what I see on Figma. There's a big discrepancy and so I cannot use the "inspect" tool since the 2 versions are different.

[anitadesigns]

Noticed the wrong screen shot was added to this section and replaced it with the correct one. I check the annotations for the desktop and mobile frames and it looks great! Assigning it back to @mbui31 to finish the live website section

[mbui31]

@anitadesigns thank you for updating the live website; finished the audit and reassigning to ya

[mbui31]

"Completed. Ready for Review"