[Audit Colors] in "Why" flow (including pop-up) in LG

[jamiesiu]

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.

You can find access to the space to audit this page under the "Design System Audit" in Figma

[anitadesigns]

Skipping "Main:Why" section due to repetition. Moving on the live website auditing

[phuonguvan]

@anitadesigns Completed. Ready for Review