[Audit Colors] in "Parenting" flow 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]

We decided to just audit elements that were unique to this flow instead of auditing every element that has already been audited in other wireframes. The live website needs to be audited now

[phuonguvan]

@anitadesigns Completed. Ready for Review