[Audit Colors] in "Involvement" flow in LG

[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.

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

[jyehllow]

Needs auditing for live website section

[phuonguvan]

@anitadesigns Completed. Ready for Review: There were some texts that did not have hex codes as Inspect only shows them as an image (e.g. next buttons, check marks). Other live website frames also have this issue

[anitadesigns]

Noticed that the check boxes for inactive states on Figma wireframes are a light purple while they appear green on the live website

Completed auditing and will close issue