Site Audit: Check Checklist modal for visual design consistency

[thetanmancan]

Overview

Check the TDM Calculator's Checklist modal for consistency with the design system.

Details

Some of the implementation of the TDM site does not follow the style guide. We need to conduct an audit of every design aspect of every element on every page in order to ensure the design standards we have established are being followed everywhere on the site. Please use the aspects listed in the Properties section below as a checklist to check the Checklist modal.

Properties

Document the values of these properties using the Figma template listed in the Resources section below. Please also check for other properties or functionalities that aren't explicitly listed here that may occur to you while performing this audit.

• Color
  Check for adherence to color palette.
  Example: Using the Critical color on a Primary button.
  

  List of Elements

  • Heading and Paragraph Texts
  • Buttons
  • Input and Fields
  • Accordions
  • Tooltips
  • Infoboxes
  • Links
  • Any Remaining Page/Content Text or Backgrounds

• Typography
  Check for correct size and other font attributes.
  Example: Using the Header 4 style on paragraph text.
  

  List of Elements

  • Heading and Paragraph Texts
  • Buttons
  • Input and Fields
  • Accordions
  • Tooltips
  • Infoboxes
  • Links
  • Any Remaining Page/Content Text or Backgrounds

• Shadows
  Check for correct blur, spread, color and opacity.
  Example: Elements that shouldn't have drop shadow but have them.
  

  List of Elements

  • Heading and Paragraph Texts
  • Buttons
  • Input and Fields
  • Accordions
  • Tooltips
  • Infoboxes
  • Links
  • Any Remaining Page/Content Text or Backgrounds

• Sizes
  The current style guide does specify any size guidelines except for buttons. Please make sure the buttons follow the size guidelines. For the rest of the elements, note the width and height.
  

  List of Elements

  • Heading and Paragraph Texts
  • Buttons
  • Input and Fields
  • Accordions
  • Tooltips
  • Infoboxes
  • Links
  • Any Remaining Page/Content Text or Backgrounds

• Spacing
  The current style guide does specify any spacing guidelines except for buttons. Please make sure the buttons follow the spacing guidelines. For the rest of the elements, note the margins and padding.
  

  List of Elements

  • Heading and Paragraph Texts
  • Buttons
  • Input and Fields
  • Accordions
  • Tooltips
  • Infoboxes
  • Links
  • Any Remaining Page/Content Text or Backgrounds

• Border
  Check for correct stroke width, color and other attributes.
  Example: Buttons that shouldn't use borders but have them.
  

  List of Elements

  • Heading and Paragraph Texts
  • Buttons
  • Input and Fields
  • Accordions
  • Tooltips
  • Infoboxes
  • Links
  • Any Remaining Page/Content Text or Backgrounds

• Corner Radius
  Check for correct radius attributes.
  Example: Corner radius is only applied to two corners when it should be applied to four.
  

  List of Elements

  • Heading and Paragraph Texts
  • Buttons
  • Input and Fields
  • Accordions
  • Tooltips
  • Infoboxes
  • Links
  • Any Remaining Page/Content Text or Backgrounds

• Icons & Images
  Check for correct icon and image use.
  

  List of Elements

  • Heading and Paragraph Texts
  • Buttons
  • Input and Fields
  • Accordions
  • Tooltips
  • Infoboxes
  • Links
  • Any Remaining Page/Content Text or Backgrounds

Action Items

• Perform audit. Enter design issues or bugs as necessary and list them in the Created Issues section below.
• Review with the design team. Update if needed based on feedback.
• Review with product and dev. Update if needed based on feedback.
• Once finalized, add a slide on the staging deck.
• Get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources

• Template for site audit on Figma
• Style Guide Presentation
• Design System on Figma
• Annotated Figma file from previous site audit

Created Issues

New issues created as a result of conducting this audit—whether they be new design issues or bugs—should be listed in this section.